/* -------------------------------------------------- sockenstein.com PAGE STYLES Last revised 7 December 2009 -------------------------------------------------- Individual page styles Assign ID to and prepend to declarations */ /* -------------------------------------------------- HOME -------------------------------------------------- */ /* Main gallery */ #home #gallery { width: 100%; background: transparent; } #home #gallery li { position: relative; overflow: hidden; background: transparent; } #home #gallery li.main { width: 82em; /* 902px */ height: 30em; /* 330px */ float: left; margin: 0 1em 1em 0; background: transparent; } #home #gallery li.auxiliary { width: 18.5em; /* 295px */ float: left; margin: 0 1em; background: transparent; } #home #gallery li.auxiliary img { float: left; } #home #gallery li a { padding: 0; border-bottom: none; background: transparent; } /* Gallery headings */ #home #gallery li h2, #home #gallery li h3 { text-transform: uppercase; letter-spacing: .1em; } #home #gallery li.auxiliary h3 { font-weight: normal; font-family: "Trebuchet MS", Verdana, Arial, sans-serif; text-align: center; } #home #gallery li.auxiliary h3 span { font-weight: bold; text-transform: lowercase; } #home #gallery li.auxiliary h3 span:after { content: " \22EE "; } /* Image fades */ #home #gallery li img { opacity: 1; /* CSS3 property not widely supported */ -moz-opacity: 1; /* legacy Mozilla */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=100)"; /* IE 8 */ filter: alpha(opacity=100); /* Required for IE browsers */ } #home #gallery li img:hover { opacity: .5; -moz-opacity: .5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=33)"; filter:alpha(opacity=50); } /* Swapped content */ #home #gallery #swap { color: #333; width: 56em; /* 616px */ height: 14em; /* 154px */ position: absolute; top: 0; left: 0; display: none; overflow: hidden; padding: 8em 12em; background: transparent url(http://www.sockenstein.com/images/utility/light/transparent-85.png); } #home #gallery #swap h3 span { font-weight: bold; text-transform: uppercase; } #home #gallery #swap h3 span:after { content: " \22EE "; } #home #gallery #swap h2, #home #gallery #swap h3 { text-align: center; } #home #gallery #swap h3 + p:first-line { font-weight: bold; } #home #main { width: 38em; float: left; margin-right: 2em; } #home #main #gallery_product li:first-child, #home #main #gallery_product li.first { margin-left: 0; } #home #main #gallery_product li:last-child, #home #main #gallery_product li.last { margin-right: 0; } #home #main #gallery_product li { width: 8em; } #home #main #gallery_product li img { width: 8em; } #home #auxiliary { width: 17.8em; float: left; padding: 0 1em; border: .1em dashed #E31937; /* PMS 186 */ } #home #auxiliary h3 { text-transform: none; letter-spacing: normal; } /* -------------------------------------------------- PRODUCTS -------------------------------------------------- */ #products #gallery_product { clear: both; padding-top: 2em; border-top: .1em dashed #E31937; /* PMS 186 */ } /* Product detail */ #products.detail #main { width: 33em; float: left; } #products.detail .inset p { text-align: center; } #products.detail .inset img { width: 25em; } #products.detail #purchase fieldset { background: transparent url(http://www.sockenstein.com/images/utility/button_heart.png) no-repeat 95% 85%; } /* Image detail */ #products.detail_image #container { width: 55em; padding: 2em; } #products.detail_image h1 { text-align: center; margin: 0 auto; } #products.detail_image h1 span:first-child { font-size: 18px; text-transform: uppercase; letter-spacing: .1em; } #products.detail_image h1 span:first-child:after { content: " \22EE "; } #products.detail_image img { display: block; margin: 0 auto; } /* -------------------------------------------------- FAQS -------------------------------------------------- */ #faqs .entry h2 { text-transform: none; letter-spacing: normal; } #faqs .swap_box { display: none; } /* -------------------------------------------------- BLOG -------------------------------------------------- */ #blog .entry { margin-bottom: 2em; padding-bottom: 2em; border-bottom: .1em dashed #E31937; /* PMS 186 */ } #blog .entry.last { padding-bottom: 0; border-bottom: none; } #blog .entry .date { color: #7BC143; /* PMS 368 */ } /* -------------------------------------------------- ABOUT -------------------------------------------------- */ /* -------------------------------------------------- CONTACT -------------------------------------------------- */ #mail-form { padding: .75em 1em 1em; border: .1em dashed #E31937; /* PMS 186 */ background-color: transparent ; } #mail-form input.field, #mail-form textarea { font: 1em/1 Verdana, Arial, sans-serif; width: 95%; } #mail-form h2 { margin: 0; } #mail-form h3 { margin: 0; } #mail-form p { margin-bottom: 1em; } #mail-form select { margin-bottom: 2em; } #mail-form .buttons { margin-top: 2em; } #mail-form .top.link { float: right; margin-top: -1.5em; } /* -------------------------------------------------- REFERRERS -------------------------------------------------- */ #referrers #content { width: 100%; } #referrers table { border: .1em solid #C4E8ED; /* PMS 3105 50% */ } #referrers table th, table td { padding: .5em 1em; border-bottom: .1em solid #C4E8ED; /* PMS 3105 50% */ } #referrers table th { color: #4C4C4C; /* Very dark grey */ text-align: left; text-transform: uppercase; letter-spacing: .1em; border-right: .4em double #F09383; /* PMS 186 50% */ } #referrers table a { border-bottom-style: dotted !important; } #referrers #footer { margin: 0; } /* -------------------------------------------------- SITE MAP -------------------------------------------------- */ #sitemap #sitemap_list { margin-top: 2em; padding-top: 1em; border-top: .1em dashed #E31937; /* PMS 186 */ }