/* Import the other stylesheets into main.css */
@import url("QP-design-layout.css");
@import url("QP-design-styles.css");
 @import url("QP-nav-styles.css");
/*@import url("QP-border-guides.css");
comment out QP-border-guides.css to hide */

/* Global reset */

*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h5, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h5, h5, h6 { font-size:100% }
q:before, q:after { content:''}

/* Global reset-RESET */
/* The below restores some sensible defaults */

strong { font-weight: bold }
em { font-style: italic }
ol, ul, li { list-style:none }
* a { position:relative } /* Gets links displaying over a PNG background */
a { outline:none } /* Gets rid of Firefox's dashed borders */
a img { border:none } /* Gets rid of IE's blue borders */

br { clear:both; height:1px; margin:-1px 0 0 0 }


/* end of reset css */
	
body { font-size: small; text-align: center; background: #fff url(../DesignImages/Background_repeat.jpg) 0 0 repeat-x; }
* html body { font-size: x-small; /* for IE5/Win */
f\ont-size: small; /* for other IE versions */
}
.skipper {display: none;}
#extraText {display: none;}
#container { /*-- use if centered first figure is top margin change to suit --*/ margin: 0px auto 0; 
position:relative; 	
padding: 0; 
text-align: left;  
width: 960px; /* use for main background usually set to repeat downwards */ 
background:  url(../DesignImages/contentBackground-repeat.jpg) 0 0 repeat-y; }
#containerback { margin:0; /* can be used for more complex layered background efects where a simple repeating back ground in the container above is not enough */  
background: transparent ;  }

#pageHeader { 
margin: 0 ; 
padding: 0 ;  
width: 100%; 
background: url(../DesignImages/TopBanner.jpg) 0 0 no-repeat; 
height: 132px;}

#pageHeader h1 { /*-- do not remove or change padding and margin --*/ padding: 0; margin: 0; line-height: 1px; height: 2px; }
#pageHeader h1 span { visibility: hidden; line-height: 1px; height: 2px; /*-- do not remove or change padding and margin --*/ padding: 0 ; margin: 0 ; }
#wrapper {padding: 0  ; margin: 0 ; }
#spacer { clear:both; padding: 0; margin: 0; }

#Home #main { 
padding:0; 
margin: 370px 0 0  0; /* use to display extra backround over main background*/ /* use to put background behind top of page content */  background: #fff  ;   }

#main { 
padding:0; 
margin: 200px 0 0  0; /* use to display extra backround over main background*/ /* use to put background behind top of page content */  background: #fff  ;   }


/*-- Next controls page layout and sets column and content widths --*/

#QPpageContent { 
float:left;   
height: 1%;
/* width of main content area - set margin-right of left panel to same width--*/ 
width:660px;  
background: transparent;
margin: 0;	
padding-top: 0; }

#leftpannel {position: absolute; top: 0; right: 0;	 
height: 100px; 
display: table; 
margin-right:0; 
width:540px; 
margin-top:20px; 
/* can add top backgound to left nav pannel, top padding is also needed to show image */	
background: transparent; padding-top: 0px;}

/*-- Page content layout  --*/
#contentMain { height: 1%; display: table; width:100%;   padding: 0 ;   }

.ContentArea { float: left; 

width: 540px;
margin: 20px 0 10px 70px;
padding: 0 0 5px 0;
line-height: normal;
min-height:500px;
 
}

/*-- image possition below menu i.e.logo --*/
.menuBase {  
background:  url(../DesignImages/menuBase.jpg) top left no-repeat; 
height: 30px; 
padding: 0; 
margin:  0; 
width: 100%; }
/*-- image possition below menu i.e.logo this panel is 
independent of the navlist and requires a fixed pixel width --*/
.belowMenu { display: none; 
height:1px; 
background:  transparent ; 
width: 1px; 
padding: 0; 
margin: 0; }


/* footer */
#footer {text-align: left; margin: 0 ; height:130px; /*-- footer text possition & color --*/   padding: 100px 0 0 75px ; font-size:10px;
	/*-- footer background image --*/ background: url(../DesignImages/footer.gif) top left no-repeat; color:#D0D1E1; font-size: 70%;}
