#wrapper 
{ 
 margin: 0 auto; /* centre the wrapper block left-right*/
 padding:  0;
 width: 902px;
}

#header 
{
 color: #333;
 width: 900px;
 float: left;
 border: 1px solid #ccc;
 height: 100px;
 margin: 30px 0px 5px 0px;
 padding: 0px;
 background: #ffffff;
 background-image: url(/images/quarch_logo.jpg);
 background-repeat: no-repeat;
 background-position: left top;
}

#header_right 
{
 margin: 0;
 padding: 0;	
 float: right;
}

#mainbanner
{
    float:right;
	margin: -4px 5px 0 0;
}

#leftindexcolumn 
{ 
 color: #333;
 border: 1px solid #ccc;
 margin: 5px 0px 4px 0px;
 padding: 0;
 height: 466px;
 width: 197px;
 float: left;
 overflow: hidden;
 background: #D0DFF3 url(../images/side_col_header_back2.png) repeat-x;
}

#rightindexcolumn 
{ 
 color: #333;
 border: 1px solid #ccc;
 background: #D0DFF3 url(../images/side_col_header_back2.png) repeat-x;
 margin: 5px 0px 4px 0px;
 padding: 0;
 width: 197px;
 height: 466px;
 float: left;
}

#content 
{ 
 float: left;
 width: 669px;
 min-height:600px;
 color: #333;
 border: 1px solid #ccc;
 background: #EEEEEE;
 margin:  5px 4px 5px 0px; 
 padding: 15px 15px 0px 15px;
 display: inline;
}

#rightcolumn 
{ 
 color: #333;
 border: 1px solid #ccc;
 background: #D0DFF3 url(../images/side_col_header_back2.png) repeat-x;
 margin: 5px 0 4px 0; 
 width: 195px;
 float: left;
 padding: 0px 0px 15px 0px;
 min-height:600px;
}

#footer 
{ 
 width: 900px;
 height: 100px;
 clear: both;
 color: #333;
 border: 1px solid #ccc;
 background: #BD9C8C;
 margin: 0px 0px 10px 0px;
 padding:0;
 background: url(../images/quarch_footer_back.jpg) repeat-x;
}

#footer_right 
{
 background-image: url(../images/quarch_footer_right.jpg);
 background-repeat: no-repeat;
 background-position: right bottom;
 height: 100px;
 width: 100%;
 float: right;
}


#indexcontent 
{ 
 float: left;
 color: #333;
 margin: 5px 4px 0px 0px;
 padding: 0;
 width: 500px;
 display: inline;
 text-align:center;
}

.menubar
{
    float: right;
	width: 100%;
	
	background-image: url(../images/menuback.png);
	background-repeat: repeat-x;
}


/* content layout css */
.section
{
	margin:30px 0px 20px 0px;
	padding:0px 20px 0px 15px;
}

.subsection
{
	background:#e8e8e8;
	margin:30px 0 30px 0;
	padding:0 15px 5px 15px;
	border: 1px solid #ccc;
	/*clear:both;*/
	overflow:hidden;
}

.newsarticle
{
	margin-top:40px;
	margin-bottom:20px;
	padding:0 10px 10px 10px;
	border: 1px solid #ccc; 
/*	-moz-border-radius: 1em; 
	-webkit-border-radius: 1em;*/ 

}
.newsarticle h2
{

	font-size:1.4em;

}

.contacts-box
{
	padding:10px 10px 10px 30px;
	border: 1px solid #ccc; 
	/*-moz-border-radius: 1em; 
	-webkit-border-radius: 1em;*/ 
	margin-left:60px; 
	margin-top:20px;
	margin-bottom:10px;
	width:220px; 
	float:left;	

}

.col-header
{
	margin:0 0 10px 0;
}
/* general styling */
body 
{
 font-size:100%;
 line-height:1em;
 font-family: calibri, sans-serif;
 margin: 0px;
 padding: 0px;
}


img
{
	border:none;
	padding:0;
	margin:10px 0 0 0;
}

a:link 
{
	text-decoration: none;
	color:#1e479f;
}
a:visited 
{
	text-decoration: none;
	color:#1e479f;
}

a:active 
{
	text-decoration: none
}
a:hover 
{
	text-decoration: none;
	color:red;
}
a.page_anchor:hover
{
	color:#2e4c5e;
}

h1
{
	color:white;
	font-size:1.9em;
	line-height:1em;
	margin:20px 0px 20px 0px;
	padding:4px 4px 4px 10px;
	background: #4774ae;

}

