/*
Styles for Specspi Site
*/

/* ===== global styles ===== */
body {
	font: Arial, Helvetica, sans-serif;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	border: 0;
	color: #eee;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	background-color: #000;
	background-image: url(images/base/bg2.jpg);
	background-repeat: repeat-x;
	background-position: left top;
}

div#wrapper {
	width: 970px;  /* for 1024 x 768 screen sizes */
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
}

ul, ol {
	margin:0;
	padding:0;
}

/* ===== header ===== */
div#branding {
	height: 140px;
	width: 970px;
	margin: 19px 0 0 0;
	padding: 0;
	position: relative;
}

div#logo {
	position: absolute;
    top: 0;
    left: 0;
	width: 250px;  /* for background image */
	height: 107px;
	background: transparent url(images/base/logo_bg.jpg) no-repeat left top;
}

div#logo h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-indent: -5000px;
}

/* ===== nav 1 ===== */
div#nav1 {
	position: absolute;
    top: 0;
    left: 710px;
	width: 250px;
	height: 23px;
	background: url(images/navs/nav1_bg2.png) no-repeat center top;
}

div#nav1 ul {               /* turn off all the normal list behavior */
    list-style: none;
    margin: 0;
    padding: 0;
}

div#nav1 li {               /* turn off the normal list item behavior */
    float: left;
	margin: 0;
    padding: 0;
}

div#nav1 li a:link, div#nav1 li a:visited {
	width: 70px;
    height: 15px;
    font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #666;
	text-decoration: none;
	text-align: center;
	padding-top: 3px;     /* make room for the image */
    margin-left: 10px;
	display: block;
	border: none;   /* don't display a border */
}

div#nav1 li a:hover, div#nav1 li a:active {
   	color: #ccc;
}

div#nav1 li a.first {
	margin-left: 10px;
}

div#nav1 li a.last {
	margin-right: 0;
}

/* ===== nav 2 ===== */

div#nav2 {
	position: absolute;
    top: 48px;
    right: 10px;
	width: 490px;
	height: 58px;
}

div#nav2 ul {               /* turn off all the normal list behavior */
    list-style: none;
    margin: 0;
    padding: 0;
}

div#nav2 li {               /* turn off the normal list item behavior */
    float: left;
	margin: 0;
    padding: 0;
}

div#nav2 li a:link, div#nav2 li a:visited {
	width: 70px;
    height: 15px;
    font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #666;
	text-decoration: none;
	text-align: center;
	padding-top: 22px;     /* make room for the image */
    margin-left: 10px;
	display: block;
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #333;
}

div#nav2 li a:hover, div#nav2 li a:active {
   	color: #ccc;
	font-weight: strong;
	height: 56px;
	width: 70px;
	display: block;
	background-image: url(images/navs/nav_sprite_bg.png);
	background-position: 0px 0px;
	background-repeat: no-repeat;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #F91A00;
}
div#nav2 li a.current {
   	color: #eee;
	font-weight: strong;
	height: 56px;
	width: 70px;
	display: block;
	background-image: url(images/navs/nav_sprite_bg.png);
	background-position: 0px 0px;
	background-repeat: no-repeat;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #F91A00;
}

/* ===== direct link ===== */

div#divider {
	position: absolute;
    top: 108px;
    left: 0px;
	width: 970px;
	height: 33px;
	margin: 0;
	padding: 0;
	background-image: url(images/base/clearbar_33v2.png);
	background-repeat: no-repeat;
	background-position: left top;
}

#direct_link {
	width: 250px;  /* for background image */
	height: 26px;
	float: right;
	margin: 5px 0 0 0;
	padding: 0;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #333;
}

#direct_link p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #cc3300;
	float: left;
	margin: 5px 15px 0 10px;
	padding: 0;
}

#search  fieldset {
	border-style: none;
	border-width: 0;
	margin: 0;
	padding: 0;
}

#search .input {
	float      : left;
	background : transparent url(images/navs/search_bg.png) no-repeat top left;
	width      : 105px;
	height     : 22px;
	padding    : 7px 3px 0 5px;
	margin     : 0;
	color      : #767268;
	font       : 10px Arial, Helvetica, sans-serif;
	border-style: none;
	border-width: 0;

}

#search  .button {
	float: left;
	background : transparent url(images/navs/lookup_button.png) no-repeat top left;
	border: 0;
	width: 22px;
	height: 22px;
	margin: 0;
	padding: 0;
	text-indent: -1000px;
}
#search  .button:hover {
	background-position: 0 -22px;
	cursor: pointer;
}

#content {
	width: 950px;
	margin: 0 0 0 10px;
	padding: 0;
}

/* ===== main content ===== */

#content div#mainContent {
    float: left;
    width: 680px;
    margin: 10px 0 0 0;
    padding: 0 10px;
}

