/* clmain.css - CSS File for www.thecharcoalburner.com 2009 version */

/* -------------------------------------------------------------------------------- */
/*  Reset section adapted from...
/* http://meyerweb.com/eric/tools/css/reset/
/* v1.0 | 20080212 */
/* -------------------------------------------------------------------------------- */

html {
  font-size: 100%;      /* allow for odd behaviour in IE & == 16px browser standard */
	overflow-y: scroll;    /*forces a scroll-bar on the right so that pages don't jump */
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, h7, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
/*	font-size: 100%;
	vertical-align: baseline; */
	background: transparent;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	/*content: none;  commented out for validation*/
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}

del {
	text-decoration: line-through;
}

input, textarea, select {
	font-size: inherit;
}

input {margin:0;}

textarea {overflow-y:auto;}

/***********************************FONTS**********************************************/

@font-face {
	font-family: 'HollaRegular';
	src: url('HollaScript-webfont.eot');
	src: local('?'), url('HollaScript-webfont.woff') format('woff'), url('HollaScript-webfont.ttf') format('truetype'), url('HollaScript-webfont.svg#webfont') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* -------------------------------- Redefined HTML Styles ---------------------------------- */

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 87.5%; /* set basic text size (87.5% of 16px == 14px */
	/* to enable layout sizes to be defined in ems for scaleability */
	line-height: 1.5em; /*1.25em;*/
	color: #000;
	background-image: url(/images/bbckgdpic022f.jpg); 
	background-repeat: repeat;
	background-attachment: fixed;
	background-position: center top;
	background-color: #fff; 
}

h1 { /* used only for Title in Header */
	color: black; 
	font-family: 'HollaRegular', Arial, Helvetica, sans-serif;
	font-size: 50px;
	line-height: 30px;
	text-align: center;
	padding: 20px 0 0 0;
	letter-spacing: 1px;
	float:left;
	background: white;
}

h2 { /* Events main section titles & thumbnails and fullpic pages*/	
	color: black;  
	font: 2em/0.75em 'HollaRegular', Arial, Helvetica, sans-serif;
	text-align: center;
	padding: 8px 0 12px 0;
	letter-spacing: 1px;
}

h3 { /* Used on Events subsection titles, and Involved*/
	color: black; 
	font-family: 'HollaRegular', Arial, Helvetica, sans-serif;
	font-size: 1.75em;
	text-align: left;
	padding: 8px 0 12px 0;
	letter-spacing: 1px;
}

h4 { /*menu2 header*/
	color: black;  
	font: 2em/0.75em 'HollaRegular', Arial, Helvetica, sans-serif;
	text-align: center;
	padding: 8px 0 12px 0;
	letter-spacing: 1px;
}

h5 { /* products page */
	color: black;  
	font: 2em/0.75em 'HollaRegular', Arial, Helvetica, sans-serif;
	text-align: center;
	padding: 0px 0 12px 0;
	letter-spacing: 1px;
}

h6 a, h6 a:hover {/* links */
	float: left;
	color: black; 
	font-family:'HollaRegular', Arial, Helvetica, sans-serif;
	font-size: 2.5em;
	text-align: right;
	padding: 0 10px 0 20px;
	margin: -4px 0 0 0;
	letter-spacing: 1px;
	text-decoration: none;
	width: 30%;
	/*border: blue dotted 1px;*/
}
.linkdesc {
	float: left;
	width: 63%;
	padding: 0 0 20px 0;
	/*border: red dashed 1px;*/
}

a {	font: 1.4em/0.9em 'HollaRegular', Arial, Helvetica, sans-serif;
	letter-spacing: 0px;
	color: #b21616;
	text-decoration: none;
	font-weight: normal;
}

img.photo{
	border: solid #b21616 1px;
}

a:hover {
	color: #fe0000;
	text-decoration: underline;
}

ul, ol { margin: 0 0 1em 2em; }

ul { list-style: disc; }

ol { list-style: decimal; }

ol ol { list-style: lower-roman; }

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
	margin: 0 auto;
}

table, td, th { vertical-align: top ; }

td, th { padding: 0 0.5em; }

th { font-weight: bold; }

caption {
	margin: 0;
	padding: 0;
}

input, textarea, select {
	margin-left: 0; /*previously 6em*/
	font-size: inherit;
}

input {margin:0;}

textarea {overflow-y: auto;} 

/* -------------------------------- Basic Layout Styles ---------------------------------- */

