/*iocstyle.css wrtten by Naji Naeem @ Pissfactory for www.iocircuits.com*/

html, body {
	min-height:821px;
	height:100%;
}
body{
	position: relative;
	background:  #333333 url(../images/bgPattern.gif) repeat;
	font: 12px sans-serif;
	padding: 0;
	margin:0;
	text-align: center;

}
a {
	font-family: sans-serif;
	color: #99CC00;
	text-decoration: none;
}
img {
	border:none;
}


img.inlineIcon{
	border:none;
	vertical-align: middle;
}
div#container {
	background: url(../images/bgImage.gif) top center no-repeat;
	position:relative;
	width: 900px;
	min-height:100%;
	margin: auto;
	border:none;
	text-align: left;
	padding:0 0 105px 0;
}

div#leftShad{
	position:absolute;
	background: url(../images/leftShadow.png) repeat-y top right;
	width: 32px;
	height: 100%;
	min-height:100%;
	margin:0;
	padding:0;
	border: none;
	top:0;
	left:0;
}
div#rightShad{
	position:absolute;
	background: url(../images/rightShadow.png) repeat-y top left;
	width: 32px;
	height: 100%;
	margin:0;
	padding:0;
	border: none;
	top:0;
	right:0;
}

div#headContainer {
	background: none;
	position: relative;
	width: 794px;
	height: 224px;
	border:1px solid #99CC33;
	margin: 0 50px 2px 50px;
}


/*mainNav is a container for the main navigation bar. 
divs for buttons and a search box container resides within this div*/

div#mainNav{
	background: transparent;
	position:relative;
	width: 800px;
	height: 40px;
	margin: 0 50px 0 50px;
	border:none; 
	padding:0;
	z-index: 99;
}
/*content consits of multiple divs arranged in two columns floated within the content div*/

div#content{
	position: relative;
	margin: 0 0 0 50px;
	width: 800px;
	height:auto;
	border: none;
	color: #CCCCCC;
	padding:0;
}

div#colOne{
	float: left;
	width:604px;
	margin:0;
	height:auto;
	border: none;
	padding:0;

}
div#colTwo{

	float: left;
	border: none;
	width:196px;
	height:auto;
	padding: 0;
	background: none;
	margin:0;

}

div#clear{

	height:auto; 
	width:auto; 
	margin:0 10px ;
	clear: both;
}

div#links{

	margin: 0 0 0 0;
	width:192px;
	height:auto;
	padding: 4px 0 0 0;
	background: #686868;
	border:none;
}


div.sideBox{

	margin: 4px 0;
	width:192px;
	min-height:200px;
	padding: 0;
	background: #686868;
	border: none;
}

.writing h2 {
	margin: 0;
	padding: 0 0 0 25px;
	background: url(../images/h2img.gif) no-repeat left center ;
	border: none;
	font-weight: normal;
	font-size: 21px;
	text-align:left;
	color:#FFFFFF;
}
.writing .h2iocircuits{color: pink;}
.writing .h2science{color: yellow;}
.writing .h2infotech{color: green;}
.writing .h2security{color: red;}
.writing .h2games{color: blue;}
.writing .h2software{color: orange;}
.writing .h2hardware{color: black;}


div.writing{


	margin: 0 0  4px 0;
	width:540px;
	height:auto;
	padding: 75px 30px 40px 30px;
	background: #686868;
	text-align: justify;
	border: none;
}


div.writing li{
	list-style: disc outside;
	display: list-item;
	padding:0;
	margin:0;
}
span.h2UL{

	display: block;
	width:509px;
	height:5px;
	background:url(../images/h2ul.gif) no-repeat left center;
	margin: 5px 0 0 0;
}

div#imgSlider{


	margin: 4px 4px 4px 0;
	width:600px;
	height:100px;
	padding: 0;
	background: url(../images/imgSlider.gif) no-repeat;
}

/*Container divs for footer elements. footer consits of three columns*/
div#footerContainer{
	background:transparent url(../images/footerRX.gif) repeat-x;
	position:absolute;
	width: 798px;
	height: 100px;
	margin: 0 50px 0 50px;
	border:1px solid #3c5609;
	overflow: hidden;
}

div#colLeft{
	position:absolute;
	width: 200px;
	height: 100%;
	border: none;
	top:0;
	left:0;
}

div#colCenter{
	position:absolute;
	width: 400px;
	height: 100%;
	top:0;
	left:200px;
	color: #CCCCCC;
	border:none;
	text-align: center;
	font-size:90%;
	padding: 0;
}

div#colCenter a{
	font-family: sans-serif;
	color: #99CC00;
	text-decoration: none;
}

div#colRight{
	position:absolute;
	width: 200px;
	height: 100%;
	border: none;
	top:0;
	left:600px;
	padding: 0;
}

div#footerContainer ul,li{
	list-style: none inside;
	display: inline;
	padding:0 4px 0 0;
	margin:0;
}

img#w3cxhtml{
	background: transparent url(../images/w3cxhtml.gif) no-repeat;
}
img#w3cxhtml:hover{
	background: transparent url(../images/w3cxhtmlColor.gif) no-repeat;
}

img#w3ccss{
	background: transparent url(../images/w3ccss.gif) no-repeat;
}
img#w3ccss:hover{
	background: transparent url(../images/w3ccssColor.gif) no-repeat;
}