/*
Title:			Rockford 
Description:	CSS for Rockford IT
Author:			Visualcode Limited
Date: 			September 2008.
Copywrite:		Visualcode Ltd.
Version:		1.0
*/


body {
	font:11px/18px "Verdana", Geneva, Tahoma, Lucida Grande, Arial, sans-serif;
	color:#6d6d6d;
	margin:0;
	padding:0;
	background:#EDECEC;
	text-align:center;
	}

input, 
button, 
select, 
textarea {
	font:11px/18px "Verdana", Geneva, Tahoma, Lucida Grande, Arial, sans-serif;
	}
	
a:link {
	color: #672C89;
	text-decoration: none;
}

a:visited {
	color: #672C89;
	text-decoration: none;
}

a:active {
	color: #581980;
	text-decoration:underline;
}

a:hover {
	color: #581980;
	text-decoration:underline;
}

a img{
	border:0;
	}

h1, h2, h3{
	font-weight:normal;
	}
	
h1 {
	font-size: 2.2em;
	color: #672C89;
	margin-top:0;
	padding-top:14px;
	font-weight:normal;
	text-align:center;
	}

h2 {
	color:#672C89;
	font-size: 2.0em;
	font-weight:normal;
	text-align:center;
	}

h3 {
	color:#672C89;
	font-size: 1.3em;
	}

hr {
	border: none;
	border-top: 1px solid #672C89;
	height: 1px;
	margin: 8px auto;
	padding: 0;
	color:#FFF;
	}

.clear{
	height:1px;
	padding:0;
	margin:0;
	border:0;
	clear:both;
	}
	
/* Xinha Table Layout */

table {
	margin:0; 
	padding:0; 
	border-collapse:collapse; 
	border-spacing:0px;
	width:98% !important;
	}

table td{
	font-family: tahoma, arial, sans-serif;
	color:#6d6d6d !important;
	padding:0 10px 0 10px;
	font-size:1em;
	vertical-align:top;
	}

/* ______________________ Start Layout ______________________ */

#container{
	padding:0;
	margin:0;
	}

#wrapper {
	width:760px;
	margin:0 auto;
	padding:0;
	background:#FFF;
	padding-top:25px;
	}
/* ______________________ Form Search______________________ */	

#search{
	float:right;
	width:180px;
	text-align:right;
	}

form.search{
	padding:5px 10px;
	height:23px;
	}

form.search label{
	color:#FFF;
	float:left;
	}

form.search input{
	padding:2px 5px;
	border:0;
	background:#672C89 url(images/searchBack.gif) repeat-x left top;
	float:right;
	}

/* ______________________ Navigation ______________________ */		
	
 #navigation{
 	clear:both;
 	height:33px;
	position:relative;
	background:#672C89 url(images/shadow.gif) repeat-x left bottom;
	
	}

 #navigation ul {
	list-style:none; 
	padding:0px 0 0 10px;
	margin:0;
	position:relative;
	text-align:left;
	}
	
 #navigation ul li {
	display:inline;
	float:left;
	margin:0;
	position:relative;
	text-align:center;
	font-weight:bold;
	font-size:10px;
	border-right:#FFF solid 1px;
	}

 #navigation ul li.end{
 	border-right:none;
 	
 	}
	
 #navigation ul li a {
	color:#FFF;
	position:relative;
	display:block;
	padding:5px 14px 7px 14px;
	float:left;
	}
	
 #navigation ul li a:hover {
	position:relative;
	text-decoration:none;
	color:#672C89;
	background:#fffffe;
	}

 #sidearea-contact {
    margin-bottom: 15px;
 }

/* ______________________ Banner ______________________ */	


#banner{
	background:#FFF;
	margin-bottom:5px;
	}

#bannerHB{
	display:none;
	}

#homeBanner{	
	float:left;
	width:465px;
	}
	
/* ______________________ Main Content/Areas ______________________ */	

#homeArea{
	width:255px;
	float:right;
	text-align:left;
	line-height:25px;
	text-align:right;
	}

#homeArea #logo{
	margin-top:15px;
	}

#mainContent{
	width:750px;
	float:right;
	background:#FFF  url(images/shadow.gif) repeat-x left bottom;
	margin-bottom:2px;
	padding:5px 5px 8px 5px;
	}

#content{
	width:575px;
	float:right;
	}


.sContent{
	background:#FFF;
	margin-bottom:0px;
	text-align:left;
	padding:0 10px;
	text-align:justify;
	}


