@charset "utf-8";
/* STANDARD CSS Only read by front end of website */
* { margin:0; padding:0;}

body  { font:62.5% Arial, Helvetica, sans-serif !important; background:#592e91 !important; text-align:center; color:#000;}
	#wrapper{ width: 980px; margin: 0 auto; text-align:left; font-size: 1.2em; }

ul, li{ list-style-type:none; margin:0; padding:0; }
h1, h2, h3, h4{ color: #592e91; font-weight:normal; font-size: 100%;  margin: 8px 0; line-height:normal; }
h1{ font-size: 2.0em; }
h2{ font-size: 1.8em; }
h3{ font-size: 1.7em; }
h4{ font-size: 1.6em; }



/* Styling for the header image rotation */	
#header{ width: 980px; height:123px; background: url(/images/zircotec_header.jpg) no-repeat; border-bottom: 3px solid #b174ff; position:relative; overflow:hidden; }
	#header a#logo{ display: block; width: 291px; margin:0; padding:0; height:123px; background: url(/images/logos.gif) no-repeat 0 0; text-indent:-9000px; }
	#header a:hover#logo{ background-position: 0 -123px; }
	#header .slogan{ position: absolute; top:32px; right:10px; color: #fff; margin:0; padding:0; font-size: 1.9em; font-weight: bold; }
	#header .sloganshad{ position: absolute; top:33px; right:9px; color: #000; margin:0; padding:0; font-size: 1.9em; font-weight: bold; }
	
	#header #contact{ position:absolute; right:10px; bottom:19px; text-align:right; }
	#header #contact h2{ font-size: 1.5em; color:#fff; margin:0; padding:0;}
	#header #contact h2 span a{ display: block; color: #fff; font-weight:bold; font-size: 0.75em; }

#news_and_flash, #content{ overflow:hidden; padding: 10px 10px 0 10px; background:#fff; }

#news_and_flash{ height: 204px; }
	#main_image{ float: left; position: relative; /*background: url(/images/loading.gif) no-repeat center 70px;*/ }
		#main_image .h_img{ position:relative; width: 704px; height: 204px; overflow:hidden; }
		#main_image .h_img span{ position:absolute; bottom:0; left:0; width: 100%; padding:5px 8px; height: 23px; font-weight:normal; background: url(/images/anim_hover.png) no-repeat; color:#fff; font-size: 1.5em; }
	
	#latest_news{ float: right; position:relative; width: 236px; background:#000000; height: 194px; padding: 10px 10px 0 10px; color: #fff; }
		#latest_news h2{ color: #fff; font-weight: normal; font-size: 2.0em; padding: 0; margin:0; }
		#latest_news h2 span{ font-weight:bold; }
		#latest_news li{ margin: 8px 0 0; }
		#latest_news a{ text-decoration:none; color:#fff; font-weight: bold; display:block; }
		#latest_news a span{ display: block; font-weight: normal; }
		
		#latest_news a:hover{ color:#B174FF;}		

#content{ padding-top: 10px; }
	#content_left{ float: left; position:relative; width:240px; background: #efefef; border: 1px solid #777777; }
		#content_left h2{ color: #592e91; font-weight: normal; font-size:1.9em; margin:0; }
		#content_left ul{ margin: 20px 0 20px 15px; }
		#content_left li{ list-style-type: disc; margin: 10px 0; }
		#content_left .inner{ padding: 10px; border: 1px solid #fff; }
		#content_left fieldset{ margin-top: 20px; }
		#content_left label{ display: block; font-size: 1.2em; font-weight: bold; color:#592e91; padding: 3px 0 0 0; }
		#content_left p span{ font-size: 0.9em; color: #555555; padding: 0 0 3px 0; }
		#content_left p span.req{ font-size: 1.4em; color: #000; padding:0; }
		#content_left input, #content_left textarea{ background: #fff url(/images/xgradients.gif) repeat-x; width: 208px; padding: 2px; border: 1px solid #555;  }
		#content_left input.submit{ width: auto; margin-top: 10px; font-weight:bold; }
		
		#content_left ul.othernews{ list-style-type: none; margin:0 0 0 15px; padding:0; }
		#content_left ul.othernews li{ list-style-type: none; }
		#content_left ul.othernews a{ text-decoration: none; color: #7551A9; }
		#content_left ul.othernews a:hover{ text-decoration: underline; }
		
	#content_right{ float: right; position:relative; width:960px; line-height: 16px;}
		#content_right ul{ margin: 20px 0 20px 15px; }
		#content_right li{ list-style-type: disc; margin: 10px 0 0 0; }
		#content_right h1, #content_right h2, #content_right h3, #content_right h4{ margin: 0 0 10px 0; }
		
		
/* HOMEPAGE RTE CONTENT STYLING */
.twocol { width:700px !important;}
.twocol .rte_twoeqcol_left {width: 48%; margin-right: 20px; }
.twocol .rte_twoeqcol_right {width: 48%;}
	
#homepage_links{ overflow: hidden; margin-bottom: 20px; }
	#homepage_links ul{ list-style-type: none; margin:0; padding:0; }
	#homepage_links li{ list-style-type: none; float: left; position:relative; width:170px; margin:0 6px 5px 0; }
	#homepage_links li.margin_4{ margin: 0 0 5px 0; }
	#homepage_links a{ display: block; text-decoration:none; background: #000 url(/images/home_cats.gif) repeat-x 0 0; color: #fff; font-weight: normal; border: 1px solid #000; height:175px; overflow:hidden; font-size:0.9em; } 
	#homepage_links .inner{ padding: 10px; display:block; }
	#homepage_links .home_img{ cursor:hand; height: 90px; position:relative; border: 3px solid #aa9dbf; border-width: 1px 1px 4px 1px; border-color:#000000 #000000 #aa9dbf #000000; margin-bottom: 5px; display: block; }
	#homepage_links .home_title{ display: block; font-weight:bold; text-transform:uppercase; font-size:1.1em; position:absolute; bottom:2px; left:0; cursor:hand; }
	#homepage_links .home_text{ display: block; height:115px; cursor:hand; line-height:14px; }
	#homepage_links a .overlay{ background: url(/images/anim_hover_h_cats.png) no-repeat; display:block; height: 90px; }
	#homepage_links a:hover .overlay{ background: none; }
	
	
	#homepage_links a:hover{ text-decoration: none; background: #333 url(/images/home_cats.gif) repeat-x 0 -373px; border: 1px solid #555; }
	#homepage_links a:hover .home_img{ border: 3px solid #fff; border-width: 1px 1px 4px 1px; border-color:#000000 #000000 #ffffff #000000; }

#main_footer{ padding:10px; background: #fff; }
	#footer_nav, #footer{ width: 960px; }
	
	#footer_nav{ background: #592E91; overflow:hidden; width:960px; margin-top: 15px; }
	#footer_nav li{ float: left; position:relative; }
	#footer_nav a{ text-decoration:none; display:block; padding: 8px 15px; color: #fff; }
	#footer_nav a:hover{ text-decoration: underline; }
	
	#footer{ color: #fff; background: #000; padding: 14px 10px; position:relative; width: 940px; }

/* FLOATING CLASSES */
.fleft{ float:left;}
.fright{ float:right;}
.clear { clear:both; height:0; line-height:0; font-size:1px;}

/* GENERAL LINK COLOURS fleft fright clear */
a:link {color:#28449d; text-decoration:underline; font-weight:bold;}
a:visited {color:#28449d; text-decoration:underline; font-weight:bold;}
a:hover {text-decoration:none;}
a:active {color:#28449d; text-decoration:underline;}
a:focus {outline:none;}

/* GLOBAL IMAGE STYLES */
img {border:none;}
.middle {vertical-align:middle;}



/* FORM AND INPUT RELATED STYLES */
form {padding:0; margin:0;}
input {color:#444; vertical-align:middle;}
label {vertical-align:middle;}
input.button {vertical-align:top;}
.button2 {vertical-align:top; margin:5px; display:block;}
select {color:#444; font-size:1em;}
textarea {font-family:Arial, Helvetica, sans-serif; font-size:1.2em;}
img.button {margin:5px;}
select.side {max-width:160px; width:160px;} /* Side-nav select boxes */
fieldset.hidden {margin:0; padding:0; border:none;}
legend.hidden {margin:0; padding:0; display:none;}
.wide {width:300px}
.medium {width:200px;}
.narrow {width:120px;}

/* GLOBAL LIST STYLES others defined as and when used */
dl {margin:0;}
dt {padding:3px 0;}
dd {padding:0; margin:0;}
ol {margin:0 0 0 20px; padding:0;}
ol li {list-style:decimal;}

/***************************************************
* LiquidShop LIGHTBOX IMAGE MAGNIFIER CSS Stylesheet
***************************************************/


#lightbox{
	position: absolute;
	top: 40px;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 600px;
	height: 500px;
	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: 500px;
	background: transparent url(/images/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left; background: url(/images/prevlabel.gif) left 0 no-repeat; }
#nextLink{ right: 0; float: right;background: url(/images/nextlabel.gif) right 0 no-repeat; }


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

#imageData{
	padding:0 10px;
	}
#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;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	filter:alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
	}
	

.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}

* html>body .clearfix {
	display: inline-block; 
	width: 100%;
	}

* html .clearfix {
	/* Hides from IE-mac \*/
	height: 1%;
	/* End hide from IE-mac */
	}	
	

/* SHARED CSS USED BY BOTH FRONT END AND BACK OFFICE RTE */
body{ font-family:Arial, Helvetica, sans-serif; background: #fff; color:#000; font-size:62.5%;}
.mceContentBody{ font-size: 12px; line-height: 16px; }
p{ margin: 0; padding:0; }

.rte_twoeqcol_left, .rte_twoeqcol_right, .rte_twocol_small_left, .rte_twocol_big_right, .rte_twocol_big_left, .rte_twocol_small_right, .rte_threecol { float: left; margin: 5px 0; padding: 5px 0;}
.rte_twoeqcol_left {width: 48%; }
.rte_twoeqcol_right {width: 48%;}
.rte_twocol_small_left {width: 38%;}
.rte_twocol_big_right {width: 58%;}
.rte_twocol_big_left {width: 58%;}
.rte_twocol_small_right {width: 38%;}
.rte_threecol {width: 31%;}

.mceContentBody .rte_twoeqcol_left, .mceContentBody .rte_twoeqcol_right, .mceContentBody .rte_twocol_small_left, .mceContentBody .rte_twocol_big_right, .mceContentBody .rte_twocol_big_left, .mceContentBody .rte_twocol_small_right, .mceContentBody .rte_threecol {border:1px dotted #999;}
#mceTemplatePreview .rte_twoeqcol_left, #mceTemplatePreview .rte_twoeqcol_right, #mceTemplatePreview .rte_twocol_small_left, #mceTemplatePreview .rte_twocol_big_right, #mceTemplatePreview .rte_twocol_big_left, #mceTemplatePreview .rte_twocol_small_right, #mceTemplatePreview .rte_threecol {border:1px dotted #999;}

.clear {clear:both; }

/* Default contact page styles */
#contactDetails{ width: 100%; overflow:hidden; }

h1, h2, h3, h4{ color: #592e91; font-weight:normal; font-size: 100%; margin: 8px 0; line-height:normal; }
h1{ font-size: 2.0em; }
h2{ font-size: 1.8em; }
h3{ font-size: 1.7em; }
h4{ font-size: 1.6em; }


a:link 		{} 
a:visited 	{} 
a:hover 	{} 
a:active 	{} 	

img {border:none;}

/* GOOGLE MAP */
#map{ width: 580px; height: 400px; color:#000000; border: 1px solid #A6C1E3; margin: 0 0 15px 0; }
#map div{ font-size: 11px; line-height: 12px; }

/* LINKS PAGE STYLING - Change width on #links_container to make overall width smaller - Liquid Layout*/
#links_container{ width: 520px; font-size: 1.1em; }
#links_container ul{ list-style-type: none; }
#links_container li{ width:100%; overflow:hidden; }
#links_container li a#globe_link, #link_container li a:link#globe_link, #link_container li a:visited#globe_link, #link_container li a:active#globe_link{
background: #fff url(/images/links_icon.gif) no-repeat; width: 34px; height: 34px; display:block; float: left; position:relative; margin: 0 10px 10px 0; text-indent:-9000px;
}
#links_container li a:hover#globe_link{ }
/* THIS OVERRIDES STYLES ON THE LI */
#links_container .withdesc, #links_container .nodesc{ border: 1px solid #dddddd; margin: 0 0 10px 0; font-weight: bold; padding: 5px 5px 5px 5px; }
#links_container .withdesc{  }
#links_container .nodesc{ }
/* THIS IS THE ACTUAL CONTENTS STYLING - TITLE IS USED ONLY TO CLEAR THE 2 FLOATING CLASSES */
#links_container .title{ display:block; width: 90%; overflow:hidden; }
#links_container .left, #links_container .right{ display:block; margin: 0 0 5px 0; }
#links_container .left{ width: 65%; float:left; position:relative; }
#links_container .right{ width: 30%; float:right; position:relative; text-align:right; }
#links_container .desc{ font-weight: normal; display:block; width: 90%; float:left; position:relative; padding: 1px; }
/* ALL LINKS WILL BE USING GLOBAL STYLES UNLESS CHANGED BELOW */ 
#links_container a,#links_container a:link,#links_container a:active,#links_container a:visited{ color: #000; }
#links_container a:hover{  }


/* CASE STUDIES SPECIFIC STYLING */
#case_studies{ width: 100%; }
#case_studies .container{ width: 100%; overflow:hidden; margin: 0 0 20px 0; border-top: 1px solid #f1f1f1; padding: 10px 0 0 0; }
#case_studies h2{ margin: 0 0 10px 0; }
#case_studies .image_container{ width: 200px; border: 1px solid #ccc; margin: 0 5px 20px 20px; background: #f5f5f5; text-align:center; float: right; position: relative;  }
#case_studies .border{ border: 2px solid #fff; padding: 10px; }
#case_studies img{ border: 1px solid #999; padding: 2px; background: #fff; margin: 0 auto 10px auto; }
#case_studies .note{ border: 1px solid #ccc; padding: 2px; margin: 0 0 10px 0; }


/* FAQ STYLING (LEGISLATION) */
#faq_container{ width: 100%; }
#faq_container ul{ list-style-type: none; }
#faq_container li{ list-style-type: none; margin: 0 0 10px 0; border-top: 1px solid #f1f1f1; }
#faq_container a{ font-weight: normal; display:block; padding: 10px 0; background: #f5f5f5; color: #444; }
#faq_container a:hover{ text-decoration: none; color: #000; }

/* Events Calendar CSS*/

#events_table { border:1px solid #925F93; width:535px; margin:10px 0;}
#events_table td { border:1px solid #e7e7e7; border-top:none; border-left:none; text-align:center;}
#events_table td.none { background-color:#f4f4f4;}
#events_table a { background:#ffe8d6; border:1px solid #fff; border-right-color:#ffb579; border-bottom-color:#ffb579; color:#000; font-weight:bold; display:block; width:100%;}
#events_table a.calMonthSelect { display:inline; text-decoration:none;}
#events_table a:active { border:1px solid #F5822A;}
#events_table a:hover { background:#F5822A; color:#fff;}
#events_table .header { background:#DABFDB;}
#events_table .header td { width:76px; font-weight:bold; background:#DABFDB; border:1px solid #925F93; border-top-color:#f7f1f7; border-left-color:#f7f1f7;}

#events_list {}
#events_list ul { margin:10px 0 30px 30px; padding:0; list-style-image: url(/images/icon_page.gif);}
#events_list li { margin:5px 0;}

/* LiquidWeb Specific Styles Please Leave*/

fieldset.hidden { margin:0; padding:0; border:none;}
.nifty_content { padding:5px 10px 10px 10px;}

.req {color:#ff9900; font-size:1.6em;}

#nifty{ background: #DDDDDD;}
#nifty b.rtop, #nifty b.rbottom{display:block;background: #fff;}
#nifty b.rtop b, #nifty b.rbottom b{display:block;height: 1px; overflow: hidden; background: #DDDDDD}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
.nifty_content { padding:5px 10px 10px 10px;}

#horizlist { position:relative; z-index:50;}
#horizlist ul { margin:5px 0 10px 10px; padding:0; list-style-type:none;}
#horizlist li { margin:0 10px 5px 0;}
#horizlist li a.current { font-weight:bold; color:#000; padding:3px;}

#news_list {}
#news_list ul { margin:20px 0 20px 5px; padding:0; list-style-type:none;}
#news_list li { margin:15px 0;}

/***************************
*    SITEMAKERS BUBBLE
***************************/

.balloon { text-align:left; width:80px; height:15px; z-index:10; position:absolute; top:10px; right:10px; line-height:1.6em;}
.balloon a, .balloon a:visited {display:block; text-decoration:none; color:#000; width:80px; height:15px; background:transparent;}
.balloon a img, .balloon a:visited img {}
.balloon dl {visibility:hidden;position:absolute; top:-200px; left:-200px}

.balloon table {margin:-2px;border:0;padding:0;border-collapse:collapse;font-size:1em;}

.balloon dl {width:210px; padding:0 0 13px 0; background:#FF9900; border:1px solid #000; font-size:1.2em;}
.balloon dt {margin:0; padding:5px; font-weight:bold; color:#fff; text-align:center;}
.balloon dd {margin:0; padding:5px 15px; color:#000; background:#fff; font-weight:normal;}

/* specific to non IE browsers and IE7 first with IE5.5 and IE6 second */
.balloon:hover, .balloon a:hover {cursor:pointer; text-decoration:none;}
.balloon:hover dl,.balloon a:hover dl {visibility:visible; color:#000; top:-190px; left:-115px; cursor:default;}
.balloon:hover dl em,.balloon a:hover dl em {display:block;position:absolute;left:0px;top:159px;width:210px; height:35px;background:transparent url(/images/pointer.gif) no-repeat 125px;}
.balloon:hover dl a,.balloon a:hover dl a {color:#000; text-decoration:none; font-weight:bold; background:url(/images/icon_sitemakers.gif) left no-repeat; padding-left:20px;}
.balloon:hover dl a:hover,.balloon a:hover dl a:hover {text-decoration:underline;}