#mainContent h1 {
    font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
    font-weight: bold;
    color: #ccc;
    margin: 10px 0 5px 0;
}

#mainContent h3 {
    font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
    font-weight: bold;
    color: #cc3300;
    margin: 10px 0 10px 0;
}

#mainContent h2 {
    font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
    font-weight: bold;
    color: #999;
    margin: 10px 0 5px 0;
}

#mainContent h4 {
    font-size: 1.1em;
    font-weight: bold;
    color: #999;
    margin: 1ex 0 -.2ex 0;
}

#mainContent p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    line-height: 1.4em;
    color: #999;
    margin: 10px 0 5px 0;
}

#mainContent div#goto {
	height:40px;
	width: 330px;
	margin: 12px 0 12px 12px;
	padding: 10px 0 7px 15px;
	background-image: url(images/base/button_link.png);
	background-repeat: no-repeat;
	background-position: left top;
}

#mainContent div#goto a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: bold;
	color: #666;
	height:40px;
	line-height: 24px;
	display: block;
	text-decoration: none;
}
#mainContent div#goto a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: bold;
	color: #ccc;
	height : 40px;
	line-height: 24px;
	text-decoration: none;
}

#mainContent div#goto2 {
	height:80px;
	width: 680px;
	margin: 12px 0;
	padding:0;
}

#mainContent div#goto2 ul {               /* turn off all the normal list behavior */
    list-style: none;
    margin: 0;
    padding: 0;
}

#mainContent div#goto2 li {               /* turn off the normal list item behavior */
    float: left;
	margin: 0;
	padding:0;
}

#mainContent div#goto2 li a:link, div#goto2 a:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: bold;
	color: #666;
	height:40px;
	width: 120px;
	line-height: 24px;
	display: block;
	background-image: url(images/base/button_link3.png);
	background-repeat: no-repeat;
	background-position: left top;
	text-decoration: none;
	padding: 10px 0 5px 15px;
	display: block;
	border: none;   /* don't display a border */
}
#mainContent div#goto2 li a:hover, div#goto2 li a:active {
   	color: #ccc;
}

#mainContent div#goto3 {
	height:80px;
	width: 680px;
	margin: 12px 0;
	padding:0;
}

#mainContent div#goto3 ul {               /* turn off all the normal list behavior */
    list-style: none;
    margin: 0;
    padding: 0;
}

#mainContent div#goto3 li {               /* turn off the normal list item behavior */
    float: left;
	margin: 0;
	padding:0;
}

#mainContent div#goto3 li a:link, div#goto3 a:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: bold;
	color: #666;
	height:40px;
	width: 150px;
	line-height: 24px;
	display: block;
	background-image: url(images/base/button_link4.png);
	background-repeat: no-repeat;
	background-position: left top;
	text-decoration: none;
	padding: 10px 0 5px 15px;
	display: block;
	border: none;   /* don't display a border */
}
#mainContent div#goto3 li a:hover, div#goto3 li a:active {
   	color: #ccc;
}

#mainContent div#goto4 {
	height:80px;
	width: 680px;
	margin: 12px 0;
	padding:0;
}

#mainContent div#goto4 ul {               /* turn off all the normal list behavior */
    list-style: none;
    margin: 0;
    padding: 0;
}

#mainContent div#goto4 li {               /* turn off the normal list item behavior */
    float: left;
	margin: 0;
	padding:0;
}

#mainContent div#goto4 li a:link, div#goto4 a:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: bold;
	color: #666;
	height:40px;
	width: 180px;
	line-height: 24px;
	display: block;
	background-image: url(images/base/button_link5.png);
	background-repeat: no-repeat;
	background-position: left top;
	text-decoration: none;
	padding: 10px 0 5px 15px;
	display: block;
	border: none;   /* don't display a border */
}
#mainContent div#goto4 li a:hover, div#goto4 li a:active {
   	color: #ccc;
}

/* ===== sideBar ===== */

#sideBar {
    float: right;
    width: 220px;
    padding: 0;
    margin: 10px;
}

#sideBar h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
	color: #666;
	margin: 15px 0 5px 0;
	padding: 0 0 3px 0;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #4E4E4E;
}

#sideBar ul {
	position:relative;
	margin: 0;
	paddding: 0;
	list-style-type: none;
}

#sideBar li {
	margin: 0;
	padding: 0;
}


#sideBar li a {
 	font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
	line-height: 24px;
	color: #666;
	text-decoration: none;
	background-image: url(images/base/grey_arrow.gif);
	background-repeat: no-repeat;
	background-position: left center;
	margin: 0;
	padding: 0;
}

#sideBar li a:hover {
 	color: #ccc;
	text-decoration: none;
}

