/*
-----------------------------------------------
CSS Style Sheet

Site: Luster Leaf / lusterleaf.com
Author:   Kristen Highland   kristen@onezerocharlie.com / kristenhighland@gmail.com   www.onezerocharlie.com
Version:  v.1 - 08/23/11
----------------------------------------------- */



/* --------------------------------------------------------------

   reset.css
   * Resets default browser CSS.

-------------------------------------------------------------- */

html { 
	margin:0; 
	padding:0; 
	border:0; 
}

body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

/* Make newer HTML5 elements behave like DIVs in older browers */ 
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
    display:block;
}

body {
  line-height: 1.5;
  background: white; 
}

table { 
	border-collapse: separate; 
	border-spacing: 0; 
}
caption, th, td { 
	text-align: left; 
	font-weight: normal; 
	float:none !important; 
}
table, th, td { 
	vertical-align: middle; 
}

blockquote:before, blockquote:after, q:before, q:after { content: ''; }
blockquote, q { quotes: "" ""; }

a img { border: none; }

:focus { outline: 0; }

/* --------------------------------------------------------------

   typography.css
   * Sets up some sensible default typography.

-------------------------------------------------------------- */
html { font-size:100.01%; }
body {
  font-size: 12px;
  color: #222;
  background:#006600;
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}

