/* 
***************************************************************************
***** 
***** dark blue - #0d3f6a
***** light blue - #e7ebf5
***** green - #2dac0e
***** light green - #36b712
***** brown - #a83823
*****
***************************************************************************
*/

* {padding: 0; margin: 0;}

img {border: 0; border-style: none;}

.clear {clear: both;}



h1 {font: 20px helvetica, arial, sans-serif; color: #0d3f6a; padding-bottom: 10px;}
h2 {font: 20px helvetica, arial, sans-serif; color: #2dac0e; padding: 10px 0 5px 0;}
h3 {font: 20px helvetica, arial, sans-serif; color: #2dac0e; padding-top: 10px;}
h4 {font: 20px helvetica, arial, sans-serif; color: #a83823; padding: 20px 0 10px 0;}
h5 {font: 14px helvetica, arial, sans-serif; color: #a83823; font-weight: bold;}
h6 {font: 14px helvetica, arial, sans-serif; color: #0d3f6a; padding: 10px 0 5px 0; font-weight: bold;}

body {padding: 0; margin: 0; font: 16px helvetica, arial, sans-serif; color: #0d3f6a; background: #0d3f6a url('images/bg.gif') repeat-x top;}

#wrapper {margin: 0; padding: 0;}

#shadow {margin: 0 auto; padding: 0; width: 856px; background: url('images/shadow.png') repeat-y top;}

#maincontent {margin: 0 auto; padding: 0; width: 822px; background: #ffffff;}

#header {margin: 0; padding: 0;}

#navigation {width: 530px; xwidth: 100%; margin-top: -2px;}
.navigation {width: 530px; xwidth: 100%; margin-top: -2px;}

#left {float: left; width: 374px; margin: 0; padding: 20px;}
#left p {padding: 10px 0;}
#left p.center {padding: 20px 0; text-align: center;}
#left p.nopad {padding: 0;}
#left ul {padding: 10px 20px; list-style: disc outside; font-weight: bold;}
#left ul.list {padding: 10px; list-style: none outside;}
#left a {color: #a83823; text-decoration: none; font-weight: bold;}
#left a:hover {color: #2dac0e; text-decoration: underline;}
#left a.big {font: 20px helvetica, arial, sans-serif; color: #0d3f6a; border-bottom: 1px dashed #0d3f6a; text-decoration: none;}
#left a.big:hover {border-bottom: 1px solid #0d3f6a; color: #0d3f6a; text-decoration: none;}

#left a.mid {font: 18px helvetica, arial, sans-serif; color: #0d3f6a; border-bottom: 1px dashed #0d3f6a; text-decoration: none; line-height: 28px;}
#left a.mid:hover, a.mid:visited {color: #2dac0e; border-bottom: 1px solid #2dac0e; text-decoration: none;}

#links ul {list-style-type: none; width: 165px; margin: 0; padding: 0 10px 20px 10px;}
#links a {font: 16px helvetica, arial, sans-serif; color: #a83823; text-decoration: underline;}
#links a:hover {color: #2dac0e;}

.contact {margin: 0; padding: 20px; background: url('images/contact-bg.gif') no-repeat right center;}
.contact a {color: #a83823; text-decoration: none; font-weight: bold;}
.contact a:hover {color: #2dac0e; text-decoration: underline;}

.leftside {float: left;}
.rightside {float: right;}
.leftcontact {float: left; width: 195px;}

#right {float: right; text-align: right; width: 366px; padding: 20px 20px 20px 18px;}
#right p {padding-bottom: 10px;}
#right h1 {text-align: left; font: 20px helvetica, arial, sans-serif; color: #0d3f6a; padding: 0 0 10px 40px;}

#right .table {text-align: left; width: 326px; float: right;}
#right .tableleft {float: left; width: 50px; vertical-align: top;}
#right .tableright {float: right; width: 276px; vertical-align: top;}

#right .profileleft {float: left; padding-bottom: 10px;}
#right .profileright {float: right; padding-bottom: 10px;}

#whole {width: 778px; margin: 0; padding: 20px;}
#whole p {padding: 10px 0;}
#whole ul {padding: 10px 20px; list-style: disc outside;}
#whole a {color: #a83823; text-decoration: none; font-weight: bold;}
#whole a:hover {color: #2dac0e; text-decoration: underline;}

#arrow {background: url('images/arrow.gif') no-repeat bottom center; height: 230px; padding-bottom: 30px;}
#arrow p {padding: 10px 10px 10px 30px;}
#arrow p.bold {padding: 10px 10px 10px 30px; font-weight: bold;}

.blue-top {background: url('images/blue-top.gif') no-repeat top; padding-top: 16px;}
.blue-text {background: #e7ebf5; padding: 0 10px;}
.blue-text p {padding: 10px 0;}
.blue-bottom {background: url('images/blue-bottom.gif') no-repeat bottom; padding-bottom: 16px;}

.brown-top {background: url('images/brown-top.gif') no-repeat top; padding-top: 12px;  margin-left: 40px;}
.brown-text {background: #a83823; width: 306px; font: 14px helvetica, arial, sans-serif; color: #ffffff; padding: 0 10px; text-align: left;}
.brown-text p {padding: 5px 0; font-weight: bold;}
.brown-text ul {padding: 5px 20px; list-style: disc outside;}
.brown-bottom {background: url('images/brown-bottom.gif') no-repeat bottom; padding-bottom: 12px;}

#content-base {margin: 0 auto; padding: 25px 0 35px 0; width: 856px; background: url('images/footer.png') no-repeat; font: 12px helvetica, arial, sans-serif; color: #ffffff; text-align: center;}
#content-base a {font: 12px helvetica, arial, sans-serif; color: #ffffff; text-decoration: none;}
#content-base a:hover {border-bottom: 1px solid #ffffff;}

#footer {margin: 0 auto; padding-bottom: 30px; width: 856px; text-align: center; font: 12px helvetica, arial, sans-serif; color: #ffffff;}
#footer p {padding: 2px;}
#footer a {font: 12px helvetica, arial, sans-serif; color: #ffffff; text-decoration: none;}
#footer a:hover {border-bottom: 1px solid #ffffff;}


/* 
***************************************************************************
***** 
***** Blog Stuff
*****
***************************************************************************
*/

.post {width: 500px; margin: 0; padding: 0; float: left;}

#sidebar {width: 200px; margin-top: 0px; padding: 0 10px; float: right; border-left: 1px solid #0d3f6a;}

#sidebar ul {list-style-type: none; margin: 0; padding: 0;}

#sidebar ul ul {list-style-type: none; margin: 0; padding-bottom: 10px;}
#sidebar a {color: #a83823; text-decoration: none;}
#sidebar a:hover {color: #2dac0e; text-decoration: underline;}

#sidebar ul ul li:before {content: "\00BB \0020";}

.commentlist li {margin-top: 10px; padding: 10px; background: #ebebeb; list-style-type: none;}

#searchform input:focus, #searchform input.sffocus, #searchform input:hover {border: 2px solid #2dac0e;}

#searchform input {padding: 5px; width: 110px; font: 14px arial, helvetica, sans-serif; margin: 0px 0px 10px 0px; border: 2px solid #ccc; background: #ffffff !important;}

#searchform input.searchsubmit {width: 70px; color: #ffffff; cursor: pointer; border: 2px solid #36b712; background: #36b712 !important; font-weight: bold;}

#searchform input.searchsubmit:hover {background: #2dac0e !important; border: 2px solid #2dac0e;}



/* 
***************************************************************************
***** 
***** BLOG FORM
***** A Nice Simple Contact Form
***** Credits: CSS Tricks
***** URL: http://css-tricks.com
*****
***************************************************************************
*/

#blog-form {width: 470px; border: 0;}

#blog-form input {padding: 5px; width: 280px; font: 14px arial, helvetica, sans-serif; margin: 0px 0px 10px 0px; border: 2px solid #ccc; background: #ffffff !important;}

#blog-form textarea {padding: 5px; width: 280px; height: 90px; font: 14px arial, helvetica, sans-serif; margin: 0px 0px 10px 0px; border: 2px solid #ccc; background: #ffffff !important;}

#blog-form textarea:focus, #blog-form input:focus, #blog-form input.sffocus, #blog-form select:focus, #blog-form textarea:hover, #blog-form input:hover, #blog-form select.sffocus, #blog-form select:hover {border: 2px solid #2dac0e;}

#blog-form input.submit-button {width: 140px; color: #ffffff; cursor: pointer; border: 2px solid #36b712; background: #36b712 !important; font-weight: bold;}

#blog-form input.submit-button:hover {background: #2dac0e !important; border: 2px solid #2dac0e;}

label {float: left; text-align: right; margin-right: 5px; width: 130px; padding-top: 5px; font: 12px arial, helvetica, sans-serif;}


/* 
***************************************************************************
***** 
***** Menu Credits: 
***** This copyright notice must be untouched at all times.
***** 
***** The original version of this stylesheet and the associated (x)html
***** is available at http://www.cssplay.co.uk/menus/final_drop.html
***** Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
***** This stylesheet and the associated (x)html may be modified in any 
***** way to fit your requirements.
*****
***************************************************************************
*/

.menu {margin: 0 auto; width: 822px; height: 27px; font-size: 12px; position: relative; z-index: 100; background: url('images/menu-bg.gif') repeat-x; border: 0; }

/* hack to correct IE5.5 faulty box model */
* html .menu {width: 823px; w\idth: 822px;}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {padding: 0; margin: 0; list-style-type: none;}
.menu ul ul {width: 150px;}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {float: left; width: 67px; position: relative; text-align: center; background: url('images/menu-bg.gif') repeat-x;}

/* style the links for the top level */
.menu a, .menu a:visited {display: block; font-size: 12px; text-decoration: none; color: #ffffff; width: 63px; height: 27px; padding: 0 2px; line-height: 27px;}

/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {width: 63px; w\idth: 63px;}

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background: #d2de2d; text-decoration: none;}

/* style the second level hover */
.menu ul ul a.drop:hover {background: #d2de2d;}
.menu ul ul :hover > a.drop {background: #d2de2d;}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {visibility: hidden; position: absolute; height: 0; top: 27px; left: 0; width: 100px; border-top: 0;}

/* another hack for IE5.5 */
* html .menu ul ul {top: 27px; t\op: 27px;}

/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {position: absolute; top: 0; left: 0; border-collapse: collapse;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {background: url('images/menu-bg.gif') repeat-x; color: #ffffff; height: 27px; padding: 0 0 0 10px; line-height: 27px; width: 150px; text-decoration: none; text-align: left;}
/* yet another hack for IE5.5 */
* html .menu ul ul a, * html .menu ul ul a:visited {width: 150px; w\idth: 150px;}

/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{color: #36b712; background: url('images/menu-bg.gif') repeat-x; text-decoration: none;}
.menu :hover > a, .menu ul ul :hover > a {color: #36b712; text-decoration: none;}

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible; }

/* Extra long menu items */
.menu li.long {float: left; width: 140px; position: relative; text-align: center; background: url('images/menu-bg.gif') repeat-x;}

/* Extra long menu items - style the links for the top level */
.menu a.long, .menu a.long:visited {display: block; font-size: 12px; text-decoration: none; color: #ffffff; width: 140px; height: 27px; padding: 0px; line-height: 27px;}

/* Extra long menu items - a hack so that IE5.5 faulty box model is corrected */
* html .menu a.long, * html .menu a.long:visited {width: 140px; w\idth: 140px;}

/* Extra long menu items - style the top level hover */
.menu a.long:hover, .menu ul ul a.long:hover{color: #36b612; text-decoration: none;}
.menu :hover > a.long, .menu ul ul :hover > a.long {color: #36b612; text-decoration: none;}