.sContent strong{
	color:#672C89;
	}
	
.sContent ul{
	margin:0;
	padding:0;
	}

.sContent li{
	list-style:none;
	background:url(images/bullet.gif) no-repeat 0 6px;
	margin:5px 0px 5px 0px;
	padding-left:15px;
	}
	
.sContent li ul li.collection{
	display:none;
	}

/* ______________________ Side Area ______________________ */	


#sideArea {
	font-size:100%;
	position:relative;
	width:170px;
	float:left;
	text-align:left;
	background:#FFF;
	}

#logo {
	margin-bottom:5px;
	margin-top:10px;
	}



/* ______________________ fourButtons ______________________ */	


#tickerTape{
	clear:both;
 	height:23px;
 	margin-bottom:2px;
	position:relative;
	background:#672C89 url(images/shadow.gif) repeat-x left bottom;
	font-size:11px;
	color:#FFF;
	text-align:left;
	padding:5px 10px;
	}

#fourArea{
	padding:0;
	margin:0;
	color:#333;
	}

#fourArea div{
	width:181px;
	border:#672C89 ridge 0px;
	float:left;
	background:#FFF url(images/boxTop.gif) no-repeat;
	text-align:justify;
	}
	
.fourCont{
	background:transparent url(images/boxBottom.gif) no-repeat left bottom  !important;
	padding:5px 5px 0px 5px;
	width:171px !important;
	}

#fourArea .iserv,
#fourArea .host,
#fourArea .isecu{
	margin-right:12px;
 	}

#fourArea h3{
	padding:0px;
	margin:0;
	padding-top:5px;
	height:35px;
	font-weight:bold;
	font-size:10px;
	text-align:center;
	padding-left:40px;
	}

#fourArea a:hover h3{
	color:#FFF !important;
	}
	
#fourArea a{
	text-decoration:none;
	display:block;
	padding:10px 15px 0 15px;
	}	
 
#fourArea .iserv a{background:transparent url(images/iserv.gif) no-repeat 10px 10px; }
#fourArea .isecu a{background:transparent url(images/isecu.gif) no-repeat 10px 10px;}
#fourArea .host a{background:transparent url(images/host.gif) no-repeat 10px 10px;}
#fourArea .itsup a{background:transparent url(images/itsup.gif) no-repeat 10px 10px;}

#fourArea .iserv a:hover{background:#672C89 url(images/iserv_hover.gif) no-repeat 10px 10px; color:#FFF !important;}
#fourArea .isecu a:hover{background:#672C89 url(images/isecu_hover.gif) no-repeat 10px 10px; color:#FFF !important;}
#fourArea .host a:hover{background:#672C89 url(images/host_hover.gif) no-repeat 10px 10px; color:#FFF !important;}
#fourArea .itsup a:hover{background:#672C89 url(images/itsup_hover.gif) no-repeat 10px 10px; color:#FFF !important;}

#fourArea p{
	margin:5px 0;
	line-height:13px;
	height:145px;
	text-align:left;
	}

#fourArea a p{
	color:#6d6d6d;
	}

#fourArea a:hover p{
	color:#FFF;
	}

#fourArea span{
	display:block;
	text-align:right;
	padding-bottom:10px;
	margin-bottom:5px;
	}

#partners{
	clear:left;
	padding-top:5px;
	}

/* ______________________ Footer ______________________ */

#clearWrapper{	
	border-bottom:#4a0106 solid 1px;
	clear:both;
	height:0;
	}

#footer {
	clear:both;
	padding-top:0px;
	text-align:center;
	font-size:10px;
	text-align:center;
	margin:0;
	color:#672C89;
	}

#fholder{
	width:760px;
	margin:0 auto;
	background:#FFF;
	}
	
#fholder b,
#fholder a{
	color:#672C89;	
	}

#copyright{
	text-align:left;
	float:left;
	width:350px;
	}

#contactNo{
	clear:left;
	padding:10px 0 2px 0;
	text-align:justify;
	word-spacing:2px
	}
	
#contactAd{
	text-align:right;
	}


/*--------------------------- General Forms - Specific ---------------------------*/

form.custDetails {
	margin:0;
	padding:0;
	margin-top:10px;
	padding:5px;
	background:#D1C3E1;
	}

form.custDetails p {
	margin:0;
	padding:2px 0 2px 0 ;
	
	}

