

/*******************************************************************************
This style sheet creates a template with fixed width lhs and rhs column and a variable
width central contents area.

MIN/MAX WIDTH NOTE
The code for the bodydiv, sizer and expander divs is taken directly from the
Jello Molds & Width Control by Mike Purvis at: 
http://www.positioniseverything.net/articles/jello-expo.html
(although the expander div has been given a background image).


This code provides a min width, so that if the browser is resized to be smaller than the page,
then the page does not break up too much (with undesirable feature like menus wrapping round).

The max-width code provides a max width of 1000px, but does not work in all browsers, 
although it does for FF and IE.

COLUMN COLOURS
The column colours are set using the expander and expander2 backround images

ROUNDED CORNERS
The rounded corners are produced using 'nifty corners'. For these to work in IE
all colours affected (ie the background colours) must be expressed as a hex value, 
do not use colour names such as 'silver'.

COLOURS
The hex colours used in the style sheet are:

#EEEEEE = Light gray (eg column colour)
#DDDDDD = Medium gray (eg for advert)
#404040 = Dark gray (eg for minor links)
#668CEF = Medium  blue (eg for banner)
#5970B2 = Darker blue (eg for menu background)
#9C0000 = H1 H2 all H codes moved to helper.css


******************************************************************************/

@import url("helper.css");
@import url("alternative_master1.css");

body, body div, body p, body th, body li {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-style : normal;
font-weight : normal;
font-size: 12px;
color : black;
margin: 0px;
}

#bodydiv {
	padding: 0 350px 0 350px;
	text-align: center; /* centering hack for IE5.x/Win */
	background-color: #FFFBE7;
	}

#sizer {
	width: 50%;
	margin: 0 auto 0 auto; /* standard centering method */
	text-align: left; /* resets centering hack to default */
	max-width: 280px;  /* 1000 - 720 = 280 */
	width:expression(document.body.clientWidth > 1300 ? "280px" : "50%" ); /* IE Hack won't validate */
}
	


#expander {
	margin: 0 -360px 0 -360px;
	position: relative;
	text-align: left; 
	 background-image: ;
	 background-repeat: repeat-y;
	
}

#expander2 {
	background-image:;
    background-position: right;
	background-repeat: repeat-y;
}

/* Holly hack for IE \*/
* html #bodydiv,
* html #sizer,
* html #expander { height: 0; }
/* */



#banner
{
	border-bottom: 1px solid gray;
	text-align:left;
	height: 100px;
	background:  url('.././images/GBC-logo-new.png') no-repeat;
	padding:0;
	margin: 0;
	border-top:0;
}



#main
{

	text-align: center;
	line-height: 150%;
}
	



#leftcol
{
	float: left;
	width: 180px;
	margin: 0;
	border:0;
	text-align: center;
	padding-bottom: 0; 	
	text-align: center;
	border-left: 0px solid;
	border-right:0;
	border-top:0 ;
	border-bottom:0; 
	border-color:#668CEF;	
}

#rightcol
{
	float: right;
	width: 180px;
	text-align: center;
	margin: 0;				
	padding-bottom: 0;	
	text-align: center;
	border-right: 0px solid;
	border-left:0;
	border-top:0 ;
	border-bottom:0; 
	border-color:#668CEF;	
}


#content
{
	margin-left: 180px;
	margin-right: 180px;
	text-align: left;
	padding: 10px;
	margin-top: 10px;
	
}

.userContent{
	
}


#footer
{
	clear: both;
	margin: 0;
	color: #333;
	border-top: 1px solid gray;
	height: 20px;
	text-align: center;
	width:100%;
	height:27px;
}



#search_box{
	float: right;
	padding: 1em;
	color: yellow;
}

#pagetitle{
	color:gray;
	clear: both;
}

#metaKeyWords{
	color:gray;
	clear: both;
	padding-left: 35px;
}


.advert {
	
	margin-top: 6px;
	border: solid 1px  #AD1C21;
	width:175px;
	text-align:left;
	padding: 3px;
	color: black;
	background-color: #F0E6CF;
}


/*********************************
	Standard Links
*********************************/
 a:link,  a:visited {
	color: #003C73;
	text-decoration: none;
}

 a:active,  a:hover{
	color: maroon;
	text-decoration: underline;
	
}