/* ===== current events ===== */

div#currentEvents {
	width: 950px;
	height: 300px;
	margin: 0;
	padding: 0 10px;
	clear: both;
	background-image: url(images/base/eventsBg.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}

div#currentEvents ul {
	list-style-position: outside;
	list-style-image: none;
	list-style-type: none;
	margin: 0;
	padding: 0;

}
div#currentEvents li {
    float: left;
    width: 290px;
    margin: 0 10px 0 10px;
    padding: 0;
}

div#currentEvents li ul {
    margin: 0;
    padding: 0;
}

div#currentEvents li li {
    margin: 0;
    padding: 0;
}

div#currentEvents h4 {
	font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
	font-weight: bold;
    line-height: 16px;
	color: #cc3300;
	margin: 0;
	padding: 25px 0 0 0;
}

div#currentEvents p {
	font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
	line-height: 16px;
	color: #999;
	margin: 0;
	padding: 5px 0;
}

div#currentEvents p .bold {
	font-weight: bold;
	font-size: 11px;
	color: #CCC;
}

div#currentEvents p a, div#currentEvents p a:visited {
 	color: #B4B4B4;
	text-decoration: underline;
}

div#currentEvents p a:hover {
 	color: #cc3300;
	text-decoration: underline;
}

div#infoBlock {
	width: 550px;
	margin: 0;
	padding: 0;
}

div#infoBlock p {
 	font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
	line-height: 14px;
	color: #666;
	text-decoration: none;
	margin: 0 0 5px 0;
	paddding: 0;
}

div#infoBlock em {
 	font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
	line-height: 14px;
	color: #666;
	text-decoration: none;
	margin: 0;
	paddding: 0;
}

div#infoBlock h3 {
 	font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
	line-height: 14px;
	color: #cc3300;
	text-decoration: none;
	margin: 15px 0 3px 0px;
	paddding: 0;
}

div#infoBlock h5 {
 	font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
	line-height: 14px;
	color: #cc3300;
	text-decoration: none;
	margin: 15px 0 3px 0px;
	paddding: 0;
}

div#infoBlock .leadin {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 14px;
	color: #999;
	text-decoration: none;
	margin: 15px 0 3px 0px;
	paddding: 0;
	font-weight: bold;
}

div#infoBlock ul {
	list-style-position: outside;
	list-style-image: url(images/base/grey_arrow.gif);
	list-style-type: none;
	margin: 0;
	paddding: 0;
}


div#infoBlock li a {
 	font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
	line-height: 24px;
	color: #666;
	text-decoration: none;
	margin: 0;
	paddding: 0;
}

div#infoBlock li a:hover {
 	font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
	line-height: 24px;
	color: #ccc;
	text-decoration: none;
}

div#infoBlock p a, div#infoBlock p a:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 24px;
	color: #666;
	text-decoration: underline;
	margin: 0;
	paddding: 0;
}

div#infoBlock p a:hover {
 	font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
	line-height: 24px;
	color: #ccc;
	text-decoration: underline;
}

div#downloadBlock {
	width: 550px;
	margin: 0;
	padding: 0;
}
div#downloadBlock h3 {
 	font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
	line-height: 14px;
	color: #cc3300;
	text-decoration: none;
	margin: 15px 0 3px 0px;
	paddding: 0;
}

div#downloadBlock ul {
	position:relative;
	margin: 0;
	paddding: 0;
	list-style-type: none;
}

div#downloadBlock li {
	margin: 0;
	padding: 0;
}


div#downloadBlock a {
 	font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
	line-height: 24px;
	color: #666;
	text-decoration: none;
	background-image: url(images/base/grey_arrow.gif);
	background-repeat: no-repeat;
	background-position: left center;
	margin: 0;
	padding: 0;
}

div#downloadBlock li a:hover {
 	color: #ccc;
	text-decoration: none;
}


/* ===== footer ===== */

div#footer {
    clear: both;
    background: #333;
    margin: 0px auto;
    padding: 5px;
}

#footer p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: .75em;
    color: #A2A2A2;
    margin: 0;
    padding: 0;
    text-align: center;
}

#footer a {
	font-family: Arial, Helvetica, sans-serif;
    color: #666;
    text-decoration: none;
}

#footer a:hover {
	font-family: Arial, Helvetica, sans-serif;
    color: #ccc;
    text-decoration: none;
}

#footer .identity {
    font-family: "Arial Black", Arial, Helvetica, sans-serif;
	color: #F00;
}

/* ===== miscellaneous styles ===== */

.clear { clear: both}

.clearBlack {
	width: 970px;
	height: 30px;
	background-image: url(images/base/clearBg.gif);
	background-repeat: no-repeat;
	background-position: left top;
	clear: both;
}