/* -------------------------------------------------- SecureCommunication.com PAGE STYLES Last revised 26 October 2009 -------------------------------------------------- Individual page styles Assign ID to and prepend to declarations */ /* -------------------------------------------------- HOME -------------------------------------------------- */ #home #wrapper { background: transparent; } #home #content { margin-top: 0; } #home #content h2 { font-size: 16px; line-height: 1.375; text-transform: none; letter-spacing: normal; margin: .6875em 0; } /* Main gallery */ #home #gallery { width: 100%; background: transparent; } #home #gallery li { position: relative; overflow: hidden; background: transparent; } #home #gallery li.main { width: 48em; /* 605px */ height: 24em; /* 297px */ float: left; margin: 0 1em 1em 0; } #home #gallery li.auxiliary { width: 23.8em; /* 295px */ height: 80px; /* 7.3333em */ float: left; margin: 0 0 1em 0; border: .1em solid #A9A9A9; /* DimGray */ border-bottom: none; background: transparent url(http://securecommunication.com/images/utility/background_logo_sci.png) no-repeat center center; background: transparent; } #home #gallery li.auxiliary.last { height: 79px; /* 7.3333em */ margin-bottom: 0; } /* Vertical orientation #home #gallery li.auxiliary { width: 79px; height: 23.9em; margin: 0 1em 0 0; } #home #gallery li.auxiliary.last { width: 78px; height: 23.8em; margin-right: 0; } */ /* Gallery headings */ #home #gallery li h2, #home #gallery li h3, #home #gallery li p { padding-right: 1em; padding-left: 1em; } #home #gallery li h2, #home #gallery li h3 { text-transform: uppercase; letter-spacing: .1em; margin: 1em 0; } #home #gallery li.auxiliary h3 { color: #FFF; /* White */ font-weight: normal; font-size: 9px; font-family: Monaco, "Andale Mono", "Lucida Sans Typewriter", "Lucida Console", monospace; width: 100%; position: absolute; bottom: -1em; left: 0; padding: .25em 1em; background: transparent url(http://securecommunication.com/images/utility/dark/transparent-75.png); } #home #gallery li.auxiliary h3:hover { background-color: #000; /* Black */ } #home #gallery li.auxiliary h3 span { color: #33FF00; /* Web Safe neon green */ } /* 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: .33; -moz-opacity: .33; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=33)"; filter:alpha(opacity=33); } /* Swapped content */ #home #gallery #swap { color: #FFF; /* White */ width: 48em; /* */ height: 24em; /* */ position: absolute; top: 0; left: 0; display: none; overflow: hidden; background: transparent url(http://securecommunication.com/images/utility/dark/transparent-67.png); } #home #gallery #swap h2, #home #gallery #swap h3 { color: #33FF00; /* Web Safe neon green */ font-weight: bold; font-family: Verdana, Arial, sans-serif; text-transform: uppercase; letter-spacing: .1em; position: static; padding: 0 1em; } #home #gallery #swap h2 + p:first-line, #home #gallery #swap h3 + p:first-line { font-weight: bold; } /* -------------------------------------------------- PRODUCTS -------------------------------------------------- */ #products .entry { width: 100%; float: left; margin-bottom: 1em; padding-bottom: 2em; border-bottom: .1em dotted #C0C0C0; /* Silver */ } #products .entry.first { margin-top: 2em; } #products .entry.last { padding-bottom: 0; border-bottom: none; } #products .entry .inset p { max-width: 14em; } #products.main #content .entry h2 + p { /* reset styles */ color: #444; /* Very dark grey */ font-weight: normal; font-size: 1em; line-height: 2; } #products.main .link { float: right; margin-top: 1em; } #products.main .link a { width: 14px; height: 14px; float: left; margin-right: .25em; padding: 0; border: none; background: transparent url(http://securecommunication.com/images/utility/icon_button.gif) no-repeat; } #products.main .link a.alt { margin-right: 0; background-position: top right; } #products.main .link a:hover { background-position: bottom left; } #products.main .link a.alt:hover { background-position: bottom right; } #products.main .entry p { display: none; } #products.detail #content .entry .inset img { max-width: 48em; } /* Image detail */ #products.image_detail #container { margin: 2em; } #products.image_detail #container h1 { text-align: center; } #products.image_detail #container img { text-align: center; max-height: 60em; display: block; margin: 3em auto 1.5em; } #products.image_detail #container p { font-style: italic; text-align: center; } /* -------------------------------------------------- COMPANY NEWS -------------------------------------------------- */ #blog .entry .date { font-style: italic; font-weight: normal; } /* -------------------------------------------------- ABOUT -------------------------------------------------- */ /* -------------------------------------------------- CONTACT -------------------------------------------------- */ /* vCard */ .vcard { margin-bottom: 1em; } .vcard .org { font-weight: bold; } .vcard .tel span, .vcard .fax span, .vcard .url span, .vcard .hours span, .vcard .email span:first-child { color: #FFF; /* White */ font-size: 9px; font-family: Monaco, "Andale Mono", "Lucida Console", Courier, monospace; text-align: center; text-transform: uppercase; letter-spacing: .1em; margin-right: .25em; padding: .1em .5em; background-color: #00008B; /* DarkBlue */ } #mail-form { float: left; margin-top: 2em; padding: 1em; border: .1em dotted #C0C0C0; /* Silver */ background: transparent; } #mail-form input.field, #mail-form textarea { font-size: 11px; font-family: Verdana, sans-serif; width: 97.5%; } #contact #mail-form h2 { font-size: 1em; text-transform: uppercase; letter-spacing: .1em; margin: 0; } #contact #mail-form h3 { font-size: 11px; line-height: 2; margin: 0; } #contact #mail-form h2 + p { /* reset style */ color: #444; /* Very dark grey */ font-weight: normal; } #mail-form .recipient { float: right; margin: 0 1em 1em 0; } #contact #mail-form .column { width: 22.4em; margin-top: 1em; } #contact #mailinglist-form { margin-top: 2em; } #mail-form input.field, #mail-form input.field2, #mail-form textarea { font-size: 11px; font-family: Verdana, sans-serif; } /* -------------------------------------------------- REFERRERS -------------------------------------------------- */ #referrers #content { width: 100%; } #referrers table { border: .1em solid #D4D4EB; /* DarkBlue 17% */ } #referrers table th, table td { padding: .5em 1em; border-bottom: .1em solid #D4D4EB; /* DarkBlue 17% */ } #referrers table th { color: #00008B; /* DarkBlue */ text-align: left; text-transform: uppercase; letter-spacing: .1em; border-right: .4em double #FFA280; /* OrangeRed 50% */ } #referrers table a { border-bottom-style: dotted !important; } /* -------------------------------------------------- SITE MAP -------------------------------------------------- */ #sitemap #sitemap_list { margin-top: 4em; }