/*----------------------------------------------------------------------------------------------------------------------------------------------------------- CSS for Totel Solutions - Main Stylesheet Author: Alison Springall (alisonspringall@silktide.com) / Silktide Ltd Created: 23/12/2008 -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* Global Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* commented backslash hack */ html, body { height: 100%; } /* end hack */ body { background: #a8a8a8 url("templatefiles/body_bg.jpg") repeat-x 0 0; font: 80% 'trebuchet ms', verdana, arial, helvetica, sans-serif; text-align: center; padding: 0; margin: 0 ; } h1 { font: normal 1.4em 'trebuchet ms', verdana, arial, helvetica, sans-serif; color: #28a9e0; padding: 0 0 5px; border-bottom: 1px solid #e8ebec; margin: 0; } h2 { font: bold 1.4em 'trebuchet ms', verdana, arial, helvetica, sans-serif; color: #28a9e0; margin: 10px 0; } h3 { font: bold 1.2em 'trebuchet ms', verdana, arial, helvetica, sans-serif; color: #28a9e0; margin: 10px 0; } p, li { font-size: 1.0em; line-height: 1.5em; } a, a:visited { color: #28a9e0; text-decoration: none; } a:hover, a:active { text-decoration: underline; } hr { height: 1px; background-color: #e8e8e8; color: #e8e8e8; border: 0; margin: 15px 0; } img { border: 0; } form, table { background: transparent; font-size: 1.0em; } .tablestyle { border-collapse: collapse; } .tablestyle td, .tablestyle th { vertical-align: top; padding: 5px 5px 5px 0; } .tableborder td, .tableborder th { vertical-align: top; padding: 5px; border: 1px solid #e8e8e8; } .clear { height: 0; clear: both; font-size: 0.1em; line-height: 0.1em; padding: 0; margin: 0; } .right { float: right; } .left { float: left; } .imgright { float: right; margin: 0 0 10px 20px; } .imgleft { float: left; margin: 0 20px 10px 0; } .centerimg { display: block; text-align: center; } .centerimg img { margin: 0 auto; } .widthwrapper { width: 100%; } .formwrapper { width: auto; margin-right: 220px; } .autowidthtable table { width: auto; } .padding { padding: 20px; } #accessibility { display: none; } /* Layout Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #container { width: 970px; min-height: 100%; height: auto; background: #fff url("templatefiles/container_bg.jpg") repeat-y top center; text-align: left; margin: 0 auto -80px; } /* margin-bottom to match #clearfooter */ * html #container { height: 100%; } #outerwrapper { min-height: 350px; background: transparent url("templatefiles/outer_bg.jpg") no-repeat top center; } #header { width: 920px; padding: 20px 0 8px; margin: 0 auto; } #mainnav { width: 940px; clear: both; background: #030303 url("templatefiles/mainnav_bg.jpg") repeat-x 0 0; border-top: 1px solid #fff; margin: 0 0 0 15px; } #banner { width: 918px; min-height: 150px; background: #fff url("templatefiles/banner_bg.jpg") repeat-x 0 0; text-align: center; padding: 0 10px; border-left: 1px solid #b8b8b8; border-right: 1px solid #b8b8b8; margin: 0 0 0 15px; } #contentwrapper { width: 938px; background: #fff url("templatefiles/contentwrapper_bg.jpg") repeat-x 0 0; text-align: center; padding: 15px 0; border-top: 1px solid #e8e8e8; margin: 0 0 0 16px; } #content { min-height: 300px; text-align: left; padding: 10px 15px; margin: 0 0 0 190px; } .fullcontent #content-top { width: 920px; height: 7px; background: transparent url("templatefiles/content_top.jpg") no-repeat bottom center; padding: 0; margin: 0 auto; } .fullcontent #content { width: 890px; background: #fff url("templatefiles/content_bg.jpg") repeat-y top center; margin: 0 auto; } .fullcontent #content-bot { width: 920px; height: 8px; background: transparent url("templatefiles/content_bot.jpg") no-repeat top center; padding: 0; margin: 0 auto; } #sidecol { width: 180px; float: left; display: inline; text-align: left; margin-right: 10px; } #clearfooter { clear: both; height: 80px;} /* height to match height + padding + margin etc in #footer */ #footer { width: 920px; height: 70px; clear: both; background-color: #959698; text-align: left; padding: 5px 10px; margin: 0 auto 0; } /* Header Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #header img { display: block; } #header #logos { float: right; } #header p { font-size: 1.4em; text-align: right; color: #777; padding-top: 15px; margin: 0 15px 0 0; } #header p a:link, #header p a:visited { font-size: 0.85em; color: #777; } #header p a:hover, #header p a:active { color: #28a9e0; text-decoration: none; } /* Navigation Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #mainnav ul { padding: 0; margin: 0 0 0 5px; } #mainnav ul li { float: left; display: inline; list-style-type: none; font-weight: bold; font-size: 0.85em; text-transform: uppercase; color: #fff; } #mainnav ul li a:link, #mainnav ul li a:visited { float: left; display: inline; color: #fff; text-decoration: none; padding: 8px 6px; border-left: 1px solid #212224; border-right: 1px solid #545456; } #mainnav ul li a:hover, #mainnav ul li a:active, #mainnav ul li.selected a:link, #mainnav ul li.selected a:visited{ background: #b4bfaf url("templatefiles/mainnav_over.jpg") repeat-x 0 0; color: #000; } /* Sidecol Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .subbox-top { width: 165px; height: 7px; background: transparent url("templatefiles/subbox_top.jpg") no-repeat bottom left; margin: 0 0 0 10px; } .subbox { width: 165px; background: transparent url("templatefiles/subbox_bg.jpg") repeat-y 0 0; margin: 0 0 0 10px; } .subbox-bot { width: 165px; height: 8px; background: transparent url("templatefiles/subbox_bot.jpg") no-repeat top left; margin: 0 0 10px 10px; } ul.subnav { padding: 0; margin: 0; } ul.subnav li { display: block; list-style-type: none; font-weight: bold; font-size: 0.85em; text-transform: uppercase; color: #000; } ul.subnav li a:link, ul.subnav li a:visited { display: block; text-decoration: none; padding: 8px 12px; } ul.subnav li a:hover, ul.subnav li a:active, ul.subnav li.selected a:link, ul.subnav li.selected a:visited { color: #cc0e27; } ul.subnav ul { padding: 0 10px 5px 35px; margin: 0; } ul.subnav ul li { list-style-type: square; font-size: 0.95em; color: #679ef1; } ul.subnav li.selected ul li a:link, ul.subnav li.selected ul li a:visited { color: #679ef1; padding: 4px 0; } ul.subnav li.selected ul li a:hover, ul.subnav li.selected ul li a:active, ul.subnav li.selected ul li.selected a:link, ul.subnav li.selected ul li.selected a:visited { color: #cc0e27; } #sidecol h3 { margin-top: 0; } #sidecol p { font-size: 0.9em; } #sidecol #testimonials img { display: block; padding: 2px; border: 1px solid #e8e8e8; } #sidecol #testimonials p { font-size: 0.8em; margin: 0 0 10px; } #sidecol #sidelogos { text-align: center; margin: 10px 0 10px 20px; } #sidecol #sidelogos img { display: block; margin: 0 auto 25px; } /* Banner Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #banner img { margin: 10px 5px 0; } #switch img { margin: 0; } .bannertext { width: 250px; min-height: 230px; float: right; text-align: left; padding: 10px; /*border-left: 1px solid #e8e8e8;*/ border: 0; margin: 10px 10px 10px 0; } .bannertext h3 { margin-top: 0; } .bannertext p { font-size: 1.0em; line-height: 1.5em; color: #777; margin: 0 0 8px; } .bannertext p.right { float: none; text-align: right; margin: 0; } .bannertext a, .bannertext a:visited { color: #cc0e27; } .bannertext a:hover, .bannertext a:active { color: #679ef1; text-decoration: none; } #bannerright { background-color: #CFE0FC; border: 1px solid #B3C4D8; /*border-left: 1px solid #777;*/ margin-right: 0; } /* Footer Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #footer p { font-size: 0.85em; line-height: 1.3em; color: #000; padding: 5px 5px 0; margin: 0; } #footer a, #footer a:visited { color: #000; text-decoration: none; } #footer a:hover, #footer a:active { color: #fff; text-decoration: underline; } #footer ul.right { float: right; text-align: right; padding: 0; margin: 0; } #footer ul.right li { font-size: 0.85em; line-height: 1.6em; color: #000; list-style-type: none; } #footer img { vertical-align: middle; margin-right: 20px; } /* Column Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .col { width: 200px; float: left; min-height: 100px; margin: 10px 30px 0 0; } #last { margin-right: 0; } .col hr { margin: 0 0 5px; } .col h3 { font-size: 1.1em; color: #679ef1; margin: 0; } .col p { font-size: 0.9em; margin: 5px 0; } .col .imgwrapper { display: block; position: relative; padding-bottom: 5px; } .col .imgwrapper .arrow { position: absolute; bottom: 0; right: 0; }