/*-- footer --*/
#footer { clear:both;  }

#footer span { }
#footer a { color:#D0D1E1;}
#footer span a { padding-left: 10px; padding-right: 0px; text-decoration: none;  }
#footer p {margin: 0; padding: 0;  }


#listpanel {
	position:absolute;
	top: 145px;
	left:653px;
	height: 660px;
	width: 297px;
	background:url(../DesignImages/list-panel.png) 0 0 no-repeat;
	overflow: hidden;
}

#Home #listpanel {
	position:absolute;
	top: 337px;
	left:653px;
	height: 660px;
	width: 297px;
	background:url(../DesignImages/list-panel.png) 0 0 no-repeat;
	overflow: hidden;
	
}

#listpanel  h4 { font-family:Arial, Helvetica, sans-serif; font-weight: bold; color:#FFF; margin:50px 0 10px 28px; font-size: 24px;}
#listpanel ul { margin: 20px 20px 20px 28px; padding:0;}
#listpanel li { background:url(../DesignImages/bullet.png) 0 3px  no-repeat; list-style:none; padding: 0  20px; margin: 0 0 0 0; color:#FFF; }
#listpanel  h4 strong { color: #007698;}

#Home #infoTopLeft {
	position:absolute;
	top: 201px;
	left:85px;
	height: 160px;
	width: 256px;
	overflow: hidden;  color:#FFF; font-size: .9em;   
}

#infoTopLeft {
	position:absolute;
	top: 10px;
	left:85px;
	height: 160px;
	width: 256px;
	overflow: hidden;  color:#FFF; font-size: .9em;   
}

#infoTopLeft p { line-height: 1.2em; margin-bottom: 15px;}
	
	#infoTopLeft  h4 { font-family:Arial, Helvetica, sans-serif; font-weight: bold; color:#FFF; margin:0px 0 20px 0px; font-size: 24px;}
	#infoTopLeft  h4 strong{ color:#99d7db;}
	
 


#infoTopMid {
	position:absolute;
	top: 10px;
	left:365px;
	height: 160px;
	width: 256px;
	overflow: hidden;
	 
	color:#FFF; font-size: .9em;  
}

#Home #infoTopMid {
	position:absolute;
	top: 201px;
	left:365px;
	height: 160px;
	width: 256px;
	overflow: hidden;
	 
	color:#FFF; font-size: .9em;  
}

#infoTopMid p { line-height: 1.2em; margin-bottom: 15px;}
	
	#infoTopMid  h4 { font-family:Arial, Helvetica, sans-serif; font-weight: bold; color:#FFF; margin:0px 0 20px 0px; font-size: 24px;}
	#infoTopMid  h4 strong{ color:#99d7db;}
	
 
	
	#infoTopRight {
	position:absolute;
	top: 10px;
	left:665px;
	height: 160px;
	width: 256px;
	overflow: hidden;
	
	color:#FFF; font-size: .9em;  
}


	#Home #infoTopRight {
	position:absolute;
	top: 201px;
	left:665px;
	height: 160px;
	width: 256px;
	overflow: hidden;
	
	color:#FFF; font-size: .9em;  
}

#infoTopRight p { line-height: 1.2em; margin-bottom: 15px;}
	
	#infoTopRight  h4 { font-family:Arial, Helvetica, sans-serif; font-weight: bold; color:#FFF; margin:0px 0 20px 0px; font-size: 24px;}
	#infoTopRight  h4 strong{ color:#99d7db;}
	
 


a.more { position: absolute ; bottom: 15px; color:#FFF; text-decoration: none; display: block; padding: 5px 0 0 0; width: 240px; height: 25px; font-size: 16px; font-weight: bold; background:url(../DesignImages/go-btn.png) top right no-repeat;}
a.more  strong{ color:#99d7db;}
a.more:hover{ color:#99d7db;}

#SocialIcons {margin:0; padding:0; position:absolute; width:150px; height:62px; right:10px; top:605px; z-index:2000;}