@font-face {
    font-family: 'AntiqueOliTLigRegular';
    src: url('../font/antiqueolitlig-webfont.eot');
    src: url('../font/antiqueolitlig-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/antiqueolitlig-webfont.woff') format('woff'),
         url('../font/antiqueolitlig-webfont.ttf') format('truetype'),
         url('../font/antiqueolitlig-webfont.svg#AntiqueOliTLigRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* Headings & Text Elements
-------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #111; }

h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
h2 { font-size: 2em; font-weight:lighter; color: #99CC66; margin-bottom: -5px;}
h3 { font-size: 3em; margin-bottom: 1px; color: #fff; font-family: 'AntiqueOliTLigRegular';}
h4 { font-size: 1.5em; font-weight:lighter; margin-bottom: -5px; color: #fff; }/* catalog numbers */
h5 { font-size: 9px; color:#fff; font-weight: 200; letter-spacing: .04em; margin-bottom: 5px;}/* catalog links */
h6 { font-size: 11px; margin-top: -25px; color:#99cc66; font-style:italic; float:right;}/* downloads catalog */

h1 img, h2 img, h3 img,
h4 img, h5 img, h6 img {
  margin: 0;
}
p           { margin: 0 0 1.5em; color: #fff;}

a:hover     { color: #fff; }
a           { color: #99CC66; text-decoration: none; letter-spacing: .02em; font-weight: 200;}

#mainframe a:link {color:#fff; text-decoration:none;}      /* unvisited link */
#mainframe a:visited {color:#fff;text-decoration:none;}  /* visited link */
#mainframe a:hover {color:#fff;border-bottom: 1px dotted #fff; padding-bottom: 1px;}  /* mouse over link */
#mainframe a:active {color:#fff; border-bottom: 1px dotted #fff; padding-bottom: 1px;}  /* selected link */

.sub_menu a:link {color:#fff; text-decoration:none;}      /* unvisited link */
.sub_menu a:visited {color:#fff;text-decoration:none;}  /* visited link */
.sub_menu a:hover {color:#99cc66;}  /* mouse over link */
.sub_menu a:active {color:#99cc66;}  /* selected link */

.active {color:#fff; border-bottom: 1px dotted #fff; padding-bottom: 1px; margin-right: 20px;}  /* selected link */


/* Lists
-------------------------------------------------------------- */

li ul,
li ol       { margin:0; }
ul, ol      { margin: 0 1.5em 1.5em 0; padding-left: 1.5em; color:#fff;}

ul          { list-style-type: none; padding: 0; margin-left: 0; }

u { text-decoration: none; color: #fff; border-bottom: 1px dotted #fff; padding-bottom: 1px;}

/* Tables
-------------------------------------------------------------- */

/* 
	Because of the need for padding on TH and TD, the vertical rhythm 
	on table cells has to be 27px, instead of the standard 18px or 36px 
	of other elements. 
*/ 

table       { margin-bottom: 1.4em; width:100%; }
th          { font-weight: bold; }
thead th 		{ background: #c3d9ff; }
th,td,caption { padding: 4px 10px 4px 5px; }
/*
	You can zebra-stripe your tables in outdated browsers by adding 
	the class "even" to every other table row. 
*/
tbody tr:nth-child(even) td, 
tbody tr.even td  { 
	background: #e5ecf9; 
}
tfoot       { font-style: italic; }
caption     { background: #eee; }


/* Misc classes
-------------------------------------------------------------- */

.small      { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; }
.large      { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; }
.hide       { display: none; }

.quiet      { color: #666; }
.loud       { color: #000; }
.highlight  { background:#ff0; }
.added      { background:#060; color: #fff; }
.removed    { background:#900; color: #fff; }

.first      { margin-left:0; padding-left:0; }
.last       { margin-right:0; padding-right:0; }
.top        { margin-top:0; padding-top:0; }
.bottom     { margin-bottom:0; padding-bottom:0; }

.ec { max-width: 150px; max-height:29px;!important position: relative; clear: right; }


/* Main Elements
-------------------------------------------------------------- */
.container {
  width: 980px;
  margin: 0 auto;
  
  position: relative;
  top: 50px;
  margin-bottom: 100px; 
}

#logo {
	width: 365px;/* 9 cols */
	float: left;/* Sets up basic grid floating and margin. */
  	margin-right: 4px;/* Sets up basic grid floating and margin. */
}

#contact {
	position: relative;
	padding-left: 205px; /* prepend 5 */
	float: right;/* Sets up basic grid floating and margin. */
  	margin-right: 15px;/* Sets up basic grid floating and margin. */
	text-align: right;
	margin-top: 10px;
}

#mainframe {
	width: 980px; /* 24 cols */
	float: left;/* Sets up basic grid floating and margin. */
	margin-right: 4px;/* Sets up basic grid floating and margin. */
	margin-right: 0; /* last */
	clear:both;	}

.main_img { position:absolute; top: 100px; z-index: -1; clear:both; }
.order_button { position: absolute; right: -62px; top: 110px; }

#links1 {
	width: 190px;/* accomodates larger text old 170px */
	float: left;/* Sets up basic grid floating and margin. */
	margin-right: 4px;/* Sets up basic grid floating and margin. */
	height: 340px;
}

#links2 {
	width: 200px;/* accomodates larger text old 190px */
	float: left;/* Sets up basic grid floating and margin. */
	padding-left: 15px;/* Sets up basic grid floating and margin. */
	padding-right: 15px;
	border-right: 1px dotted #FFFFFF;
	border-left: 1px dotted #FFFFFF;
	min-height: 340px;
}


#links3 {
	width: 300px;
	float: left;/* Sets up basic grid floating and margin. */
	margin-right: 30px;/* Sets up basic grid floating and margin. */
	min-height: 350px;
	border-right: 1px dotted #FFFFFF;
}

#links4 {
	width: 300px;
	float: left;/* Sets up basic grid floating and margin. */
	margin-right: 30px;/* Sets up basic grid floating and margin. */
	height: 350px;
	border-right: 1px dotted #FFFFFF;
}

.prod_info {
	width: 447px; /* 11 cols */	
	float: left;/* Sets up basic grid floating and margin. */
	padding-left: 5px;/* Sets up basic grid floating and margin. */
}

.prod_info img { height: 335px; width: 150px; float: left; clear: right; margin: 0 20px 600px 0; }

.prod_title {font-size: 2em; font-weight:lighter; margin-bottom: -5px; color: #fff;}
.prod_cat {font-size: 1.5em; font-weight:lighter; margin-bottom: -5px; color: #fff;}

.sub_menu ul{ position:relative; top: 25px; clear:right;}

.sub_menu li{
	float: right;
	margin-left: 20px;	
	text-align:right;
	font-size: 11px;
	font-weight:lighter;
	position: relative; /* accomidates site revision to get rid of contact info at top */
	top: 43px;/* accomidates site revision to get rid of contact info at top */
}

#main_content {
	padding: 35px;
	position: relative;
	top: 10px;
}

.about {
	width: 400px;
}

.catalog {
	width: 80px;
	height: 103px;
	background-color:#999999;
	float: left;
	margin-right: 20px;
	margin-bottom: 40px;
}

.catalog p {
	position: relative;
	font-size:9px;
}

#footer {
	position: absolute;
	float: left;/* Sets up basic grid floating and margin. */
	top: 58em;
	margin-left: 40px;
	
}


.headline { font-weight: bold; font-size: 18px; }



hr {
  background: #ddd;
  color: #ddd;
  clear: both;
  float: none;
  width: 100%;
  height: 1px;
  margin: 0 0 1.4em;
  border: none;
}
hr.space {
  background: #fff;
  color: #fff;
  visibility: hidden;
}


#video {
float: right;
}


/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clearfix:after, .container:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  overflow:hidden;
}
.clearfix, .container {display: block;}

/* Regular clearing
   apply to column that should drop below previous ones. */

.clear { clear:both; }



/* Background image
-------------------------------------------------------------- */
 #background img{
	position: fixed;
	min-width:100%;
	min-height:100%;
	left: 0;
	top:-50px;
	bottom:0;
	margin: 0;
	padding: 0;
	z-index: 0;
	clear: both;
}


 #background{
	position: fixed;
	width: 100%;
	height:auto;
	top: 0;
	left: 0;
	bottom:0;
	margin: 0;
	padding: 0;
	z-index: -1;
	clear: both;
}

/* --------------------------------------------------------------

   forms.css
   * Sets up some default styling for forms
   * Gives you classes to enhance your forms

   Usage:
   * For text fields, use class .title or .text
   * For inline forms, use .inline (even when using columns)

-------------------------------------------------------------- */

/* 
	A special hack is included for IE8 since it does not apply padding 
	correctly on fieldsets
 */ 
label       { font-weight: bold; }
fieldset    { padding:0 1.4em 1.4em 1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc; }
legend      { font-weight: bold; font-size:1.2em; margin-top:-0.2em; margin-bottom:1em; }

fieldset, #IE8#HACK { padding-top:1.4em; } 
legend, #IE8#HACK { margin-top:0; margin-bottom:0; }

/* Form fields
-------------------------------------------------------------- */

/* 
  Attribute selectors are used to differentiate the different types 
  of input elements, but to support old browsers, you will have to 
  add classes for each one. ".title" simply creates a large text  
  field, this is purely for looks.
 */
input[type=text], input[type=password],
input.text, input.title,
textarea {
  background-color:#fff;
  border:1px solid #bbb;
}
input[type=text]:focus, input[type=password]:focus,
input.text:focus, input.title:focus,
textarea:focus {
  border-color:#666;
}
select { background-color:#fff; border-width:1px; border-style:solid; }

input[type=text], input[type=password],
input.text, input.title,
textarea, select {
  margin:0.5em 0;
}

input.text,
input.title   { width: 300px; padding:5px; }
input.title   { font-size:1.5em; }
textarea      { width: 390px; height: 250px; padding:5px; }

/* 
  This is to be used on forms where a variety of elements are 
  placed side-by-side. Use the p tag to denote a line. 
 */
form.inline { line-height:3; }
form.inline p { margin-bottom:0; }


/* Success, info, notice and error/alert boxes
-------------------------------------------------------------- */

.error,
.alert, 
.notice,
.success, 
.info 			{ padding: 0.8em; margin-bottom: 1em; border: 2px solid #ddd; }

.error, .alert { background: #fbe3e4; color: #8a1f11; border-color: #fbc2c4; }
.notice     { background: #fff6bf; color: #514721; border-color: #ffd324; }
.success    { background: #e6efc2; color: #264409; border-color: #c6d880; }
.info 			{ background: #d5edf8; color: #205791; border-color: #92cae4; }
.error a, .alert a { color: #8a1f11; }
.notice a   { color: #514721; }
.success a  { color: #264409; }
.info a			{ color: #205791; }