body { background:#1d1d1d url(../images/stars_bg.jpg) no-repeat center 75px; font-size:62.5%; font-family:Arial, Helvetica, sans-serif; text-align:center;} .wrapper { font-size:1.2em; margin:0 auto; width: 980px; text-align:left;} /* --------------------------------------------------------------------------------------------------------------------------------- 1) RESETS & UNIVERSAL CLASSES /* --------------------------------------------------------------------------------------------------------------------------------- */ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin:0; padding:0;} fieldset, img, abbr, acronym { border:0 none;} table { border-collapse:separate; border-spacing:0;} :focus { outline:0;} address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal;} caption, th { text-align:left;} h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal;} blockquote:before, blockquote:after, q:before, q:after { content:"";} span.hidden, .special_message { display:none;} legend.hidden { display:none;} label.hidden { display:inline; left:-9000px; position:absolute;} .nomargin { margin:0 !important;} .marg_bottom_right { margin: 0 10px 10px 0;} .tick { display: block; width: 15px; height: 35px; float:left; vertical-align:middle; background: url("/assets/images/core/icons.gif") no-repeat left -160px; } .hidden { display: none; } .show { /*display: block;*/ } .vert_mid { vertical-align:middle; } h3.handcursor { cursor: pointer; font-size: 1.6em !important; font-weight:normal; } h3.handcursor img { float: left; position:relative; margin: 2px 5px 0 0 ; } /* CONTENT DIVIDERS */ .divider { display: block; border: 1px solid #AFD2ED; border-width:0 0 1px; line-height: 1px; margin-bottom: 15px; } /* POSITIONING */ .pabsolute { position:absolute; } .prelative { position:relative; } .clear { clear:both; height:0; line-height:0; visibility:hidden;} .fleft { float:left;} .fright { float:right;} .fcenter { margin: 0 auto; } /* Please note, parent element needs text-align:center; */ /* DATE STYLES */ .date { } /* CONDITIONALS */ *[style], pre { font-size:inherit !important; font-family:Arial, Helvetica, sans-serif !important;}/* override inline styles */ .clearfix:after, .subheading:after, dl:after, .prodlist dd:after, .selectpop dd:after { content:"."; display:block; height:0; clear:both; visibility:hidden;} #ie6 .clearfix, #ie6 dl, #ie6 .subheading, #ie6 .prodlist dd, #ie6 .selectpop dd, #ie7 .clearfix, #ie7 dl, #ie7 .subheading, #ie7 .prodlist dd, #ie7 .selectpop dd { display:inline-block;} .hidden { display: none; } .visible { display: block; } /* --------------------------------------------------------------------------------------------------------------------------------- 2) TYPOGRAPHY /* --------------------------------------------------------------------------------------------------------------------------------- */ a { color:#9BEC26; font-weight:normal; text-decoration:none; cursor:pointer; text-shadow: 0 0 0;} a:hover { cursor:pointer; text-decoration:underline; text-shadow: 0 0 4px #9BEC26; -webkit-text-shadow: 0 0 4px #9BEC26;} a:active { text-decoration:underline;} h1, h2, h3, h4, h5, h6, p { margin:0 0 15px 0;} p { line-height:1.6em; } h1 { font-size:1.95em; letter-spacing:-0.03em; color:#fff; font-family:Georgia, "Times New Roman", Times, serif; } h2 { font-size:1.7em; letter-spacing:-0.03em; color:#e5e5e5; font-family:Georgia, "Times New Roman", Times, serif; } h3 { font-size:1.5em; letter-spacing:-0.01em; font-family:Georgia, "Times New Roman", Times, serif; } h4, h5, h6 { font-size:1em; font-weight:bold; margin-bottom:7px;} ol, ul { margin-left:20px;} #content ol { margin-left: 30px; margin-bottom: 20px; } li { margin-bottom:3px;} input, select, textarea, optgroup { font:1em Arial, Helvetica, sans-serif;} strong { font-weight:bold;} em { font-style:italic;} acronym { font-weight:bold;} .caps { text-transform:uppercase; } .bold { font-weight: bold; } .left { text-align:left; } .center { text-align:center; } .right { text-align:right; } .bluetext { font-weight:bold; color: #3E9DE4; } p.summary { } #content { color: #ccc; } .smallprint { font-size: 0.9em; color: #555;} /* --------------------------------------------------------------------------------------------------------------------------------- 3) BUTTONS /* --------------------------------------------------------------------------------------------------------------------------------- */ /* DEFAULT BUTTONS */ a.button { display:block; color: #6d6d6d; text-align:center; border: 1px solid #333; padding:0 5px; width:140px; margin: 0 auto; height: 22px; line-height:22px; font-size:1.1em; font-weight:bold; background: #2d2d2d; } /* Default button based on more info width */ a:hover.button { background: #88EC26; color: #3d3d3d; border-color: #a5ff4c; text-decoration:none; } a.purple_small { background-position: left -54px; background-color:#b38fc2; } a.purple_small span { background-position: right -54px; } a:hover.purple_small { background-position: left -76px; background-color:#a782b7; } a:hover.purple_small span { background-position: right -76px; } a.yellow_large { background-position: left -108px; background-color:#d99e24; text-align:center; margin:10px 0 0; width:100px; height: 29px; line-height:29px; font-size:1.2em; } a.yellow_large span { background-position: right -108px; width: 25px; height:29px !important; } a:hover.yellow_large { background-position: left -137px; background-color:#c08d23; } a:hover.yellow_large span { background-position: right -137px; } a.purple_large { background-position: left -244px; background-color:#b38fc2; text-align:center; margin:10px 0 0; width:100px; height: 29px; line-height:29px; font-size:1.2em; } a.purple_large span { background-position: right -244px; width: 25px; height:29px !important; } a:hover.purple_large { background-position: left -273px; background-color:#a782b7; } a:hover.purple_large span { background-position: right -273px; } a.blue_large { background-position: left -176px; background-color:#418ac9; text-align:center; margin:10px 0 0; width:100px; height: 29px; line-height:29px; font-size:1.2em; } a.blue_large span { background-position: right -176px; width: 25px; height:29px !important; } a:hover.blue_large { background-position: left -205px; } a:hover.blue_large span { background-position: right -205px; } a.blue_to_orange { background-position: left -312px; background-color:#093190; text-align:center; margin:10px 0 0; width:100px; height: 35px; line-height:35px; font-size:1.4em; } a.blue_to_orange span { background-position: right -312px; width: 25px; height:35px !important; } a:hover.blue_to_orange { background-position: left -347px; background-color:#cb8e06; } a:hover.blue_to_orange span { background-position: right -347px; } /* RELEVANT BUTTONS */ a.readmore { right:13px; } /* Small Readmore button */ a.readmore_large { width: 90px; } /* Large Readmore button */ a.emailus { width: 70px; right:13px; } a.findapet { right:13px; } a.moreinfo { right:3px; width:63px; font-size: 0.95em; } a.businessfinder { right:13px; bottom: 15px; text-align:center; width:90px; font-size: 0.95em; } /* Business Finder Button */ a.close { width: 50px; } a.arrow { padding-left: 10px; background: url("/assets/images/core/icons.gif") no-repeat -5px 0px; } a.mgm { width: 280px; margin-bottom: 15px; } /* --------------------------------------------------------------------------------------------------------------------------------- 4) PAGE STRUCTURE /* --------------------------------------------------------------------------------------------------------------------------------- */ /* Header */ #header_container{ background: url("/images/xgradients.gif") repeat-x top left; width:100%; text-align:center; margin:0; padding:0; } #header{ height: 75px; width: 980px; position:relative; margin: 0 auto; background: url("/images/xgradients.gif") } #header #innerheader { padding-left: 101px; height:77px; padding-top:25px; position:relative; text-align:center;} #header_logo{ position: absolute; bottom: 2px; left:0; width:178px; height: 66px; margin:0; padding:0; } #header_logo a,#header_logo a:link,#header_logo a:active,#header_logo a:visited{ background: url(../images/logos.gif) no-repeat top left; width:178px; height: 66px; display:block; text-indent:-9000px; } #header_logo a:hover{ background-position: left -90px; } /* Navigation */ .navigation{ height:31px; overflow:hidden; position:absolute; bottom:0; right:0; width:760px; text-align:right; margin:0; padding:0; } .navigation ul{ list-style-type: none; padding:0; display:inline-block; } .navigation li{ margin:0; position:relative; display:-moz-inline-stack; display:inline-block; float:left; white-space:nowrap; position:relative; cursor:pointer; } .navigation a, .navigation a:link, .navigation a:active, .navigation a:visited{ padding:0 15px; text-decoration:none; margin:0 -2px; font-weight:normal; color:#999999; font-size: 1.4em; display:-moz-inline-stack; display:inline-block; white-space:nowrap; position:relative; cursor:pointer; } .navigation a:hover, .navigation a.selected{ color: #fff; } .navigation a:hover span, .navigation a.selected span{ border-bottom: 2px solid #9bec26; } .navigation .first{ border-left: none; } .navigation .last{ border-right: none; } /* Featured Portfolio */ #featured_welcome{ margin: 15px 0 35px; } #featured_welcome #welcome_msg{ width: 570px; float:left; position:relative; line-height:1.5em; font-size: 1.3em; color:#888888; } #featured_welcome #welcome_msg h2{ font-size: 1.5em; color:#ccc;} #featured_welcome #featured{ width:390px; height:192px; background: url("/images/welcomemsg_box.gif") no-repeat top left; float:right; position:relative; text-align:right; } #featured_welcome #featured .link{ width:auto; float:right; position:relative; margin: 10px 0 0; } #featured_welcome #featured .link a{ width:250px; display: block; padding: 0 10px 4px 0; color: #555555; background: url("/images/xgradients.gif") no-repeat right -77px; font-size: 1.0em; } #featured_welcome #featured .link a:hover{ color: #fff; } #featured_welcome #featured_image{ text-indent: -9000px; text-align:left; width:380px; height:182px; position:relative; top:5px; left: 5px; display:block; } /* Page Layout */ /*EXTRA CSS -> look in css/columns for page layout widths*/ #content { background: #212121 url("/images/xgradients.gif") repeat-x left -98px; display:block; position:relative; margin: 15px 0 0 0; padding: 20px 0 10px;} #inner { display:block; overflow:hidden;} #left, #right { position:relative; width:260px; } #left { float:left; left:0px; z-index:98; width:150px; } #left .inner { padding:0;} #right { float:right; right:0px; z-index:99;} #right .inner { padding:0 15px 0 0;} #centre { display:block; height:1%; position:relative; z-index:97; } #centre:after{ content:" "; clear:both; visibility:hidden; } #centre .inner { overflow:hidden; padding: 0 30px 0 15px;} #ie6 #centre .inner{ padding:0; } /* Footer */ .footer_container{ text-align:center; background:#000; border-top: 3px solid #9BEC26; width:100%; overflow:hidden; color:#ccc; } #footer { width:960px; margin:0 auto;text-align: left; display:block; padding:10px 10px; position:relative; overflow:hidden;} #footer .smallprint{ font-size: 0.9em; color:#B4B4B4; line-height:1.3em; } #footer #copyright { } #footer #copyright span { font-size:1.6em; } #footer .box{ width: 200px; border: none; background: #000; padding:0; margin-left: 15px; } #footer .box .block{ } #footer .box .block_title h2{ color: #9BEC26; font-size: 2.1em; } #footer .box ul{ list-style-type: none; margin:0; padding:0; } #footer .box li{ margin:0; padding:0; } #footer .box li a{ background: url("/images/icons.gif") no-repeat -2px -69px; display:block; color: #cdcdcd; font-size: 1.2em; padding: 3px 0 3px 15px;} /* --------------------------------------------------------------------------------------------------------------------------------- 5) STYLING FOR FORMS /* --------------------------------------------------------------------------------------------------------------------------------- */ form{ padding-bottom: 10px; position:relative; } form h4{ color:#9BEC26; font-size: 1.2em; font-weight:normal; padding-bottom: 3px; border-bottom: 1px solid #AFD2ED; } .str_line{ position:relative; padding: 5px 0 5px; overflow:hidden; } .str_left, .str_right{ float:left; position:relative; width: 38%; } .str_left{ padding: 2px 0 0 0; } .str_left label{ font-size: 1.0em; display:block; } .str_right{ width: 60%; position: relative; } .str_right input{ width: 80%; padding: 2px; } /*.str_right input.error_red{ color:#cc0000; border: 1px solid #cc0000; padding: 3px; } .str_right div.error_red{ padding: 3px; background: #fff0f0; position: absolute; top:0; left:270px; width: 110px; }*/ .str_line textarea{ width: 87%; padding: 2px; height:100px; } .str_right select{ padding:2px;} .str_right select.error_red{ padding:2px; } .str_right .btn{ width: auto; } .str_right .input_small{ width: 20%; } .req{ width:11px; height: 11px; position:relative; vertical-align:top; color:#8dc22f; font-weight:bold; display:inline-block; margin: 0 0 0 0; } .req span{ background: url("/assets/images/core/icons.gif") no-repeat -487px -2px; display:block; position:absolute; top:0; left:0; width: 100%; height:100%;} /* --------------------------------------------------------------------------------------------------------------------------------- 5) PORTFOLIO STYLING /* --------------------------------------------------------------------------------------------------------------------------------- */ /* GALLERY PAGE STYLING */ h3.title_heading{ background: #333; font-weight:bold; border: 1px solid #555555; padding: 5px 3px; margin: 15px 0 0 0; } h3.title_heading span{ font-size: 12px; font-weight:normal; color: #eee; } h3.title_heading a{ font-size: 12px; } #gallery { width: 100%; } #gallery .images{ margin: 0 0 10px 0; overflow:hidden; padding:0; } #gallery .images li{ list-style-type: none; float: left; position:relative; padding:0 !important; margin:0; } #gallery .images li a{ overflow:hidden; border: 1px solid #888888; width: 120px; height: 120px; margin: 0 5px 5px 0; display:block; position:relative; } #gallery .images li a span{ width: 117px; height: 117px; display:block; position:absolute; bottom:-130px; left:0; z-index: 99; border-top: 1px solid #9aec26; background: #212121; text-align:center; padding: 5px 3px 0; } #gallery .images li a:hover{ border-color: #9aec26; text-decoration:none; } #gallery .images li a:hover span{ color:#CCCCCC; } /* PORTFOLIO STYLING */ #portfolio-item-details{ overflow: hidden; width: 100%; } .portfolio-item-image{ float: left; position:relative; text-indent: -9000px; width:380px; height:278px; } .portfolio-item-desc{ } /* --------------------------------------------------------------------------------------------------------------------------------- 6) BOX MODEL WITH NAVIGATION /* --------------------------------------------------------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------------------------------------------------- 8) ICONS /* --------------------------------------------------------------------------------------------------------------------------------- */ a.pdf { background: url("/assets/images/core/icons.gif") no-repeat left -265px; padding-left: 25px; line-height: 20px; } a.email { background: url("/assets/images/core/icons.gif") no-repeat left -286px; padding-left: 25px; line-height: 20px; } a.printer { background: url("/assets/images/core/icons.gif") no-repeat left -305px; padding-left: 25px; line-height: 20px; } /* --------------------------------------------------------------------------------------------------------------------------------- 9) ARTICLE STYLING /* --------------------------------------------------------------------------------------------------------------------------------- */ .post { margin-bottom: 15px; overflow:hidden; background: #1d1d1d; border: 1px dotted #333; border-top: 3px solid #333; padding: 15px 15px 10px; } .post h2 { margin-bottom: 5px; } /* .post h2 a { text-decoration: none; } .post h2 a:hover { text-decoration: underline; } */ .post h2 span { font-size: 0.7em !important; color: #999; } .post .summary { border: 1px dotted #333; border-width: 1px 0; padding: 5px 0; } .post .summary a { display: block; width:auto; } .post img { margin: 5px 10px 0 5px; padding: 2px; border: 1px solid #333333; } .post ul { margin: 0; padding:0 0 0 20px; } .rte_container { overflow:hidden; } .small_left { width: 33%; float:left; position:relative; } .big_right { width: 60%; float:left; position:relative; } /* --------------------------------------------------------------------------------------------------------------------------------- 9) SITEMAP /* --------------------------------------------------------------------------------------------------------------------------------- */ #sitemap .sitemap { width: 210px; margin-right: 15px; border: none; background: none; padding-bottom:0; } #sitemap .sitemap h2 { font-size: 1.7em; font-weight:normal; } #sitemap .sitemap li a { padding: 2px 0 3px 10px; background: url("/assets/images/core/icons.gif") no-repeat -5px 3px; } #sitemap .sitemap h2 a:hover { text-decoration: underline; } #sitemap .sitemap li { border: none; padding: 0 !important; } .box { margin-bottom: 15px; overflow:hidden; background: #1d1d1d; border: 1px dotted #333; border-top: 3px solid #333; padding: 15px 15px 10px; } .box .block_title { padding-bottom: 5px; } .box .block_title h2 { color: #000; margin:0 0 5px 0; padding:0 0 3px 0; color: #9BEC26; border-bottom: 1px dotted #666; } .hosted_by .block { text-align:center; background: #fff; padding: 10px 0 5px 0; } .box .block h3 { font-size: 1.4em !important; color: #999; margin: 0; } #right .box ul { list-style-type: none; padding:0; margin:0; } #right .box ul li a { background: url("/images/icons.gif") no-repeat -2px -131px; padding-left: 15px; color: #fff; } #right .box ul li a:hover { background-position: -2px -191px; } .box.twitter p { border-bottom: 1px dotted #666; paadding-bottom: 5px; margin-bottom: 7px; color: #999999; } .percentage_outer { border: 1px solid #333; padding: 2px; } .percentage { height: 10px; width: 100%; position:relative; text-indent:-9000px; } .percentage .percent { position: absolute; top:0; left:0; height: 10px; background: #555; display:block; width: 1%; text-indent:0; }