#mainWrapper { /* Wrapper for complete web page including footer*/
	width: 100%;      /* required */
	width: 768px;
	/*width: 55em;*/	/* to fill screen at 800x600 (800/14=57.14em) or to fill at upto 1280x1024 (1280/14=91.4em) NB most common is 1024x768 */
	margin: 0px auto;     /* centre max width page in higher res screens */
	background: transparent; 
}

#webPage { /* Wrapper for complete web page EXCLUDING FOOTER*/
	background-color: #ffffff; 
	width: 100%;      /* required */
	width: 768px;
}

#logo {
	float: left;
	padding: 3px 33px 2px 33px;
	background-color: white;
}

#addthistop {
	float: right;
	padding: 12px 12px 0 0;
}

#cbcontent { /* Wrapper for content EXCLUDING ALL FOOTERS*/
	padding: 20px 20px;
	float: left;
	width: 728px;
	
}
	
/********************Home page**********************************/

#indextl {
	margin: 0px 11px 22px 0px;
	float: left;
}

#indextr {
	margin: 0px 0px 22px 11px;
	float: left;
}

#strap {
	width: 100%;
	clear: both;
	text-align: center;
}

#indexbl {
	margin: 0px 11px 0 0px;
	float: left;
}

#indexbr {
	margin: 0px 0px 0 11px;
	float: left;
}

/**********************Charcoal Page*****************************************/
.pictextwrap { 
	padding: 0 0 15px 0;
	float: left;
}

.picleft { /*contains pic when on the left*/
	width: 45%;
	float: left;
}

.picright { /*contains pic when on the right*/
	width: 45%;
	text-align: right;
	float: right;
}

.textleft { /*contains text if its on the left*/
	width: 54.5%;
	float: left;	
	text-align: justify;
	padding: 5px 0 0 0px;
}

.textright { /*contains text if its on the right*/
	margin: auto;
	width: 54.5%;
	float: right;	
	text-align: justify;
	padding: 5px 0px 0 0;
}

/***************************Ecohome Page************************************/

.ecohometexttop {
	width: 290px;
	float: left;
}

.ecohometextbottom {
	float: left;
	width: 290px;
}
.ecohometextbottom p, .ecohometexttop p {
	text-align: justify;
}

.ecohometexttop p {
	padding: 20px 45px 0px 30px;
}

.ecohometextbottom p {
	padding: 20px 30px 0px 45px; 
}
.ecohometop {
	float: left;
	margin: 0px 0px 20px 0px;
}
.ecohomebottom {
	float: left;
}

.clear {
	clear: both;
	height: 1px;
}

.main { /*used with #menu2 on Ecohome, Background, Involved and Thumbnails*/
	padding: 0 0 0 10px;
	width: 80%;
	float: right;
}	

.main p {
	text-align: justify;
}

#thumbnails{ /*used with #menu2 on Thumbnails*/
	text-align: center;
}	

#fullpic { /*used with #menu2 on fullpic pages*/
	padding: 0 7px 0 8px;
	width: 66%;
	float: left;	
	text-align: center;
}

#fullpic img {border: 1px solid #b21616;}

#fullpicright { /*used with #menu2 on fullpic pages*/
	width: 12%;
	float: right;	
	text-align: center;
	padding: 62px 0 0 5px;
}

a.previous {
	display: block;
	margin: 0 0 1em 0;
	padding: 0.5em 0 0.2em 0;
	border: solid black 1px;
	text-decoration: none;
}

a.previous  img {border: 1px solid white;}
a:hover.previous, a:hover.previous img {border: 1px solid #b21616;}

a.next {
	display: block;
	margin: 1em 0 0 0;
	padding: 0.5em 0 0.2em 0;
	border: solid black 1px;
	text-decoration: none;
}

a.next img {border: 1px solid white;}
a:hover.next, a:hover.next img {border: 1px solid #b21616;}

#numpics {padding: 1em 0 1em 0;}

#backthumb {}



#contactform { /*used on contacts page*/
	padding: 0em 1em 0 1em;
}

/*--------------------------------Shows page----------------------------------*/
#imgright { /*used on shows page*/
	float: right;
	width: 41%;
	margin: 0 0 0 1em;
}

/*--------------------------------Education page----------------------------------*/

#edu_intro p {
	text-align: justify;
	padding: 10px 0 0 0;
}