form.custDetails label {
	float: left;
	margin:0;
	padding:2px 1px 0 1px;
	width: 10em;
	text-align: left;
	font-size:95%;
	}

form.custDetails input,
form.custDetails select,
form.custDetails textarea{
	margin-bottom:5px;
	padding:3px;
	border:#CCC solid 1px;
	background:#FFF;
	}

form.custDetails select{
	margin-bottom:5px;
	padding:0;
	border:#CCC solid 1px;
	}

form.custDetails form input.standard {
	width:200px;
	}

form.custDetails form textarea {
	width:400px;
	font-size:9pt;
	}	

form.custDetails .submit input {
	background:#672C89;
	padding:3px 10px !important;
	border:#666 solid 1px;
	border-left:#333 solid 1px;
	border-top:#333 solid 1px;
	color:#FFF;
	font-weight:bold;
	font-size:85%;
	}

	
/*-------------- News ----------------*/

.back {
	padding:10px 0;
	text-align:center;
	border-top:#672C89 solid 1px;
	}

.back a {
	background:#672C89;
	padding:5px 10px !important;
	border:#333 solid 1px;
	border-left:#CCC solid 1px;
	border-top:#CCC solid 1px;
	color:#FFF !important;
	font-weight:bold;
	font-size:85%;
	}
	
h1.archived{
	border-top:#AD017B solid 1px;
	padding-top:10px;
	}
	
ul.archived{
	margin:0;
	padding:0;
	margin-bottom:15px;
	}

ul.archived li{
	background:#ECECEC;
	border:#672C89 solid 1px;
	margin-bottom:5px;
	padding:5px 10px;
	}
	

/*--------------------------- Tabbed ---------------------------*/

#Tab {
	  float:left;
	  width:100%;
	  background:#FFF;
	  border-bottom:#CCC solid 1px;
	  line-height:normal;
	  margin-bottom:10px;
	  }
#Tab ul {
	  margin:0;
	  padding:0px 10px 0 0;
	  list-style:none;
	  }
#Tab li {
	  float:left;
	  background:#333 url("images/navBack.gif") repeat-x left top;
	  margin:0 0 0 5px;
	  padding:0 0 0 9px;
	  border-right:#CCC solid 1px;
	  border-bottom:none;
	  border-top:#ECECEC solid 1px;
	  border-left:#ECECEC solid 1px;
	  }
	 
#Tab li.current{
	background:#AE007C url(images/navBackOver.gif) repeat-x;
	}
	  
#Tab a {x;
	  float:left;
	  display:block;
	  padding:5px 15px 4px 6px;
	  text-decoration:none;
	  font-weight:bold;
	  color:#FFF;
	  }
	
	
	
	
#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; }
	
	
	
/*--------------------------- Silly Embossed Box - 7 wasteful div layout  ---------------------------*/	
	
	
.divBackLeft{background:#D1C3E1 url(images/divBackLeft.gif) repeat-y;}
.divBackRight{background:transparent url(images/divBackRight.gif) repeat-y top right;}	
.divTopLeft{background:transparent url(images/divTopLeft.gif) no-repeat; height:10px;}	
.divTopRight{background:transparent url(images/divTopRight.gif) no-repeat top right; height:10px;}
.divBottomLeft{background:transparent url(images/divBottomLeft.gif) no-repeat bottom left; height:10px;}	
.divBottomRight{background:transparent url(images/divBottomRight.gif) no-repeat bottom right; height:10px;}
.divContent{padding:0 10px;}


/*--------------------------- Fading News Article ---------------------------*/

#newsArea{
	height:250px;
	text-align:left;
	}

#newsArea a{
	text-decoration:none;
	}

#newsArea h3{
	margin:0;
	padding:0;
	font-weight:bold;
	}

#newsticker {
	position: relative;
	}
#newsticker ul {
	list-style: none;
	/*min-height: 1.6em;*/
	min-height: 150px;
	padding: 10px 0px;
	margin:0;
	
}
* html #newsticker ul {
	/*min-height: 1.6em;*/
	min-height: 150px;
	overflow: visible;
	padding: 10px 5px;
	margin:0;
}
#newsticker li.error {
	color: #f00;
}
#newsticker #togglenewsticker {
	display:none;
}
* html #newsticker #togglenewsticker {
	right: 0px;
}

.newstitle{
	font-weight:bold;
	}

a .newscontent{
	color:#6d6d6d;
	}

a .newscontent span{
	color:#672C89;
	display:block;
	text-align:right;
	}