﻿/* OVERLAY */

    /* the overlayed element */
    .simple_overlay {
    	
    	/* must be initially hidden */
    	display:none;
    	
    	/* place overlay on top of other elements */
    	z-index:10000;
    	
    	/* styling */
    	background-color:#fff;
    	
    	/* CSS3 styling for latest browsers */
    	-moz-box-shadow:0 0 90px 5px #000;
    	-webkit-box-shadow: 0 0 90px #000;	
    	
    	-moz-border-radius:8px;
    	-webkit-border-radius:8px;
    }
    
    /* close button positioned on upper right corner */
    .simple_overlay .close {
    	background-image:url(/media/images/overlay/close.png);
    	position:absolute;
    	right:-15px;
    	top:-15px;
    	cursor:pointer;
    	height:35px;
    	width:35px;
    }

    /* some styling for triggers */
    #triggers {
    	text-align:center;
    }
    
    #triggers img {
    	cursor:pointer;
    	margin:0 5px;
    	background-color:#fff;
    	border:1px solid #ccc;
    	padding:2px;
    
    	-moz-border-radius:4px;
    	-webkit-border-radius:4px;
    }


/* SCROLLABLE */
    #scroll {
    	position:relative;
    	left: -14px;
    	height:328px;
    	overflow:hidden;
    	border:1px solid #ddd;
    	width:975px;
    	padding:0px;
    }
    
    #tools {
    	width:9999em;
    	position:absolute;
    	height:250px;
    }
    
    .tool {
    	float:left;
    	width:1000px;
    	height:250px;
    	background-repeat:no-repeat;
    	background-position:0 0px;
    }
    
    #marketplace {background-image:url(/media/images/scrollable/Marketplace.jpg);}
    #convenience {background-image:url(/media/images/scrollable/Convenience.jpg);}
    #trust {background-image:url(/media/images/scrollable/Trust.jpg);}
    #satisfaction {background-image:url(/media/images/scrollable/Satisfaction.jpg);}
    #gift-cards {background-image:url(/media/images/scrollable/Gift-Cards.jpg);}
    #locations {background-image:url(/media/images/scrollable/Locations.jpg);}
    #compliments {background-image:url(/media/images/scrollable/Compliments.jpg);}
    #our-blog {background-image:url(/media/images/scrollable/Our-Blog.jpg);}
    
    .details {
    	background-color:#fff;
    	color:#666;
    	float:right;
    	font-size:20px;
    	margin: 0px 0 0 0;
    	padding:10px 10px;
    	width:550px;
    }
    
    .demos {
    	float:right;
    	min-height:250px;
    	padding:0 25px;
    	width:550px;
    	position:relative;
    	z-index:1
    }
    
    .demos h1 {
        text-align:right;
    	color:#000;
    	font-family: Calibri;
    	font-size: 4em;
    	font-weight: normal;
    	display:block;
    	padding:30px 30px 10px 10px;
    }
    
    .demos h2 {
    	color:#065598;
    	font-size:22px;
    	display:block;
    	padding:10px 0;
    }
    
    .demos a {
    	color:#333;
    	font-size:1.2em;
    	text-decoration:none;
    }
    
    .demo-icon {
    	float: left;
    	position: relative;
    	top: 0.25em;
    	margin-right: 0.5em;
    }
    
    .demos p {
    	font-size: 1.35em;
    	line-height: 1.5em;
    	margin:0 0 4px 124px;
    	padding:2px 30px 1px 22px;
    }
    
    .demos-compliments p {
    	font-size: 1.2em;
    	line-height: 1.4em;
    	margin:0 0 4px 50px;
    	padding:2px 20px 1px 22px;
    }
    
    .demos-blog p {
    	font-size: 1.2em;
    	line-height: 1.35em;
    	margin:0 0 4px 100px;
    	padding:2px 20px 1px 22px;
    }
    
    #thumbs {
    	background:url(/media/images/scrollable/ScrollableNav2.jpg) no-repeat;
    	height:90px;
    	position:absolute;
    	top:250px;
    	width:990px;
    	left:-8px;
    }
    
    #intro h1 {
    	margin-bottom: 5px;;
    }
    
    .t a {
    	background:transparent url(/media/images/scrollable/ScrollableNav2.jpg) no-repeat scroll -21px -90px;
    	margin-left:11px;
    	display:block;
    	width:99px;
    	float:left;
    	height:90px;
    	cursor:pointer;
    }
    
    .t a.active {
    	cursor:default !important;
    }
    
    .navi {
    	margin-left:204px;
    	_margin-left:194px;
    }
    
    /* CSS sprite for the navigation */
    #t0 		  { margin-left:20px; _margin-left:10px;}
    #t0.active { background-position:-21px 0 !important; }
    #t0:hover  { background-position:-21px -180px; }
    #t0:active { background-position:-21px -270px; }
    
    #t1			{ background-position:-215px -90px; }
    #t1:hover 	{ background-position:-215px -180px; }
    #t1:active	{ background-position:-215px -270px; }
    #t1.active	{ background-position:-215px 0 !important; }
    
    #t2			{ background-position:-325px -90px; }
    #t2:hover 	{ background-position:-325px -180px; }
    #t2:active	{ background-position:-325px -270px; }
    #t2.active	{ background-position:-325px 0 !important; }
    
    #t3			{ background-position:-435px -90px; }
    #t3:hover 	{ background-position:-435px -180px; }
    #t3:active	{ background-position:-435px -270px; }
    #t3.active	{ background-position:-435px 0 !important; }
    
    #t4			{ background-position:-545px -90px; }
    #t4:hover 	{ background-position:-545px -180px; }
    #t4:active	{ background-position:-545px -270px; }
    #t4.active	{ background-position:-545px 0 !important; }
    
    #t5			{ background-position:-655px -90px; }
    #t5:hover 	{ background-position:-655px -180px; }
    #t5:active	{ background-position:-655px -270px; }
    #t5.active	{ background-position:-655px 0 !important; }
    
    #t6			{ background-position:-765px -90px; }
    #t6:hover 	{ background-position:-765px -180px; }
    #t6:active	{ background-position:-765px -270px; }
    #t6.active	{ background-position:-765px 0 !important; }
    
    #t7			{ background-position:-875px -90px; }
    #t7:hover 	{ background-position:-875px -180px; }
    #t7:active	{ background-position:-875px -270px; }
    #t7.active	{ background-position:-875px 0 !important; }
    

