*{margin:0; padding:0;}

htm, html, body{height:100%;}

body{background-color: #0d121a; font-family: Arial, sans-serif; font-size: 12px;}

a{outline:none; text-decoration:none;}

a:hover{text-decoration:underline;}

a img{border:0;}

p{}

#wrapper-center{width: 885px; margin: 0 auto;}

#wrapper{background: #333f78 url(img/bg_sub.gif) repeat-x top center; float: left; width: 100%;}
body.home #wrapper{background-image: url(img/bg_home.gif);}

/*---------------------------- Header ----------------------------------------------------------*/

#header{float:left; height: 231px; background-repeat: no-repeat; background-position: 0px 70px;}
body.who-we-are #header {}
body.what-we-do #header {background-image: url(img/header_whatwedo.gif);}
body.links-and-resources #header {background-image: url(img/header_linksandresources.gif);}
body.community #header {background-image: url(img/header_community.gif);}
body.contact #header {background-image: url(img/header_contact.gif);}
body.home #header {background-image: url(img/header_home.gif); height: 257px; background-position: 100px 72px;}
#tour {display: block; width: 138px; height: 83px; float: right; margin-top: 20px; text-indent: -9999px; outline: none;}

/*---------------------------- Headings ----------------------------------------------------------*/
h1 {color:#c5a75d; font-size: 22px; font-weight: normal;}
h1 span {color: #76879d;}
h1.sjs-logo {float: left; width:241px; height:231px;}
h1.sjs-logo a{display:block; float:left; text-indent:-9999px; width:241px; height:231px; background: url(img/logo_sjs.png) no-repeat;} /* Set up for image replacement */

h2 {color: #ebb671; text-transform: uppercase; font-size: 22px; margin: 0 0 20px 0;}
h3{ font-size: 16px; margin: 0; color: #61b5da;}
h4{font-size: 14px; line-height: 18px; margin: 0 0 10px 0;}


/*---------------------------- Top & Main Nav ----------------------------------------------------------*/

ul#top-nav{float:left; width: 510px; list-style: none; margin: 10px 0; text-align: right;}
ul#top-nav.loggedin{width: 335px;}
ul#top-nav li{float:right; margin: 0 10px; font-size: 11px;}
ul#top-nav li.first {margin-right: 20px;}
ul#top-nav li a{color: #c4c8d3;}
ul#top-nav li a:hover{color: #fff;}

ul.loggedin-nav{float:left; width: 300px; list-style: none; margin: 0; text-align: right;}
ul.loggedin-nav li{float:right; margin: 0 5px; font-size: 11px;}
ul.loggedin-nav li.first {margin-right: 20px;}
ul.loggedin-nav li a{color: #c4c8d3;}
ul.loggedin-nav li a:hover{color: #fff;}

#main-nav {width: 604px; float: left; list-style:none; z-index:200; padding:0; margin:9px 0 0 10px;}
#main-nav ul {list-style: none; padding: 0; margin: 0;}
#main-nav table {border-collapse:collapse;}
#main-nav li {float:left; padding:0px;}
#main-nav li li {float:none;}
/* a hack for IE5.x and IE6 */
#main-nav li a li {float:left;}

#main-nav li a {display:block; float:left; color:#c5a75d; text-transform:uppercase; font-weight:bold;padding:5px 5px;margin:0 5px;text-decoration:none; white-space:nowrap;}
#main-nav li li a {height:14px; line-height:14px; float:none; text-transform: none; color: #fff; font-weight: normal;}

#main-nav li a.active{border-bottom:2px solid #872e00; color:#a5bbcb; background:url(img/main_nav_active.gif) bottom repeat-x; } /* for active state*/

#main-nav li:hover {position:relative; z-index:300;}
#main-nav a:hover {position:relative; z-index:300; color:#a5bbcb; text-decoration:none;}

#main-nav :hover ul {left:0; top:24px;}
/* another hack for IE5.5 and IE6 */
#main-nav a:hover ul {left:-10px;}

#main-nav ul {position:absolute; left:-9999px; top:-9999px; border-top: 2px solid #7b330b; background: #2c2e3f; margin-left: 5px; }

/* it could have been this simple if all browsers understood */
/* show next level */
#main-nav li:hover li:hover > ul {left:-15px; margin-left:100%; top:-1px;}
/* keep further levels hidden */
#main-nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;}
/* show path followed */
#main-nav li:hover > a {color:#a5bbcb; text-decoration:none;}

/* but IE5.x and IE6 need this lot to style the flyouts*/
/* show next level */
#main-nav a:hover a:hover ul,
#main-nav a:hover a:hover a:hover ul,
#main-nav a:hover a:hover a:hover a:hover ul,
#main-nav a:hover a:hover a:hover a:hover a:hover ul
{left:100%; top:-1px;}

/* keep further levels hidden */
#main-nav a:hover ul ul,
#main-nav a:hover a:hover ul ul,
#main-nav a:hover a:hover a:hover ul ul,
#main-nav a:hover a:hover a:hover a:hover ul ul
{position:absolute; left:-9999px; top:-9999px;}

/* Class below is responsible for rounding in nonIE browser, if you want css to validate, remove line below --------- */	
	.rounded						{-moz-border-radius: 5px; /* Firefox */ -webkit-border-radius: 5px; /* Safari */}
/*---------------------------------------------------------------------------------------*/


.pagination{margin-top:0px;}
.pagination a, .pagination span{background: #fff;padding:5px;margin:2px;border:1px solid #d9d9d9;text-decoration:none;}


/*---------------------------- Content ----------------------------------------------------------*/
#content-inner h1{float:left; margin-top: -70px; color: #fff; text-transform:uppercase; font-weight:bold; font-size: 40px; }

#main-content{float:left;}
#content-inner{float:left; width: 610px; color: #fff; padding-bottom: 50px; margin-top: -20px; }
#content-inner p{margin-bottom:10px;line-height: 18px;}
#content-inner ul, #content-inner ol{margin:0 0 10px 15px;}
#content-inner a{text-decoration:underline; color: #cacaca;}
#content-inner a:hover{color:#c5a75d; }

#mapDiv{color: Black;}
#mapDiv a{text-decoration:underline; color: #62251c;}

/*----------------------------- BLOG  --------- */

#blog							    {width:960px;}
#head							    {}
#head h2						    {padding:10px;margin:0px;}
#posts							    {width:600px;padding:0px;padding-right:0px;padding-top:0px;}
 .post_content					
 {
    width:599px;
   
 }
 .post_blurb		
 {
        padding:20px 10px 20px 15px;
        background-color:White;
        color:Black;
        background-image:url(../Images/Blog/Content.png);
        background-color:white;
        background-repeat:no-repeat;
        background-position:top left;
 }
 #posts a
 {
        color:inherit;
        color:dimgray;
 }
 .post_blurb p:first-child:first-letter
 {
     font-size:72px;
     font-family:Times New Roman;     
     float:left;    
     margin-top:5px;
     margin-right:2px;
 }
 .post_content h2			
 {
        padding-left:15px;
        font-size:15px;
        font-family:Calibri;
        padding-top:7px;
        text-decoration:none;
        height:24px;
        background-image:url(../Images/Blog/Header.png);
        background-color:Transparent;
        background-repeat:no-repeat;
        background-position:-1px top;
        color:White;
        margin-bottom:0px;
        margin-top:19px;
        width:599px;
        text-align:left;
        text-transform: capitalize;
 }
 .BlogTitle			                {text-decoration:none;color:black;text-transform: capitalize;} 
  #posts.BlogTitle:hover              {text-decoration:underline;}  
	.post						    {padding-bottom:21px;width:601px;}
		.post_meta				{padding:2px 5px;border:1px solid #ddd;color:#a1a1a1;margin:5px 0px;}
		.post_meta a.categorylink	{background:#fff;text-decoration:none;}
		.post_meta a			{text-decoration:none;color:#323232;}
.post_date 						{margin-top:40px;background:url(img/datebg.jpg) no-repeat;width:49px;height:54px;padding-top:8px;color:#868686;line-height:16px; margin-left:500px;}		
.post_date .day				{font-family: Georgia, "Times New Roman", Times, serif;font-size:28px;text-align:center}
.post_date .month			{font-family: Georgia, "Times New Roman", Times, serif;font-size:12px;text-align:center}
.post_date .hour				{font-family: Georgia, "Times New Roman", Times, serif;font-size:14px;text-align:center;margin-top:-5px;}
.post_footer     
{
        font-size:11px;
        height:33px;
        background-image:url(../Images/Blog/Footer.png);
        background-color:Transparent;
        background-repeat:no-repeat;
        background-position:top left;
        color:Black;
        text-align:right;
        padding-right:10px;
        padding-top:5px;
 }


/* BLOG  END ------*/

/*---------------------------- Sidebar ----------------------------------------------------------*/

#sidebar{float: left; width: 230px; margin-right: 20px; background: url(img/bg_sidebar_repeat.gif) repeat-y;}
#sidebar-wrapper { background: url(img/bg_sidebar_bottom.gif) no-repeat bottom; min-height: 300px;}
#sidebar-top {background: url(img/bg_sidebar_top.gif) no-repeat top; padding: 20px 15px; color: #62251c;}
#sidebar-content {padding: 0 20px 30px 15px;}
#sidebar-content h4 {margin: 0;}
#sidebar-content p{margin-bottom:10px;}

/*---------------------------- Footer ----------------------------------------------------------*/

#footer{clear: left; background: url(img/bg_footer.gif) repeat-x top; width: 100%; color: #fff; padding-bottom: 30px;}
#footer-wrapper {margin: 0 auto; width: 885px; padding: 20px 0;}
#footer-logo {float: left; padding: 15px; margin-right: 15px; border-right: 1px solid #3d4148; }
#footer-content {float: left; width: 570px; padding-right: 25px; margin-right: 25px; border-right: 1px solid #3d4148;}
#footer a{color: #fff; font-weight: bold;}
#footer a:hover{color: #b39e69;}
#footer ul {margin: 10px 0; padding: 0; list-style: none; width: 570px; float: left;}
#footer ul li {float: left; margin-right: 10px; padding-right: 10px; background: url(img/bg_footer_nav.gif) no-repeat right;}
#footer ul li.last {margin: 0; padding: 0; background: none;}
#footer ul li a{text-transform: uppercase; font-weight: normal;}
#footer address{font-style: normal; margin: 10px 0;}
#footer address strong {text-transform: uppercase;}
#footer p.copyright{ line-height: 14px; margin: 0;}

/*---------------------------- Home ----------------------------------------------------------*/

#slideshow_area{float:left; height:339px; width:572px;}

#flash_slideshow {width: 542px; height: 329px; float: left; margin: 0 10px 10px 20px; position: relative;}
#flash_slideshow img {margin: 9px 0 0 10px;}
#flash_slideshow_border {background: url(img/bg_homepage_slideshow.gif) no-repeat; width: 542px; height: 329px; position: absolute; margin-left: 20px; z-index: 500;}
#featured_services {float: left; width: 310px;}
#featured_services h2 {margin:0;} /* Change on 11/24/09 by TNT */
#featured_services h1 {width: 180px; float: left;}
#featured_services ul {list-style: none; padding: 0 0 10px 0;}
#featured_services ul li {clear: left; padding-top: 15px;}
#featured_services ul li a {color: #fff; line-height: 16px; display: block; }
#featured_services ul li a img {margin-right: 10px;}#featured_services ul li a strong {color: #61b5da; text-transform: uppercase; font-size: 14px; line-height: 18px;}
#featured_services ul li a:hover {text-decoration: none; color:#ecd173 }
.box-wrapper {float: left; width: 265px; background: url(img/bg_box_home_middle.gif) repeat-y; margin: 0 -5px 0 20px;}/* Change on 12/3/09 by TNT */
.box-wrapper h3 {background: url(img/bg_box_home_top.gif) no-repeat;color: #62251c; padding: 5px 15px 0 10px; float: left; width: 240px;}
.box-wrapper span {float: left;}
.box-wrapper #rss {float: right;}
.box-content {padding: 10px 15px 20px 10px; clear: left;background: url(img/bg_box_home_bottom.gif) no-repeat bottom; left}/* Change on 12/3/09 by TNT */
.box-content p {margin: 0 0 10px 0;}
.box-content ul {list-style: none; margin: 10px 0 0 0; padding-bottom: 10px;}
.box-content li {float:left; margin-right: 15px;}
.box-content li.last {margin-right: 0px;}
#box-man {background: url(img/bg_box_man.gif) no-repeat; width: 115px; height: 138px; position: absolute; margin-left: 143px; margin-top: 5px;}
#box-content-02 {padding-right: 120px; line-height: 18px;}/* Change on 12/3/09 by TNT */
#philosophy {margin-left: 15px; float: left; width: 310px; }
#philosophy p {color: #fff; line-height: 18px; margin: 10px 0;}
#philosophy a {text-transform: uppercase; color: #fff; font-weight: bold; font-size: 11px;}
/*---------------------------- Common Classes ----------------------------------------------------------*/

.last a{border-right:0 !important; }

.float-right{float:right;}
img.float-right {margin: 0 0 10px 20px;}
.float-left{float:left;}
.clear-right{clear:right;}
.clear-left{clear:left;}
.clear-both{clear:both;}

.border{border: 1px solid #000;}
.hr {border-bottom: 1px solid #63708e; height: 1px; margin-bottom: 10px;}
.hr hr {display: none}
#content-inner .hr {border-bottom-color: #475185;}
.special, .special4, .special4:visited {font-weight: bold; text-transform: uppercase; font-size: 11px; color: #8c1517;}

/* HPC styles */
.PageTitle {font-size: 21px; line-height: 22px; margin-bottom:0.25em; color: #9f791f; font-weight: bold; text-transform: uppercase;}

.ItemRow
{   
    height:22px;
}

.ItemAltRow
{     
    height:22px;
}

.ItemGrid TD {
	BORDER-BOTTOM: none;
	border-top:  #ffffff 1px solid;
	border-left: none;
	border-right: none;	
}

.ItemGrid TH {
	BORDER-BOTTOM:  none;
	border-top:  none;
	border-left: none;
	border-right: none;	
	white-space: nowrap;
}

.ItemHeaderTR 
{
    
	FONT-WEIGHT: bold; 
	FONT-SIZE: 11px; 
	COLOR: #000000; 		
	TEXT-DECORATION: none;  
	height: 0px;
}

.GridRow
{   
    height:22px;
    text-align:left;
    vertical-align:top;
}

.GridAltRow
{     
    height:22px;
    background-color: #f6f6f6; 
    text-align:left;
    vertical-align:top;
}

.dataGrid TD {
	BORDER-BOTTOM: #d9d9d9 1px solid;
	border-top: #d9d9d9 1px solid;
	border-left: #d9d9d9 1px solid;
	border-right: #d9d9d9 1px solid;
}

.dataGrid TH {
	BORDER-BOTTOM: #d9d9d9 1px solid;
	border-top: #d9d9d9 1px solid;
	border-left: #d9d9d9 1px solid;
	border-right: #d9d9d9 1px solid;
	white-space: nowrap;
	text-align:left;
	vertical-align:top;
}

.GridHeaderTR 
{
	FONT-WEIGHT: bold; 
	FONT-SIZE: 11px; 
	COLOR: #000000; 		
	TEXT-DECORATION: none;  
	height: 22px;
	BACKGROUND: url(img/lightCellHeader.gif);
	text-align:left;
	vertical-align:top;
}

.GridHeaderTR a {
	FONT-WEIGHT: bold; 
	FONT-SIZE: 11px; 
	COLOR: #000000; 
	FONT-FAMILY: arial, san-serif;
	cursor: hand;
}

.GridHeaderTR a:link {
	FONT-WEIGHT: bold; 
	FONT-SIZE: 11px; 
	COLOR: #000000; 
	FONT-FAMILY: arial, san-serif;
	cursor: hand;
}

.GridHeaderTR a:visited {
	FONT-WEIGHT: bold; 
	FONT-SIZE: 11px; 
	COLOR: #000000; 
	FONT-FAMILY: arial, san-serif;
	cursor: hand;
}

.GridHeaderTR a:hover {
	FONT-WEIGHT: bold; 
	FONT-SIZE: 11px; 
	COLOR: #000000; 
	FONT-FAMILY: arial, san-serif;
	cursor: hand;
}

#content table.tb_grid {
  
  width: 100%;
}
#tabs ul{ margin: 0;}

.mapbubble
{
 font-family: Arial, sans-serif; 
 font-size: 12px;   
}