/* CSS Document */

html { overflow: -moz-scrollbars-vertical; 
}

body {
	background-color: #024B7C;
	font-family: Arial, Helvetica, sans-serif;
	margin: 0px;
}

a {
	color: #D00000;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

.site_main {
	background-image: url(images/bg.jpg);
	background-position: center;
	background-repeat: repeat-y;
	border-collapse: collapse;
	margin-left: auto;
	margin-right: auto;
	width: 770px;
	text-align: center;
}

.site_main #header {
	background-image: url(images/header.jpg);
	background-repeat: no-repeat;
	background-position: center;
	height: 116px;
	padding: 0px;
}

.site_main #header p {
	float: right;
	color: #024B7C;
	font-size: 16px;
	text-align: right;
	font-weight: bold;
	font-style: italic;
	text-transform: uppercase;
	padding: 31px 24px 0px 0px;
	margin: 0px;
}

.site_main #nav {
	background: #0573BC;
	background-image: url(images/nav_bg.jpg);
	background-repeat: repeat-x;
	text-align:	center;
	height: 37px;
	text-transform: uppercase;
	margin: 0px 10px;
}

.site_main #nav a {
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
	border-left: 1px solid #A8D5F2;
	border-right: 1px solid #024B7C;
	padding: 8px 10px;
}

.site_main #nav a:hover {
	background-image: url(images/nav_bg_over.jpg);
	background-repeat: repeat-x;
	color: #FFFFFF;
}

.site_main #nav ul {
	list-style: none;
	padding: 5px 0px 13px 0px;
	margin: 0px;
	
}

.site_main #nav li {
	display: inline;
	margin: 0px -2px;
}

/*  Index Table */

.site_content_idx {
	padding: 0px;
	margin: 0px 10px;
	text-align: left;
}

.site_content_idx #top {
	background-image: url(images/idx_top.jpg);
	background-repeat: no-repeat;
	height: 207px;
	padding: 0px 335px 0px 14px;
}

.site_content_idx #top h1 {
	font-size: 18px;
	color: #0573BC;
	font-weight: bold;
	text-transform: uppercase;
	padding: 10px 0px 0px;
	margin: 0px 0px 18px;
}

.site_content_idx #top p {
	font-size: 12px;
	color: #024B7C;
	font-weight: bold;
	padding: 0px;
	margin: 10px 0px;
}

.site_content_idx #container { 
	background: #1686D0 url(images/idx_middle_bg.jpg) no-repeat;
	background-position: top;
	width: 62.5em;  /* this width will create a container that will fit in an 800px browser window if text is left at browser default font sizes */
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
	text-align: left; /* this overrides the text-align: center on the body element. */
} 

.site_content_idx #header { 
	background-image: url(images/idx_header.jpg);
	background-repeat: no-repeat;
	height: 57px;
}

/* Tips for sidebar1:
1. Be aware that if you set a font-size value on this div, the overall width of the div will be adjusted accordingly.
2. Since we are working in ems, it's best not to use padding on the sidebar itself. It will be added to the width for standards compliant browsers creating an unknown actual width. 
3. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the ".site_content_idx #sidebar1 p" rule.
*/

.site_content_idx #left {
	background: url(images/idx_left.jpg) no-repeat;
	float: left;
	width: 20.9em; /* since this element is floated, a width must be given */
	height: 191px;
}

.site_content_idx #left ul {
	padding: 0px;
	margin: 0px;
}

.site_content_idx #left ul li {
	list-style-image: url(images/bullet.jpg);
	margin: 0px 0px 1px 30px;
}

.site_content_idx #left a {
	color: #FFFFFF;
}

.site_content_idx #right {
	background: url(images/idx_right.jpg) no-repeat;
	float: right; 
	width: 20.9em; /* since this element is floated, a width must be given */
	height: 191px;
}

.site_content_idx #left h3, .site_content_idx #left p, .site_content_idx #right p, .site_content_idx #right h3, .site_content_idx #middle p {
	margin: 0px 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
}

/* Tips for mainContent:
1. If you give this #mainContent div a font-size value different than the #sidebar1 div, the margins of the #mainContent div will be based on its font-size and the width of the #sidebar1 div will be based on its font-size. You may wish to adjust the values of these divs.
2. The space between the mainContent and sidebar1 is created with the left margin on the mainContent div.  No matter how much content the sidebar1 div contains, the column space will remain. You can remove this left margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends.
3. To avoid float drop, you may need to test to determine the approximate maximum image/element size since this layout is based on the user's font sizing combined with the values you set. However, if the user has their browser font size set lower than normal, less space will be available in the #mainContent div than you may see on testing.
4. In the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This avoids several IE-specific bugs that may occur.
*/
.site_content_idx #middle {
 	background: url(images/idx_middle.jpg);
	background-position: top;
	height: 190px;
	margin: 0 20.9em; /* the right margin can be given in ems or pixels. It creates the space down the right side of the page. */
	border-collapse: collapse;
} 

