/* 
 * Global CSS for K2 Concepts Inc.
 * (c) 2009-10 Hougasian. www.hougasian.com
 *
 * Dev site:	k2.hougasian.com
 * www site:	www.k2conceptsinc.com
 *
 */

/* Reset browser */
		@import url(/css/reset.css) screen;

 /*	TAGS	*/
	
		body {
			font: 75% Verdana, Arial, Helvetica, sans-serif;
			background: #333;
			margin: 0; 
			padding: 0;
			text-align: center;
			color: #ccc;
			}
		h1 {font-size: 200%; color: #FFF;}
		h2 {
			margin: 5px 0;
			font-size: 150%; 
			color: #CCC;
			font-weight: bold;
			}
			.main #body_wrap{
				width: 100%;
				padding-bottom: 25px;
				background: #666;
				margin: 0;
				text-align: left; 
				border-bottom: 1px solid #222;
				}
			.main #wrap {
				margin: 0 auto;
				width: 990px;
				padding: 0 20px; 
				}
		img {border: 0;} 
		
		em {padding: 0 5px;}
		li { margin-left: 1.2em;}
		ol { list-style: lower-alpha;}

/*	DIVS	*/
		
		#plaque { 
			width: 990px;
			height: 300px;
			background: #CCC;
			}
			#plaque.loading {background: url(/images/ajax-loader.gif) no-repeat center center #CCC;}

		#lang {float: right;}
		#lang select {
			width: 100px;
			padding: 3px;
			background: #999;
			color:#CCC;
			border: 1px solid #666;
			}
		#lang select:focus {color: #E2FFA0;}

		#menu {
			width: 250px;
			float: right;
			}
			
			#menu ul { list-style: none;}
			#menu a:link, #menu a:active, #menu a:focus, #menu a:visited {
				vertical-align: middle;
				display: block;
				width: 250px;
				height: 45px;
				font-size: 120%;
				border-bottom: 1px solid #999;
				padding-top: 5px;
				color: #FFF;
				text-decoration: none;
				overflow: hidden; /* needed for translation overflows */
				}
			#menu a:hover {
				color: #9C9;
				background: #333;
				}
			#menu img {
				vertical-align: middle;
				}
		
		#resources {
			background: #333;
			color: #666;
			width: 250px;
			margin-top: 10px;
			float: right;
			}
			
			#resources ul { list-style: none;}
			#resources .btl {float: left; width: 10px; top: 0px;}
			#resources .btr {float: right; width: 10px; top: 0px;}
			#resources .bbl {float: left; width: 10px; bottom: 10px;}
			#resources .bbr {float: right; width: 10px; bottom: 10px;}	
			
			#resources h4 {
				font-size: 100%; 
				color: #999;
				padding: 10px;
				font-weight: bold;
				}
			
			#resources a:link, #resources a:active, #resources a:focus, #resources a:visited {
				vertical-align: middle;
				display: block;
				min-height: 30px;
				color: #666;
				text-decoration: none;
				padding-left: 25px;
				}
			#resources a:hover { text-decoration: underline;}
			
			#resources .data {background: url(/images/icons/properties.gif) no-repeat left top;}
			#resources .beaker {background: url(/images/icons/erlenmeyer_sm.gif) no-repeat left top;} 
			#resources .white {background: url(/images/icons/acro_forms.gif) no-repeat left top;}
			#resources .pds {background: url(/images/icons/acro_form.gif) no-repeat left top;}
			#resources .graph {background: url(/images/graphicon.gif) no-repeat left top;}
		
		a:link, a:active, a:focus, a:visited {
			color: #ccc;
			text-decoration: none;
			}
		
		a:hover {
			color: #9c9;
			text-decoration: underline;
			}
		
		#topnav {padding: 20px 0;}
		
		#columnone {
			width: 700px;
			float: left;
			padding: 0;
			}
			#columnone #germ {
				width: 150px;
				height: 101px;
				float: right;
				}
			#columnone #germwrap p.b1 {
				color: #fff;
				font-weight: bold;
				width: 80px;
				height: 30px;
				float: left;
				}
			#columnone #germwrap p.b2 {
				width: 450px;
				float: left;
				border-left: 1px solid #9C9;
				padding-left: 7px;
				}
		
		#load_player {margin-top: 15px;}
		
		#placeholder {
			width: 600px;
			height: 300px;
			}

		.browsers a {padding-right: 15px;}
