/********************************************************************************************** CSS on Sails Title:Website Author:XHTMLized Date:August 2008 ********************************************************************************************** 1. BASE 1.1 Reset 1.2 Default styles 1.3 Basic styles 2. LAYOUT 2.1 Header 2.2 Content 2.2.1 Main-Content 2.2.2 Secondary-content 2.3 Sidebar 2.4 Footer ***********************************************************************************************/ /* 1. BASE ----------------------------------------------------------------------------------------------- ===============================================================================================*/ /* 1.1 Reset -----------------------------------------------------------------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;} body {line-height:1;} ol, ul {list-style:none;} :focus {outline:0;} ins {text-decoration:none;} del {text-decoration:line-through;} table {border-collapse:collapse;border-spacing:0;} /* 1.2 Default styles -----------------------------------------------------------------------------------------------*/ body {font-size:62.5%;font-family:Verdana,Arial, Helvetica, sans-serif;text-align:center;} hr {display:none;} strong {font-weight:bold;} em {font-style:italic;} abbr, acronym {border-bottom:1px dotted #999;cursor:help;} input, textarea, select {font:1.2em Arial, Helvetica, sans-serif;} a {color:#0000ff;text-decoration:underline;} a:hover, a:active { color:#ff0000;text-decoration:none;} /* 1.3 Basic styles -----------------------------------------------------------------------------------------------*/ .hide {display:none;} .clear {clear:both;} br.clear {font-size:0;line-height:0;height:0;overflow:hidden;} .fleft {float:left;} .fright {float:right;} p.center {text-align:center;} p.right {text-align:right;} p.left {text-align:left;} .clearfix:after, #main:after, #footer ul:after {content:".";display:block;height:0;clear:both;visibility:hidden;} .clearfix, #main, #footer ul {display:inline-block;} /* Hides from IE-mac \*/ * html .clearfix, * html #main, * html #footer ul {height:1%;} .clearfix, #main, #footer ul {display:block;} /* 2. LAYOUT ----------------------------------------------------------------------------------------------- ===============================================================================================*/ body {text-align:center;} .page {width:100%;} .container {text-align:left;} #header {/*height:154px;*/padding-top:15px;} #main-outer {background:url(../images/bg_main-right.gif) right top repeat-y;} #main {padding:0 164px 0 158px;width:auto;text-align:left;background:url(../images/bg_main-left.gif) left top repeat-y;} #content {float:left;width:100%;position:relative;} #c1 {padding-left:15px;background:url(../images/bg_content-left.gif) left repeat-y;} #c2 {padding-right:15px;background:url(../images/bg_content-right.gif) right repeat-y;} #c3 {height:500px;background:url(../images/bg_content-top.gif) top repeat-x;padding-bottom:11px;} #sidebar-left {width:158px;float:left;position:relative;padding-bottom:11px;} #sidebar-right {padding-top:20px;width:164px;float:left;position:relative;padding-bottom:11px;} #sidebar-left {padding-top:20px;right:158px;margin-left:-100%;} #sidebar-right {margin-right:-100%;} * html #sidebar-left {right:auto;left:-158px;} *+html #sidebar-left {right:auto;left:-158px !important;} /* Main Backgrounds */ #header {background:url(../images/bg_header.gif) top repeat-x;} #footer {position:relative;z-index:2;margin-top:-11px;padding-top:11px;background:url(../images/bg_shadow_footer.png) top repeat-x;} #footer #f1 {background:url(../images/bg_footer.jpg) top center no-repeat #194766;} /* 2.1 Header -----------------------------------------------------------------------------------------------*/ #header .logo a {line-height:30px;font-size:16px;font-weight:bold;text-decoration:none;text-align:center;} #header .logo a, #header .logo span {cursor:pointer;overflow:hidden;display:block;width:117px;height:125px;} #header .logo { position:absolute;top:-5px;left:-5px;} #header .logo span {position:absolute;top:0;left:0;z-index:10;background:url(../images/logo.png) no-repeat;} #header .motto {position:absolute;top:24px;left:136px;width:377px;height:94px;text-align:center;font-size:20px;line-height:30px;color:#fff;font-weight:normal;letter-spacing:1px;} #header .motto span {position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background:url(../images/motto.jpg) no-repeat;} #header .imagery .image {position:absolute;top:-6px;left:541px;z-index:10;height:152px;width:294px;overflow:hidden;background:#fff;padding:4px;border:1px solid #c0c0c0;} #accessibility-links {position:absolute;left:-1000em;text-align:left;} #header #navigation {margin:0 164px 0 157px;height:43px;background:url(../images/bg_nav.gif) left no-repeat;} #header #navigation ul {background:url(../images/bg_nav-right.gif) right no-repeat;padding:18px 20px 0 20px;height:25px;} #header #navigation ul li {float:left;} #header #navigation ul a {float:left;padding:0 8px 2px 8px;height:23px;line-height:23px;font-size:1.2em;margin-right:12px;color:#006298;text-decoration:none;} #header #navigation ul a:hover {text-decoration:underline;background:#fff;} #header #navigation ul li.current_page_item a {background:#fff;cursor:default;font-weight:bold;text-decoration:underline !important;} #header .imagery {position:relative;text-align:left;margin:0 auto;height:151px;width:873px;background:url(../images/bg_header-top.jpg) top no-repeat #0a69aa;} #header .header_add { padding-top:40px;} /* 2.2 Content -----------------------------------------------------------------------------------------------*/ #content #c3 {padding-top:0;color:#224;} #content a {color:#0080e3;text-decoration:underline;} #content a:hover {text-decoration:none;} #content p.meta {font-size:1.3em;clear:both;margin:15px 15px 0 15px;padding:5px 10px 5px 10px;text-align:right;background:url(../images/bg_meta.gif) top repeat-x;} #content p.meta span {background:url(../images/sep.gif) left center no-repeat;padding:0 12px;} #content p.meta span.category {background:none;padding-left:0;} #content p.meta span.comments {padding-left:0;padding-right:0;} #content p.meta span.comments a {margin-left:15px;} #content p.meta span.edit {font-weight:bold;background:none;font-size:14px;} #content p.meta span.edit a {border-width:1px;border-style:solid;border-color:#999;padding:2px 5px;border-right-color:#ddd;border-left-color:#ddd;} #content p.meta a {padding-top:2px;padding-bottom:2px;} #content p.meta .category a {background-image:url(../images/ico_title.gif);padding-right:5px;} #content p.meta .comments a {background-image:url(../images/ico_comm.gif);padding-right:5px;} #content p.meta a {text-decoration:none;padding-left:20px;background-position:left center;background-repeat:no-repeat;} #content p.meta a:hover {text-decoration:underline;} #content .post {border-bottom:1px solid #c0c0c0;padding:6px 12px 6px 12px;} #content .pill-image {text-align:center;float:left;width:93px;height:115px;background:url(../images/bg_top10-pic.jpg) no-repeat;margin-bottom:-27px;position:relative;top:-37px;margin-right:14px;} #content .pill-image span {height:29px;line-height:29px;display:block;font-size:1.6em;font-weight:bold;color:#fff;} #content .pill-image img {display:block;margin:0 auto;} #content h1, #content h2, #content h3, #content h4 {font-weight:bold;letter-spacing:1px;} #content h1 {font-size:1.6em;} #content h2 {font-size:1.4em;} #content h3 {font-size:1.4em;} #content h4 {font-size:1.3em;} #content p {font-size:1.2em;margin-bottom:10px;line-height:1.3em;text-align:justify;} #content .storytitle {padding-top:6px;margin-bottom:15px;margin-left:106px;} #content .storytitle a {text-decoration:none;} #content .storytitle a:hover {text-decoration:underline;} /* Comments */ #content .comments h3 {font-size:1.6em;padding:15px 12px 20px 12px;} #content .comments ol {margin-bottom:5px;} #content .comments ol li {padding:8px 12px 8px 12px;border-top:1px solid #e4e4e4;} #content .comments ol li#comment-1 {border-top:none;} #content .comments p.author {text-align:right;color:#8c8c8c;margin:10px 0 0 0;} #content #post-a-comment {background:#fff url(../images/bg_form.gif) top repeat-x;border:1px solid #c0c0c0;margin:15px 5px 0 5px;padding:5px 12px;} /* Form */ form.extended {margin-bottom:15px;} form.extended li {padding-top:5px;clear:both;} form.extended label {float:left;width:180px;text-align:right;padding-right:10px;font-size:1.2em;line-height:25px;} form.extended input.text, form.extended textarea {border:1px solid #c0c0c0;} form.extended textarea {width:280px;padding:2px 3px;} form.extended input.text {width:280px;padding:2px 3px;font-size:14px;float:left;} form.extended em.req {color:#f00;font-style:normal;} form.extended fieldset.submit {padding-left:190px;padding-top:10px;} form.extended fieldset.submit input {font-size:1.4em;padding:3px 7px;} #content #post-a-comment h3 {font-size:1.6em;padding:15px 0 20px 0;} /* 2.2.2 Secondary Content Sidebar-right */ .sidebar a {color:#0080e3;text-decoration:none;} .sidebar a:hover {color:#16ae0b;text-decoration:underline;} #sidebar-right {} #sidebar-right .skyscraper {padding:9px;border:1px solid #c0c0c0;float:left;margin-bottom:20px;clear:both;} #sidebar-left .skyscraper {padding:9px;border:1px solid #c0c0c0;float:right;margin-bottom:20px;} #sidebar-right .banner {position:relative;left:-3px;float:left;clear:both;margin-bottom:20px;} #sidebar-left .banner {position:relative;right:-3px;float:right;clear:both;margin-bottom:20px;} .sidebar h3 {font-size:1.3em;font-weight:normal;margin-bottom:5px;} .sidebar ul li {margin-bottom:20px;padding-left:16px;} .sidebar ul li li {margin-bottom:0;font-size:1.2em;padding:2px 0 2px 0;} .sidebar ul .menu li a {padding-left:13px;background-position:0 0.3em;background-repeat:no-repeat;background-image:url(../images/ico_pills.gif);} .sidebar ul .menu li a:hover {background-image:url(../images/ico_pills_hov.gif);} #sidebar-left .box {clear:both;padding-left:0;position:relative;background-position:left top;background-repeat:repeat-y;background-image:url(../images/bg_lbox-l.gif);} #sidebar-left .box .top {position:absolute;top:0;right:-9px;width:9px;height:8px;background-position:top left;background-repeat:no-repeat;background-image:url(../images/bg_lbox-tr.gif);} #sidebar-left .box .bot {position:absolute;bottom:0;right:-9px;width:9px;height:8px;background-position:top left;background-repeat:no-repeat;background-image:url(../images/bg_lbox-br.gif);} #sidebar-left .box h3 {padding-left:16px;background-position:top left;background-repeat:no-repeat;padding-top:15px;background-image:url(../images/bg_lbox-tl.gif);} #sidebar-left .box ul {padding:0 0 15px 16px;background-image:url(../images/bg_lbox-bl.gif);background-repeat:no-repeat;background-position:bottom left;} #sidebar-right .box {clear:both;padding-left:0;position:relative;background-position:right top;background-repeat:repeat-y;background-image:url(../images/bg_rbox-r.gif);} #sidebar-right .box .top {position:absolute;top:0;left:-9px;width:9px;height:8px;background-position:top left;background-repeat:no-repeat;background-image:url(../images/bg_rbox-tl.gif);} #sidebar-right .box .bot {position:absolute;bottom:0;left:-9px;width:9px;height:8px;background-position:top left;background-repeat:no-repeat;background-image:url(../images/bg_rbox-bl.gif);} #sidebar-right .box h3 {background-position:top right;background-repeat:no-repeat;padding-top:15px;background-image:url(../images/bg_rbox-tr.gif);} #sidebar-right .box ul {padding:0 0 15px 0;background-image:url(../images/bg_rbox-br.gif);background-repeat:no-repeat;background-position:bottom right;} #sidebar-right #top10 {background:url(../images/bg_top10.jpg) 0 15px no-repeat;} #sidebar-right #top10 h3 {font-size:1.4em;text-align:center;padding-right:16px;font-weight:bold;line-height:1.3em;margin-bottom:15px;} #sidebar-right #top10 ul {padding-bottom:25px;} #sidebar-right #top10 span.nb {float:left;width:20px;padding-right:4px;text-align:right;font-size:11px;padding-top:1px;font-weight:bold;} #sidebar-right #top10 a {color:#0080e3;letter-spacing:1px;} #sidebar-right #top10 .arrowtip {position:absolute;top:15px;left:-8px;width:8px;height:43px;background:url(../images/bg_top10-tl.gif) no-repeat;} /* 2.4 Footer -----------------------------------------------------------------------------------------------*/ #footer {color:#fff;} #footer #f1 {padding:15px 0 10px 0;} #footer a {color:#fff;text-decoration:none;} #footer a:hover {text-decoration:underline;} #footer .container {margin:0 204px 0 197px;} #footer h2 {margin-left:2%;font-size:1.4em;margin-bottom:5px;} #footer ul li li {font-size:1.2em;line-height:1.1em;padding:0.2em 0 0.2em 0;width:46%;margin-right:2%;margin-left:2%;float:left;} #footer ul {padding-bottom:15px;} #footer p {font-size:1.2em;line-height:1.5em;} #footer p.copyright {clear:both;padding-top:10px;text-align:center;color:#fff;background:url(../images/bg_foot_line.gif) top center no-repeat;}