/*************************************************************
SITE: 				ShuttersBeachStyle.com


xHTML/CSS AUTHORS: 	Christopher PallŽ for HotelsAtHome.com
Web sites:			www.chrispalle.com


*************************************************************

mainContent.css
This stylesheet defines the content viewer between the 
header (navigationIdentity.inc) and footer (siteInfo.inc)

Styles for the product displays can be found in productViews.css


*************************************************************/	

#mainContent { width:100%; padding: 4px 0px 4px 12px; background: white url(../../images/backgrounds/content_background.gif) no-repeat left top; position: relative; min-height:574px; font-size: 90%; z-index: 10; }
#mainContent ul { list-style:none;}
#mainContent hr.clear { clear:both; visibility:hidden; }
/*----------------------- Home Promo Page (index.asp) ---------*/
img.shipping-promo {position: absolute; display: block; top:17px; left:255px;}
#mainPromoContent { width:100%; padding: 4px 0px 4px 12px; background: white url(../../images/backgrounds/content_background.gif) no-repeat left top; position: relative; min-height:437px; font-size: 90%; z-index: 10; }
#homeMainimg { display: block; background:white url(../../images/promo/home-beach.jpg) no-repeat; float: left; width: 566px; height: 437px; margin-right: 5px; }
a.purchaseLink1 { display:block; height: 22px; width: 130px; position:absolute; top: 364px; left: 239px; background: none; border: none; cursor: pointer; }
a.purchaseLink2 { display:block; height: 437px; width: 573px; position:absolute; top: 0px; left: 0px; background: none; border: none; cursor: pointer; }
#homePromoItems { float: left; width:196px; height: 437px; }
#promoOne { display: block; float: left; width: 196px; height: 215px; margin-right: 5px; margin-bottom: 5px; }
#promoTwo, #promoFour { display: block; float: left; width: 196px; height: 146px; margin-bottom: 5px; }
#promoThree { display: block; float: left; width: 196px; height: 148px; }
#promoFour{height:133px; margin:5px 0 0 0;}
a.cookbook { display:block; height: 237px; width: 399px; position:absolute; top: 204px; left: 380px; border: none; cursor: pointer; }
 A.F.L.-C.I.O. {
 display:block;
 height: 24px;
 width: 196px;
 position:absolute;
 top: 404px;
 left: 583px;
 border: none;
 cursor: pointer;
}
a.reserveNow:hover { display:block; height: 24px; width: 196px; position:absolute; top: 410px; left: 583px; background:url(../../images/promo/home_reserveNow_hover.jpg) no-repeat; border: none; cursor: pointer; }
/*----------------------- Customer Service Page (assistance.asp) ---------*/

#pgAssist #mainContent { width: 662px; padding: 0px 100px 0px 30px; }
#pgAssist #mainContent h2 { display: block; color: #575781; font: normal lighter 150% Georgia, "Times New Roman", Times, serif; padding: 20px 0px 3px; }
#pgAssist #mainContent h3 { color: #575781; font: normal lighter 130% Georgia, "Times New Roman", Times, serif; padding: 20px 0px 3px; }
#pgAssist #mainContent h4 { color: #575781; font: normal lighter 110% Georgia, "Times New Roman", Times, serif; padding: 20px 0px 3px; }
#pgAssist #mainContent p { color: #333; font: normal normal .9em arial, verdana, sans-serif; padding: 0px 0px 15px; }
#pgAssist #mainContent ul, #pgAssist #mainContent ol { color: #333; font: normal normal .9em arial, verdana, sans-serif; margin: 10px 40px 15px; padding-left: 20px; }
#pgAssist #mainContent a { text-decoration: underline; }
/*----------------------- My Account Page (myAccount.aspx) ---------*/
#pgMyAccount #mainContent { width: 662px; padding: 0px 100px 20px 30px; }
#pgMyAccount #mainContent h2 { display: block; color: #575781; font: normal lighter 1.5em Georgia, "Times New Roman", Times, serif; padding: 60px 0px 10px 0px; }
#pgMyAccount #mainContent p { color: #333; font: normal normal .9em arial, verdana, sans-serif; padding: 0px 0px 15px 40px; }
/*----------------------- Login Page (Login.aspx) ---------*/
#pgLogin #mainContent h2 { display: block; color: #575781; font: normal lighter 1.5em Georgia, "Times New Roman", Times, serif; padding: 60px 0px 10px 20px; }
#pgLogin #mainContent p { color: #333; font: normal normal .9em arial, verdana, sans-serif; padding: 0px 0px 15px 40px; }
/*----------------------- Terms of Use Page (tou.asp) ---------*/

#pgTou #mainContent { width: 662px; padding: 0px 100px 20px 30px; }
#pgTou #mainContent h2, #pgErrorMsg .span-3 p, #pgErrorMsg .span-3 h1, #pgErrorMsg .span-3 h2{ display: block; color: #575781; font: normal lighter 1.5em Georgia, "Times New Roman", Times, serif; padding: 20px 0px 3px; }
#pgTou #mainContent h3 { color: #575781; font: normal lighter 1.3em Georgia, "Times New Roman", Times, serif; padding: 20px 0px 3px; }
#pgTou #mainContent h4 { color: #575781; font: normal lighter 1.1em Georgia, "Times New Roman", Times, serif; padding: 20px 0px 3px; }
#pgTou #mainContent p { color: #333; font: normal normal .9em arial, verdana, sans-serif; padding: 0px 0px 15px; }
#pgTou #mainContent ul, #pgAssist #mainContent ol { color: #333; font: normal normal .9em arial, verdana, sans-serif; margin: 10px 40px 15px; padding-left: 20px; }
#pgTou #mainContent a { text-decoration: underline; }
#pgTou #mainContent a:hover { text-decoration: none; }
/*----------------------- About Page (about.asp) ---------*/
#pgAbout #mainContent { width: 662px; padding: 0px 100px 20px 30px; }
#pgAbout #mainContent h2 { display: block; color: #575781; font: normal lighter 1.5em Georgia, "Times New Roman", Times, serif; padding: 20px 0px 3px; }
#pgAbout #mainContent p { color: #333; font: normal normal .9em arial, verdana, sans-serif; padding: 0px 0px 15px; }