/* 	TRANSLATE	*/
		#translate {
			position: absolute; 
			padding: 5px 10px; 
			background: #CCC;
			border: 2px solid #333; 
			color: #FFF; 
			width: 125px; 
			z-index: 100; 
			left:50%;
			maring-left:-250px; 
			}
			#translate img {vertical-align: middle;}

/*	CONTACT	*/
		#hithere {
			width: 600px;
			height: 400px;
			padding: 20px;
			color: #999;
			}
		#infobox {
			padding-top: 125px;
			width: 200px;
			height: 200px;
			float: right;
			font: 180% Arial, Helvetica, sans-serif;
			color: #666;
			}
			#infobox p span {color: #F90; font-size: 70%; line-height: 1em;}
			#infobox p img {float: right;}
		
		.hide {display: none;}
	
/*	REPORTS	*/
		#report {
			width: 800px;
			padding: 30px;
			color: #666;
			}
			#report h1 {color: #333;}
			#report h2 {color:#960;}
			#report .alert {
				color: #F33;
				font-size: 90%;
				}
			#report em {
				padding: 0;
				color: #69F;
				}
		#rptCol {
			float: left; 
			width: 70%;
			margin-right: 20x;
			}
		#rptCol2 {
			float: left; 
			width: 25%;
			padding-left: 20px;
			border-left: 1px solid #ccc;
			font-size: 80%;
			}
		#w90 {width: 90%;}
		.col4 {
			float: left;
			width: 20%;
			padding: 7px;
			}
		
		fieldset {border: 1px solid #ccc;
			padding: 3px;
		}
		.p50 {padding: 50px;}
		
/*	FOOTER	*/

		#footer {
			font-size: 80%;
			margin: auto;
			padding: 20px;
			width: 990px;
			color: #666;
			text-align: left;
			}
			#footer h2 { 
				color: #666;
				padding: 5px 67px 0 5px;
				margin-bottom: 0;
				background: url(/images/npr.k.png) no-repeat right center;
				}
			#footer img {vertical-align: middle;}
			#footer .sitemap {
				float: left;
				width: 180px;
				padding-top: 5px;
				}
				
			#footer .sitemap a {display: block;}	
			
			#footer strong {
				color: #999;
				font-variant: small-caps;
				}	
			#footer a:link, #footer a:active, #footer a:visited {
				text-decoration: none;
				color: #666;
				}
			#footer a:hover{
				color: #CCC;
				text-decoration: underline;
				}
			#footer .siteinfo {
				border-top: 1px solid #666;
				margin-top: 5px;  
				}
			#footer .siteinfo img {
				float: left;
				padding: 15px 20px 0 0;
				vertical-align: middle;
				}
			#footer .siteinfo a img {
				float: none;
				padding: 0;
				}
			#footer .siteinfo h2 { text-align: right;}
			#footer .siteinfo h2 img { 
				float: right;
				padding-left: 5px;
				padding-right: -5px;
				}
		
			#footer .alert {background: url(/images/skin/alert.gif) no-repeat left top; padding-left: 15px;}
			#footer .ok {background: url(/images/skin/ok.gif) no-repeat left center; padding-left: 15px;}
			#footer .brand {background: url(/images/skin/hougasian_com.gif) no-repeat right center; padding-right: 25px;}
			
/*	ERROR/ALERT	*/

		#thanks h3 { color: #999; padding: 20px;}
		#error h3 { color: #F33; padding: 20px;}
		#error h3 img, #thanks h3 img {float: right;}
		
/*	COMMON	*/

		.clear {clear: both;}
		.inner {padding: 10px 0 0 10px;}		
		.left {float: left; padding-right: 20px;}
		.right {float: right; padding-left: 20px;}