/*********************************
	Drop Down Horizontal Menu
*********************************/


#MainMenuHoriz 
{
	text-align: center;
	background-color: #5970B2;
	border-left: 1px solid;
	border-right:1px solid;
	border-top:0 ;
	border-bottom:0; 
	border-top-style: none;
	border-bottom-style: none;	
	border-color:#668CEF;
	margin-top:0;
	padding: 0;
	visibility: visible;
}



#MainMenuHoriz td{
	background-color: #5970B2;
}


#dropDownMenu
{	
	/* margin-left: 17%; */
	padding: 0;
	margin:0;
	z-index: 30

}


#dropDownMenu li
{	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font: bold 11px arial
}

#dropDownMenu li a
{	display: block;
	margin: 0 1px 0 0;
	padding: 4px 5px;
	width: 100px;
	background: #5970B2;
	color: white;
	text-align: center;
	text-decoration: none
}

#dropDownMenu li a:hover
{	
	background: #668CEF;
}

#dropDownMenu div
{	position: absolute;
	visibility: hidden;
	margin: 0;
	padding: 0;
	background: #EAEBD8;
	border: 1px solid #5970B2;
}

#dropDownMenu div a
{	
	position: relative;
	display: block;
	margin: 0;
	padding: 5px 10px;
	width: auto;
	white-space: nowrap;
	text-align: left;
	text-decoration: none;
	background: #EEEEEE;
	color: #5970B2;
	font: 12px arial}

#dropDownMenu div a:hover
{	
	background: #668CEF;
	color: white;
}



/*********************************
	No Script Horizontal Menu
*********************************/

#MainMenuHoriz_noscript
{

	text-align: center;
	background-color: #5970B2;
	border-left: 1px solid;
	border-right:1px solid;
	border-top:0 ;
	border-bottom:0; 
	border-top-style: none;
	border-bottom-style: none;	
	border-color:#668CEF;
	padding:0;
	margin-top:0;
}

#noscript {
	margin:0;
	padding:0;
}

#noscript table{
	margin:0;
	padding:0;
}

#noscript td{
	background-color: #5970B2;
	padding:10px;
	font-size: 12px;
}

.noscript_separator{
	color: #404040;
}

.noscript_label{
	color: silver;
}

#noscript a:link, #noscript a:visited{
	color:#DDDDDD;
}

#noscript a:active, #noscript a:hover{
	color:white;
}


/*********************************
	Vertical Menu
*********************************/

#MainMenuVert{
	background-color: #5970B2;
	text-align: left;
	margin: 10px;
}

#MainMenuVert ul li a:link, #MainMenuVert ul li a:visited
{
	line-height:1.6em;
	list-style-type:  none;
	text-decoration: none;
	color: #ffffff;
}

#MainMenuVert ul li a:active, #MainMenuVert ul li a:hover
{
	
	color: maroon;
	line-height:1.6em;
	
}

#MainMenuVert li{
	list-style-type:  none;
}


/*********************************
	Vertical Expandable Menu
*********************************/

#MainMenuVertExpandableDiv{
	

	margin-right: 5px;
	margin-top: 10px;
	margin-bottom: 5px;
	padding-top: 5px;
	padding-right: 3px;
	padding-left: 0px;
	background-color: #FFCC80;
	border: solid 1px #AD1C21;
	color: #151515;
	width:175px;
	margin-left: 1px;
}


#MainMenuVertExpandable{
	background-color: #FFCC80;
	color: #151515;
	text-align: left;
	padding-left: 10px;
	margin-left: 5px;
}

#MainMenuVertExpandable ul li a:link, #MainMenuVertExpandable ul li a:visited
{
	line-height:1.6em;
	list-style-type:  none;
	text-decoration: none;
}

#MainMenuVertExpandable ul li a:active, #MainMenuVertExpandable ul li a:hover
{
	color: maroon;
	line-height:1.6em;
	list-style-type:  none;
	text-decoration: underline;
	color: #151515;
}

#MainMenuVertExpandable li{
	list-style-type:  none;
	color: #151515;
}

.MainMenuItem  a:link, .MainMenuItem  a:visited
{
	color:black;
	line-height:1.6em;
	list-style-type:  none;
	text-decoration: none;
}