.site_content_idx #footer {
	background: #024B7C;
	height: 2px;
}

/*  End Index Table */

/*  Content Table */

.site_content {
	background-image: url(images/content_bg.jpg);
	background-repeat: no-repeat;
	padding: 0px;
	margin: 0px 10px;
	text-align: left;
	padding: 0px 14px 0px 14px;
}

.site_content_2 {
	padding: 0px;
	margin: 0px 10px;
	text-align: left;
	padding: 0px 14px 0px 14px;
}

.site_content h1 {
	font-size: 18px;
	color: #0573BC;
	font-weight: bold;
	text-transform: uppercase;
	padding: 10px 0px 0px;
	margin: 0px 0px 18px;
}

.site_content h2 {
	background: #EBEBEB;
	border: 1px solid #E0E0E0;
	font-size: 14px;
	color: #024B7C;
	font-weight: bold;
	text-transform: uppercase;
	padding: 5px;
	margin: 0px;
}

.site_content h3 {
	font-size: 14px;
	color: #024B7C;
	font-weight: bold;
	text-transform: uppercase;
}

.site_content p {
	font-size: 12px;
	color: #024B7C;
	font-weight: bold;
	padding: 0px;
	margin: 10px 0px;
}

.site_content ul {
	font-size: 12px;
	color: #024B7C;
	font-weight: bold;
}

.site_content #container {
	margin: 0 auto;
	text-align: left;
}

.site_content #right {
	float: right; 
	width: 30em;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
	padding: 10px 0px 0px 0px;
}

/*  End Content Table */

/*  Content 2 Table */

.site_content_2 {
	padding: 0px;
	margin: 0px 10px;
	text-align: left;
	padding: 0px 14px 0px 14px;
}

.site_content_2 h1 {
	font-size: 18px;
	color: #0573BC;
	font-weight: bold;
	text-transform: uppercase;
	padding: 10px 0px 0px;
	margin: 0px 0px 18px;
}

.site_content_2 h2 {
	background: #EBEBEB;
	border: 1px solid #E0E0E0;
	font-size: 14px;
	color: #024B7C;
	font-weight: bold;
	text-transform: uppercase;
	padding: 5px;
	margin: 0px;
}

.site_content_2 p {
	font-size: 12px;
	color: #024B7C;
	font-weight: bold;
	padding: 0px;
	margin: 10px 0px;
}

.site_content #container {
	margin: 0 auto;
	text-align: left;
}

/*  End Content 2 Table */

/*  Gallery Table */

.gallery {
	background-image: url(images/content_bg.jpg);
	background-repeat: no-repeat;
	padding: 0px;
	margin: 0px 10px;
	text-align: left;
	padding: 0px 14px 0px 14px;
}

.gallery h1 {
	font-size: 18px;
	color: #0573BC;
	font-weight: bold;
	text-transform: uppercase;
	padding: 10px 0px 0px;
	margin: 0px 0px 18px;
}

.gallery #thumbs img {
	border: 1px solid #024B7C;
	margin: 0px 25px 10px 0px;
	width: 150px;
	height: 113px;
}

.gallery #thumbs a:hover img  {
	border: 1px solid #0099ff;
}

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(./images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(./images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

/*  End Gallery Table */

.site_footer {
	background-image: url(images/footer.jpg);
	background-repeat: no-repeat;
	padding: 8px 23px 0px 23px;
	height: 32px;
}

.site_footer #copy {
	float: left;
	font-size: 10px;
	color: #999999;
	font-weight: bold;
}

.site_footer #author {
	float: right;
	text-align: right;
	font-weight: bold;
}

.skiva {
	color: #666666;
}

.site_footer #author a {
	font-size: 12px;
	color: #999999;
	text-decoration: none;
}


.clearfloat {
	clear: both;
    height: 0;
    font-size: 1px;
    line-height: 0px;
}

.fltrt {
	float: right;
	border: 1px solid #024B7C;
	margin: 10px 0px 10px 10px;
}

.fltlft {
	float: left;
	margin-right: 10px;
}

<!--[if IE]>
<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
.site_content_idx #left, .site_content_idx #right { padding-top: 30px; }
.site_content_idx #middle { zoom: 1; padding-top: 1px; border-collapse: collapse; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->