#edu p {
	padding: 0px 25px 0 25px;
	text-align: justify;
}

#edu h3 {
	padding: 20px 0px 8px 0px;
}

ul#edu_list2{
	padding: 5px 0 0px 50px;
}

ul#edu_list2 li{
	padding: 0px 0 0 0;
}

.details {
	width: 60%;
	float: left;
	border: solid blue 0px;
}

.details_wide {
	width: 100%;
	float: left;
	border: solid blue 0px;
}

.discount {
	width: 150px;
	height: 146px;
	float: right;
	margin: auto;
	padding: 20px 100px 0 0;
	background-image: url(/images/discount1.png); 
	background-repeat: no-repeat;
	background-position: left bottom;
	border: red solid 0px;
}

.paypal {
	line-height: 35px;
	padding: 5px 0 0 20px;
}

/*------------------Videos-----------------------------------------------------*/
#blurb {
	width: 97px;
	float: left;
	margin: 45px 44px 30px 34px;
	text-align: center;
}

#blurb p {
	font-size: 0.9em;
	color: gray;
}

#blurb p span {
	font-weight: bold;	
}

#catalog {
	width: 400px;
	float: left;
}

#intro {
	margin: 0 0 0 40px;
}

#vids {
	width: 650px;
	margin: auto;
}

/*------------------Text Styles-----------------------------------------------------*/
	
.bold1 { /*used in  outlets and contacts pages*/
	font: 1em/0.75em Arial, Helvetica, sans-serif;
	font-weight: bold;
}

#fullpic p {
	padding: 1em 0.5em 0 0.5em;
}

/*----------------------Links Page------------------------------*/



/* -------------------------------- Menu1 Styles ---------------------------------- */

#menu1wrapper {
	padding: 0;
	border-top: solid #b21616 2px;
	border-bottom: solid #b21616 2px; 
	text-align: center;
}

#menu1wrapper a{
	margin: 0 8px 0px 8px;
	padding: 0 3px 0 3px;
	font: 1.7em/1.2em 'HollaRegular', Arial, sans-serif;
	color: black; 
	letter-spacing: 1px;
}
#menu1wrapper a:hover {
	color: #fe0000; 
	text-decoration: none;
}

#menu1wrapper a.selected, #menu1wrapper a:hover.selected  {
	color: #b21616;
}


/*--------------------MENU2 STYLES---------------------------------------*/
#menu2 {
	width: 18%;
	float: left;
	border-right: dashed #b21616 1px;
	margin: 0 0 0 -8px;
}

#menu2 a {
	display: block;	
	padding: 5px 0px 5px 0px;
	color: black;
	text-decoration: none;	
}

#menu2 a:hover {
	color: #fe0000;	
}

#menu2 a.selected , #menu2 a:hover.selected  {
	color: #b21616;
}

/*-----Footer Styles----------*/

#contentfooter{
	padding: 0;
	border-top: solid #b21616 1px; 
	text-align: right;
}

#contentfooter a{
	margin: 0 10px 0px 10px;
	padding: 0 3px 0 3px;
	font: 1.7em/1.2em 'HollaRegular', Arial, sans-serif;
	color: black; 
	letter-spacing: 1px;
}
#contentfooter a:hover {
	color: #fe0000;
	text-decoration: none;
}

#contentfooter a.selected, #menu1wrapper a:hover.selected  {
	color: #b21616;
}


#footerblock {
	height: 1.5em;
	font-size: 0.8em;
	line-height: 2em;
	padding: 20px 0;
	text-align: center;
}

#footerblock a {
	color: black;
	text-decoration: underline;
	font-size: 1.2em;
	line-height: 2.5em;
	padding: 0 0 8px 0;
}

/*-----------------------form list styling-----------------------------*/

fieldset {  
float: left;  
clear: left;  
width: 100%;  
margin: 0 0 1.5em 0;  
padding: 0;
}
legend {  								/*indent and bold the legend*/
margin-left: 1em;  
color: #000000;  
font-weight: bold;
}
fieldset ol {  						/*pad out the list*/
padding: 1em 1em 0 1em;  
list-style: none;
}
fieldset li {  
padding-bottom: 1em;
float: left;  						
clear: left;  
width: 100%;  
}
fieldset.submit {  				/*remove fieldset box*/
float: none;  
width: auto;  
border: 0 none #FFF;  
padding-left: 20em;
}
label {  
float: left;  
width: 10em;  
margin-right: 1em;
}