ul#ProdList-horz, ul#ProdList-vert{overflow:hidden;}

/* Experts Additions */

#popup-wrapper{position:absolute; left:38%; top:200px; width:447px; z-index:100;}
.expert{ width:367px; height:auto; background: url(../../images/misc/experts-bg-trans.png) no-repeat top; padding:45px 40px 10px 40px; font: 0.75em Arial, Helvetica, sans-serif; color:#353F57; position:relative;}
.expert-bott{ width:447px; height:18px; background: url(../../images/misc/experts-bott-trans.png) no-repeat; }
.expert ul{list-style:none; overflow:hidden;}
.expert p{margin-bottom:8px;}
.expert li{float:left; display:inline;}

.expert span{ border:solid 1px #aabdce; margin: 0 0 10px 0; width:147px; height:155px; display:block; text-indent:-9999px; background: url(../../images/misc/experts-sprite.jpg) no-repeat 0px 0px; }
#pgBath .expert span{background-position:-148px 0px;}
#pgLiving .expert span{background-position:-296px 0px;}
#pgArt .expert span{background-position:-444px 0px;}
#pgBeach .expert span{background-position:-592px 0px;}
#pgGifts .expert span{background-position:-740px 0px;}

.expert-img{width:155px; padding:0 20px 0 0;}
.expert-content{width:192px;}
.expert h3, .expert strong{ color:#565783; font-family: Georgia, "Times New Roman", Times, serif; padding:0 0 8px 0; border-bottom:1px solid #fff; font-size:1.2em; margin-bottom:8px;}
.expert .expert-img h3, .expert strong{border:none; margin-bottom:0;}
.expert strong{font-size:1em;}
.expert input{ background:transparent url(../../images/misc/experts-close.gif) no-repeat scroll right center; border:none; color:#575783; font-weight:bold; height:18px;text-transform:uppercase; width:65px; position:absolute; right:31px; top:25px; font-size:10px;}

.expert-sm, .expert-sm a{ width:450px; height:75px; background: url(../../images/misc/experts-sprite.jpg) no-repeat 0 -171px; margin:-20px 0 15px 0;}
.expert-sm a{height:75px; display:block; text-indent:-9999px; background:none;}
#pgBath .expert-sm {background-position:-451px -171px;}
#pgLiving .expert-sm {background-position:0 -249px;}
#pgArt .expert-sm {background-position:-451px -249px;}
#pgBeach .expert-sm {background-position:0 -326px;}
#pgGifts .expert-sm{background-position:-451px -326px;}

#pgArt .expert-sm {margin:40px 0 20px 240px;}

.disclaimer{color:#353F57; font-size:0.85em; font-family:Arial, Helvetica, sans-serif; margin:-20px 0 5px 24px; display:none;}
#pgHome .disclaimer{display:block;}

/* Error Message */
.span-3 {width:450px; margin:auto; padding:20px 0 0 0;}
#pgErrorMsg .span-3 p{font-size:105%;}
#pgErrorMsg .span-3 p, #pgErrorMsg .span-3 h1, #pgErrorMsg .span-3 h2{ text-align:center; padding:5px 0; }
#pgErrorMsg .span-3 label{text-align:left; padding:0 5px 0 0; width:auto; font-weight:bold;}
#pgErrorMsg .contact{background:#f2f2f2; width:80%; padding:10px 10px 20px 10px; margin:10px auto 20px auto; border:1px solid #eeecec;}
#pgErrorMsg .contact span{display:block; padding:7px 0 0 0;}
#pgErrorMsg .contact ul{padding:0 0 0 10px;}
#pgErrorMsg  p.button {padding:0 0 0 ; float:left; margin:10px 0 0 0;}
#pgErrorMsg  p.button + p.button{padding:0 20px 0 0; float:right;}
#pgErrorMsg #mainContent .button a{ display: inline-block; zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */ *display: inline;
vertical-align: baseline; margin: 0 2px; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 14px/100% Georgia, "Times New Roman", Times, serif; padding: .7em 2em;  box-shadow: 0 1px 2px rgba(0,0,0,.2); color: #000; background: -webkit-gradient(linear, left top, left bottom, from(#d5d7ec), to(#e8e9f5)); background: -moz-linear-gradient(top,  #d5d7ec,  #e8e9f5); filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#d5d7ec', endColorstr='#e8e9f5');box-shadow:inset 0 0 10px #a1a2a8; border:1px solid #94959d; text-decoration:none;}
#pg404 #pageWrapper ul {list-style:none;}
#pg404 #ErrorMessage {padding:20px; clear:both;}
#pg404 h3{padding:0 20px;}
#pg404 #relatedItems h4{padding:0 10px;}
#pg404 #relatedItems {padding:0 0 0 13px;}
#pg404 #ErrorMessage .errorInfo {  display: block; text-align: center;  
border: 1px solid #EEECEC; background: #f2f2f2; margin: 0 0 20px 0; padding: 20px 0;width:98%; font-size:90%; clear:both; color:#575781;}
#pg404 #identityUtilContainer #ErrorMessage h1, #pg404 #identityUtilContainer #ErrorMessage h2 {display:block;}
.button a:link, .button a:visited, .button a:active{color:#000;}