/**
 * Foyer CSS Stylesheet
 *
 * This stylesheet is specifically for the teaktocks.com front 
 * pages, also known as the foyer to /myshop.
 * Some elements have been adopted from the main css stylesheet.
 * The remainder are self-developed.
 * 
 * Modified 4/28/10 LM - installed 4/29/10
 */


body {
	margin: 0;
	font-family: arial, helvetica, sans-serif;
	font-size: 80%; 
	color: #000000;
	background-color: #CCCCFF; 
	}

a img {border: none; }

a:link, ul li a {
	color: #0000CC; 
	text-decoration: none;
	}
 
a:visited {
	color: #330000; 
	text-decoration: none;
	}

a:hover, ul li a, #navMain ul li a:hover {
	color: #FF0000;
	}

a:active {
	color: #0000FF;
	}

h1 {
	font-size: 1.5em;
	}

h2 {
	font-size: 1.4em;
	}

h3 {
	font-size: 1.3em;
	}

h4, h5, h6, LABEL, h4.optionName, .larger{
	font-size: 1.1em;
	}
	
.sideBoxContent{
font-size: 1em; /* from 1.1em LM 20080203 */
}	

.biggerText {
	font-size: 1.2em;
	}

h1, h2, h3, h4, h5, h6 {
	margin: 0.3em 3px;
}


#logo {
	text-align: center;
	border: thick double #9999FF;  /* LM 20080203 */
	}


.clearBoth {
	clear: both;
	}

HR {
	height: 1px;
	margin-top: 0.5em;
	border: none;
	border-bottom: 1px solid #9a9a9a;
	}


/*wrappers - page or section containers*/
#mainWrapper {
/*	background-color: #ffffff; */
	background-color: #CCCCCC; /* LM 20080128 */
	text-align: left;
	width: 100%;
	vertical-align: top;
	}

#headerWrapper, #contentMainWrapper, #logoWrapper,  #mainWrapper, #popupAdditionalImage, #popupImage {
	background-color: #CCCCFF;   /*  Added background color LM 20080128 ????*/
	margin: 0em;
	padding: 0em;
	}

#mainWrapper {
	margin: auto;
	} 

#tagline {
	color:#000000;
	font-size: 2em;
	text-align : center;
	vertical-align: middle;
	}

.floatingBox {
	margin: 0;
	width: 47%;
	}

/*Image Display*/

/*Changes made 4/28/10 to have a more flexible display and allow more text - LM*/

.upperLeft {
/*	position: fixed; top: 115px; left: 5%; */
	float: left;
	margin: 0 0 0 2em; 
/*	width: 200px;  */
	width: 14%;
	height: auto;
	background-color: #CCCCFF;
	border: thick double #9999FF;
		}
.upperRight {
/*	position: fixed; top: 115px; right: 5%; */
	float: right;
	margin: 0 2em 0 0;
/*	width: 180px;  */
	width: 16%;
	height: auto;
	background-color: #CCCCFF;
	border: thick double #9999FF;
		}
.lowerLeft {
/*	position: fixed; bottom: 20px; left: 5%; */
    clear: both;
	float: left;
	margin: 0 0 0 2em;
/*	width: 240px;  */
	width: 16%;
	height: auto;
	background-color: #CCCCFF;
	border: thick double #9999FF;
		}
.lowerRight {
/*	position: fixed; bottom: 20px; right: 5%; */
	float: right;
	margin: 0 2em 0 0;
/*	width: 200px;  */
	width: 16%; 
	height: auto;
	background-color: #CCCCFF;
	border: thick double #9999FF;
		}						
.centerSpot {
 	display: block;
 	clear: none;
 	float: left;
	margin: 2em 2em 2em 2em;
/*	width: 300px;  */
	width: 35%; 
	height: auto;
	background-color: #CCCCFF;
	border: thick double #9999FF;
		}


CAPTION {
	/*display: none;*/
	}

	
.textLeft {
	float: left;
 	clear: right;  
	margin: 2em 2em 2em 2em;
/*	display: block; */
/*	width: 200px;  */
	width: 30%;
	text-align: left;
	}
	
.textRight {
	float: right;
	margin: 2em 2em 2em 2em;
/*	display: block; */
/*	width: 200px;  */
	width: 30%;
	text-align: left;
	}
	
.textCenter {
/*	clear: both; */
	float: none;
	margin: 0 auto;
/* 	display: block; */
/*	width: 400px;  */
	width: 60%;
	text-align: center;
	}
	
.dummyCenter {
/*	clear: both; */
	float: none;
	margin: 0 auto;
/* 	display: block; */
/*	width: 400px;  */
	width: 35%;
	text-align: center;
	}
	
.textBottom {
/*	clear: both; */
	margin: 2em auto;
 	display: block;
/*	width: 400px;  */
	width: 40%;
	text-align: center;
	}	
	
#lookAtMe {
	color: #996633;
	}
	
#whiteItalic {
	color: #ffffff;
	font-style: italic;
	font-size: 85%;
	}


/*misc*/
.back {
	float: left;
	}

.forward {
	float: right;
	}

.bold {
	font-weight: bold;
	}


.hiddenField {
	display: none;
}
.visibleField {
	display: inline;
}