.MainMenuItem  a:active, .MainMenuItem  a:hover
{
	color: maroon;
	line-height: 1.6em;
	list-style-type: none;
	text-decoration: underline;
}


.expandableHeading{
	color:black;
	font-weight : normal;
}

.menuItemFont  a:link, .menuItemFont  a:visited{
	color:black;
	font-weight : normal;
}

.menuItemFont   a:active, .menuItemFont   a:hover
{
	color: red;
	font-weight : normal;
}

/*********************************
	Footer Menu Links
*********************************/

#footermenu{
padding-top: 5px;
font-size:10px;
}

#footermenu a:link, #footermenu a:visited {
	color: #404040;
	text-decoration: underline;
}

#footermenu a:active, #footermenu a:hover{
	color:maroon;
	 text-decoration: underline;
}


.footermenu_separator{
	color: #404040;
}

#poweredby{
	float: right;
	width: 200px;
	padding-top: 5px;
	padding-right: 5px;
	text-align:right;
	font-size:10px;
}



#poweredby a:link, #poweredby a:visited {
	color: #404040;
	text-decoration: underline;
}

#poweredby a:active, #poweredby a:hover{
	color:white;
	 text-decoration: underline;
	 font-size:10px;
}

#copyright{
	float: left;
	width: 200px;
	font-size:10px;
	padding-top: 5px;
	padding-left: 5px;
	text-align:left;
	color: #404040;
}

/*********************************
	Accessibility
*********************************/


#accessibility{
	float: left;
	padding: 1em;
}

#accessibility a:link, #accessibility a:visited {
	color: #404040;
	text-decoration: underline;
}

#accessibility a:active, #accessibility a:hover{
	color:white;
	 text-decoration: underline;
}


.accessibilityLink
{
	color: #404040;
}

.accessinilityLinkSeparator{
	color: #404040;
}


/*********************************
	Messages
*********************************/

#error{
	background-color: maroon;			
	color: white;
	margin-bottom: 10px;
	text-align: center;
}

#status{
	color: gray;
	margin-bottom: 10px;
	text-align: center;
}

#welcome{
	color: gray;
	margin-bottom: 10px;
	text-align: center;
}

/*********************************
	Headings and General Purpose
*********************************/

.stdText{
	font-size: 12px;
}

.centre{
	text-align: center;
}


table{
	font-size: 12px;
}


.table-search-box-outer{
	background-color:#DDDDDD;
	width:100%;
	text-align:center;
	font-size: 12px;
}

.table-search-box{
	display: table;
	margin-left: auto; margin-right: auto; 
	
}

.control-settings{
	font-size:10px;
}

.highlight{
	color:#668CEF;
}


.centreDivOuter{
	text-align: center;
	width: 100%;
}

.centreDiv{
	margin-left: auto;
	margin-right: auto;
	width: 80%;
}

.centreDivOuter{
	text-align: center;
	width: 100%;
}




/*********************************
	Forms
*********************************/

fieldset {
		padding: 0 5px 5px 5px;
		border: solid 1px gray;
		font-size: 12px;
		margin: 10px;
	}
	
legend {
		padding: 5px;
		color: gray;
	}
	
label {
	padding-right: 10px;
	font-size: 11px;
}
	
select {
	display: block;
	
}

input {
	display: block;
}

input.submit {
	display: inline;
	font-size: 12px;
  	color:#fff;
  	display:block;
   	border:none;
	background-color:#DE5110;
	width: 100px;	
	margin: 5px;
	padding: 3px
}

input.submit:hover {
  	color:navy;
}


input.submit-small {
	display: inline;
	font-size: 12px;
  	color:#fff;
  	display:block;
   	border:none;
	background-color:#DE5110;
	width: 60px;	
	margin: 5px;
	padding: 3px
}

input.submit-small:hover {
  	color:navy;
}

/**** old imput **
input.submit-very-small {
	display: inline;
	font-size: 12px;
  	color:#fff;
  	display:block;
   	border:none;
	background-color:#DE5110;
	width: 25px;	
	margin: 5px;
	padding: 3px
}
***/
input.submit-very-small {
	display: inline;
	font-size: 11px;
	color: #B35A00;
	font-weight: bold;
	display: block;
	border: solid;
	border-width: 2px;
	border-top-color: #FFC080;
	border-bottom-color: #B35A00;
	border-left-color: #FFC080;
	border-right-color: #B35A00;
	text-align: left;
	background-color: #FFDFBF;
	width: 30px;
	margin: 5px;
	padding: 2px;
	
}