h2 
{
	margin: 20px 15px 20px 0px;
	padding:0;
	font-size:1.5em;
	font-weight:600;
	color:#2e4c5e;
}

h3
{
	margin:20px 0px 20px 0px;
	padding:0;
	font-size:1.4em;	
	font-style:normal;	
	color:#2e4c5e;

}



p 
{
	font-size: 0.96em;
	margin: 13px 0px 13px 0px;
	padding: 0 0 0 0;
}
.sidebar p
{
	font-size: 0.9em;
	margin:0 0 6px 0;
	padding: 0 0 0 0px;
	
}
/*
.section ul 
{
	margin: 0 0 15px 0px;
	padding: 0;
}
.section li 
{
	margin: 0 0 0 25px;
	padding: 0 0 0 0;
	font-size: 0.95em;
}
*/
.benefit-list ul {
	margin: 0;
	padding: 0;
}
.benefit-list li {
	margin: 0 0 0 15px;
	padding: 0 0 0 0;
}
.link-list {
	margin: 0 0 5px 0;
}
.link-list ul {
	list-style-type: none;
	margin: 0 0 15px 0;
	padding: 0;
}
.link-list li {
	margin: 0 0 0 15px; 
  padding: 0;
}
#indexcontent a {
	margin: 0; padding: 0;
}
#indexcontent img:hover {
	margin: 0; padding: 0;
	border:solid 2px #0f75ff;
}
#indexcontent:hover {
color: red; border: 0px ;
}
#indexcontent img {
	margin: 0;	padding: 0;
	border:solid 2px white;
}
#indexcontent img.middle {
	margin: 0; padding: 0;
}



.sidebar {
	margin:0 8px 0 8px;
}
.sidebar h1 
{
	text-align: center;
	margin: 3px 0 0 0;
	padding: 3px 0;
	font-size: 1.2em;
	color:#2e4c5e;
	background: none;
}


.sidebar h2 
{
	margin: 0 0 3px 0 ;
	padding: 0;
	font-size:1em;
	font-style:normal;
	
}

.sidebar p.date 
{
	margin: 0 0 3px 0;
	padding: 0;
	font-size:0.9em;
	color: black;
	font-style: italic;
}


.contacts p.addr
{
	margin: 0 0 2px 0;
}

.contacts h3
{
	margin:5px 0 5px 0px;

}



.gmap
{
	margin: 40px auto 30px auto;
	padding: 0;
	width: 508px;
		
}

.gmap a
{
	margin:0;
	padding: 5px 5px 5px 5px;
	font-size:110%;
}

.centered {
	text-align:center;
}

.std-pic {
	position: relative;
	display: block;
}
.std-img img {        
	border:4px solid #ccc;
	padding: 4px; /*inner border size*/
	background: #ddd; /*inner border colour*/
	margin-bottom:10px;
}
.std-img p {
	color: #3f3d3b;
	font-style:italic;
	padding-left:5px;
	margin-top:-2px;
}

#ppic_capt {
	color: #3f3d3b;
	font-style:italic;
	padding-left:5px;
	margin-top:0px;
}

/* Product Pics css */
.ppics-center {
  position:relative;
  height:290px;
  margin: 13px 0 0 0;
  padding-bottom:60px;
  text-align:center;
  display: block; /*--For inline elements only--*/  
}
.ppics-container {
	height: 290x;  width:566px;
	margin:0; padding:0;
	position:absolute;
	top: 50%; left: 50%;
	margin-top:-145px;
	margin-left:-283px;
}
#main-pic {
  width:420px;
  float:left;
  margin:0; padding:0;  
}
#main-pic img {
  border:4px solid #ccc;
  margin:2px;
	padding: 2px;	background: #ddd; /*inner border*/
	width:389px; height:274px;
} 
#main-pic-single img {
  border:4px solid #ccc;
  margin:2px;
	padding: 2px;	background: #ddd; /*inner border*/
	width:389px; height:274px;
} 
ul.thumb {
  float:left;
	list-style: none;
	margin:0; padding:0;
}
ul.thumb li {
	margin:0; padding:0;
}
ul.thumb li img {
	width: 112px; height: 79px;
	-ms-interpolation-mode: bicubic;
  border:4px solid #ccc;
	padding: 2px; /*inner border size*/
	background: #ddd; /*inner border colour*/
	margin: 2px 2px;
}
ul.thumb li img.hover { /*applied by js when hover*/
  border:4px solid #858585;
	padding: 2px; /*inner border size*/
	background: #ddd; /*inner border colour*/
}