input.submit-very-small:hover {
  	color:navy;
	font-weight: bold;
}



#field_set_buttons{
	
	padding: 10px;
	margin: 10px auto;
}



/*********************************
Query Product, Review, News and Events
*********************************/

.product_detail{
	width:100%;
	
}

.subQueryContent{
	
	padding: 10px 0 0 0;
	margin: 0;
	display: table;
}



.subQueryContent h1{
	margin-left: 10px;
	text-align:left;
}


.query{
	width:100%;
	text-align:center;
} 

.queryLine{
	
	text-align:left;
	padding: 10px;
	margin-top: 0px;
	margin-bottom: 10px;
	margin-right: 10px;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid #FFCC80;
	font-size: 12px;
	
}

.queyPageLink{
}

.queyPageLink a:link, .queyPageLink a:visited {
	color : black;
	text-decoration: underline;
}

.queyPageLink a:active, .queyPageLink a:hover{
	color: maroon;
	 text-decoration: underline;
}

.queryLine table{
	font-size: 12px;
}

reviewForm{
	text-align:center;
	margin: 10px auto;
	
}

#addreview{
	text-align:center;
}

#addReviewButton{
	display: table;
	margin: 10px auto;
}


.detailRecord{
	font-size: 12px;
	margin: 10px;
	display: table;
	width:100%;
}

/*********************************
Member AccountLogon and Security
*********************************/


#accountFunctionContainer{
	display: table;
	margin: 10px auto;
	text-align:left;
	padding: 10px;
	width: 350px;
}

#accountFunctionContainer h1{
		
}

#accountFunctionContainer a:link,  #accountFunctionContainer a:visited {
	color :black;
	display:inline;
}

#accountFunctionContainer a:active, #accountFunctionContainer a:hover{
	color: maroon;
	display: inline;
}

#newMembers{
	margin-bottom: 30px;
}


#logonPanel{
	text-align:center;
	background-color:#DDDDDD;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	padding-top: 10px;	
	
}

.surnameSearch{
	width: 100%;
	text-align:center;
	background-color: #EEEEEE;
}	

.surnameSearchInner{
	margin-left: auto;
	margin-right:  auto;
	display: table;
}	

.memberNotes{
	width: 100%;
	text-align:center;
}

.memberNotesInner{
	margin-left: auto;
	margin-right:  auto;
	display: table;
}



.memberOrders{
	width: 100%;
	text-align:center;
}

.memberOrders{
	margin-left: auto;
	margin-right:  auto;
	display: table;
}

#memberOrderDetail{
	width:100%;
}

.memberOrderInformation{
	background-color:#EEEEEE;
}

.securityViolation{
	width:100%;
}

/*********************************
Shopping Cart and Order Processing
*********************************/
.caption {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	font-style: normal;
	font-weight: bold;
	color: #40037F;
}

.order{
	width:100%;
}

.order td {
	font-size: 8pt;
	background-color :#EEEEEE;
	border-width: 1px; 
	border-style: solid; 
	border-color:white;

}
	
.order td.order-detail-heading{		
	font-size: 8pt;
	color: white;
	background-color : gray;
}


.order-detail-money{		
	font-size: 8pt;
	font-family:  Courier;
	color: black;
	
}

.checkout{
	width:100%;
}


.callback{
	width:100%;
	text-align:center;
}

.callback-inner{
	width:70%;
	margin-left: auto; margin-right: auto; 
	margin-top: 200px;
}


/*********************************
	Gallery Image Vuewer
*********************************/


#flashcontentOuter{
	text-align:center;
}

#flashcontent{
	background-color: #FFCC80;
	border: solid 1px #AD1C21;
	width: 520px;
	margin-left: auto; margin-right: auto;
}


/*********************************
	JavaScript
*********************************/
.expanderPromptText{
	color:#404040 ;
	
}

/*********************************
	JavaScript
*********************************/

.threadDivOuter{
	text-align:center;
	width: 100%;
}

.threadDiv{
	text-align:center;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

.threadItem{
	background-color: #DDDDDD;
}