ul.pic-list img {
  border:4px solid #ccc;
  margin:0;
	padding: 2px;	background: #ddd; /*inner border*/
	width:75px;
}
ul.pic-list {
	list-style: none;
	margin:0 0 10px 15px; padding:0;
}
ul.pic-list li {
  display:inline;
  margin:0; padding:0;
}

ul.ProductColumn {
  width:100%;
  padding:0;
  margin: 2px 0 4px 0;
  list-style: none;

}

ul.ProductColumn li {
  float:left;
  width:108px;
  padding:0;
  margin:2px 0 2px 0;
  display:inline;
}

.ProductBlock  {
  height: 98px;
  margin: 0 4px 0 0;
  padding:1px;
  text-align:center;
}

.ProductBlock img {
  width:75px;
  border:4px solid #ccc;
  margin:2px 0 6px 0;
	padding: 2px;	background: #ddd; /*inner border*/
}

.ProductBlock p {
  margin:0;
  padding:0;
}



/* menu styling */

/* - - - ADxMenu: BASIC styles [ MANDATORY ] - - - */
/* --- menu is now a mashup of ADxMenu and jquery to make menus slide ---*/

/* remove all list stylings */
.menu, .menu ul {
	margin: 0; 	padding: 0; border: 0;
	list-style-type: none;
	display: block;
}

.menu li {
	margin: 0;	padding: 0;
	/*border: 0;*/
	border-style: solid;
	border-width: 0px 1px 0px 0px;
	border-color: #8C8C8C;
  display: block;
	float: left;		  /* move all main list items into one row, by floating them */
	position: relative;	  /* position each LI, thus creating potential IE.win overlap problem */
	z-index: 5;			  /* thus we need to apply explicit z-index here... */
}
.menu li:hover {
	z-index: 10000;	/* ...and here. this makes sure active item is always above anything else in the menu */
	white-space: normal;/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present)
							see http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp for other stuff that work */
}
.menu li li {
	float: none;/* items of the nested menus are kept on separate lines */
}
.menu ul {
	display:none;	/* initially hide all submenus. */
	position: absolute;
	z-index: 10;
	left: 0;	/* while hidden, always keep them at the top left corner, */
	top: 0;		/* 		to avoid scrollbars as much as possible */
}
.menu li ul {
	top: 100%;	/* 1st level go below their parent item */
}
.menu li li ul {	/* 2nd+ levels go on the right side of the parent item */
	top: 0;
	left: 100%;
} 
/* -- sticky.submenu --
	it should not disappear when your mouse moves a bit outside the submenu
	YOU SHOULD NOT STYLE the background of the ".menu UL" or this feature may not work properly!
	if you do it, make sure you 110% know what you do */
.menu ul {
	background-image: url(empty.gif);	/* required for sticky to work in IE6 and IE7 - due to their (different) hover bugs */
	padding: 10px 30px 30px 30px;
	margin: -10px 0 0 -30px;
	/*background: #f00;	*//* uncomment this if you want to see the "safe" area.
								you can also use to adjust the safe area to your requirement */
}  
.menu ul ul {
	padding: 30px 30px 30px 10px;
	margin: -30px 0 0 -10px;
}

.menu {
  width:900px;
	color: white;
	font-family: Calibri, "Trebuchet MS", sans-serif;
	font-size: 1em;
	border-style: solid 1px #8C8C8C;
	padding:0;
	margin-bottom: 0px
}
.menu ul li {
	background-color: #003F90;
	color:#eee;
	font-size: 0.94em;
}
.menu ul {
	width: 14em;
}
.menu ul ul {
	width: 14em;
}
.menu ul ul ul {
	width: 20em;
}
.menu a {
	text-decoration: none;
	color: white;
	
	display: block;
	position: relative;
	padding-top: 9px;
	padding-bottom: 8px;	
	padding-right:25px;
	padding-left:25px;
	margin:0px;
}
.menu a:hover, .menu li:hover>a {
color:#d0dff3;
background-color: #0f75ff; /*set the background colour of a link with mouseover */
}
.menu li li {	/* create borders around each item */
	border: 1px solid #ccc;
	
}
.menu ul>li + li {	/* and remove the top border on all but first item in the list */
	border-top: 0;
}

.menu li li>ul {	/* inset 2nd+ submenus, to show off overlapping */
	top: 5px;
	left: 90%;
} 
.menudown {
	background-image: url(../images/menu_down_arrow.gif);
	background-repeat: no-repeat;
	background-position: 95% 90%;
}
.menuright {
	background-image:url(../images/menu_right_arrow.gif);
	background-repeat: no-repeat;
	background-position: 90% 55%;
}