/**************************************************************
   Visit studio7designs.com for more layouts and downloads for this template!
 **************************************************************/
 
/**************************************************************
   All page content except for footer
 **************************************************************
ffa900 - orange
333333 - dark gray
ccff33 - green
*/

#content {
  position: relative;
  height: auto !important;
  height: 100%;
  min-height: 100%;
}

/**************************************************************
   Page Content
 **************************************************************/

#page {
  clear: both;
  float: left;
  width: 100%;
  margin-top: 2em;
  margin-bottom: 3em;
  text-align: left;
}

#columns {
  margin: 0 auto;
}

/* 40% left column */
#contentLeft {
  width:283px;
  margin-right:30px;
  float: left;
  }

#contentLeft.Box {
  width:245px;
  margin-right:15px;
}

/* 60% right column */
#contentRight {
	width:433px;
	float:left
}

#contentRight .Box {
  width:395px;
}

#contentCartLeft {
	width:433px;
	float:left;
	margin-right:30px;
}

#contentCartRight {
  width:243px;
  float: left;
  }

#contentCartRight .Box {
  width:245px;

  }

/*******************************
Hoverbox
*******************************/
.hoverbox
{
	cursor: default;
	list-style: none;
	z-index:-1;

}

.hoverbox a
{
	cursor: default;
}

.hoverbox a .preview
{
	display: none;
}

.hoverbox a:hover .preview
{
	display: block;
	position: absolute;
	top: -90px;
	left: -105px;
	z-index: 100;
}

.hoverbox img
{
	background-color: #fff;
/*	border-color: #aaa #ccc #ddd #bbb;
	border-style: solid;
	border-width: 1px;*/
	color: inherit;
	padding: 2px;
	vertical-align: top;
	width: 125px;
	z-index:1;

	/*height: 50%; */
}

.hoverbox li
{
	background: #fff;
/*	border-color: #ddd #bbb #aaa #ccc;
	border-style: solid;
	border-width: 1px;*/
	color: inherit;
	display: inline;
	height:105px;
	float: left;
	margin: 3px;
	padding: 5px;

	position: relative;
}

.hoverbox .preview
{
	border-color: #fff;
	z-index: 99;
	width: 250px;
/*	height: 200%;*/
}



/*

group selector: h1, h2, h3, h4 {}
h1 span {only span in h1}
span.bigger only class bigger in span
class selector: p.first (only class first in <p>
class selector: div.leftside p - <p> inside div class=leftside

Contextual selectors can look for element types, CLASS attributes, ID attributes or combinations of these:
DIV P           { font: small sans-serif }
.reddish H1     { color: red }
#x78y CODE      { background: blue }
DIV.sidenote H1 { font-size: large }
The first selector matches all 'P' elements that have a 'DIV' among the ancestors. The second selector matches all 'H1' elements that have an ancestor of class 'reddish'. The third selector matches all 'CODE' elements that are descendants of the element with 'ID=x78y'. The fourth selector matches all 'H1' elements that have a 'DIV' ancestor with class 'sidenote'.
Several contextual selectors can be grouped together:
H1 B, H2 B, H1 EM, H2 EM { color: red }
*/

/* Column widths */
.width {
  width: 776px; 
}

.widthPad {
width: 746px;
}
.width20 {width: 20%;}
.width23 {width: 22%;}
.width25 {width: 24%;}
.width33 {width: 32%;}
.width33border {width: 29%;}
.width40border {width:36%}
.width40 {width: 38%;}
.width50 {width: 48%;}
.width50border {width: 44%;}
.width60 {width: 60%;}
.width66 {width: 66%;}
.width73 {width: 73%;}
.width75 {width: 75%;}
.width90 {width:90%;}
.width100 {width: 100%;}

/**************************************************************
   Generic Display 
 **************************************************************/

.Box {
  padding: 10px 15px 15px 15px;
  border-style:groove; 
  border-width: 4px;
  border-color: #ccff33;
  margin-bottom: 20px;
}

.leftCart {
	margin-left:20px;
	margin-right:20px;
	}

.rightCart {
	margin-right:20px;
	}

	
.noBox {
  margin-bottom:25px;
  }

.borderOrange {
  border-color:#ffa900;
  }


.columnLeft {
  width:283px;
  margin-right:30px;
  float: left;
  }

.columnRight {
	width:433px;
	float:left
  }


.display {
  display: block;
 }

.hide {
  display: none;
  }


.bold {
  font-weight: bold;
  }

.clear {
  clear: both;
}

.pacebandDisplay {
text-align: center;
  }

.marginRight {
  margin-right: 15px;
}

.paddingExtra {
  padding-right: 15px;
  padding-left:15px;
}
  
.marginRightLess {
  margin-right: 10px;
}

.smallBottom {
  margin-bottom: 0px;
}

.marginBottom {
  margin-bottom:12px;
  }

.smallTop {
  margin-top: 0px;
  }

.paddingLeft {
  padding-left: 10px;
}

.paddingRight {
  padding-right: 10px;
}

.paddingSides {
  padding-left:15px;
  padding-right:15px;
}

.paddingTop {
  padding-top: 10px;
}

.padding {
  padding: 5px;
  }

.floatLeft {
  float: left;
}

.floatRight {
  float: right;
}

.alignLeft {
  text-align: left;
}

.alignRight {
  text-align: right;
}

.alignCenter {
  text-align: center;
  }

.alignTop {
  vertical-align: top;
}

.alignMiddle {
  vertical-align: middle;
}

.alignBottom {
  vertical-align: bottom;
}

.noIndent {
  text-indent:0px;
  }

.grayBackground {
  background-color:#111;
  }


.greenBackground {
  background-color:#ccff33;
  }

.dark {
  color: #666666;
}

.handwriting {
  font-family:  mistral, brush script mt, Monotype Corsiva, cursive;
  font-weight: lighter;
  letter-spacing: .0em;
  font-size: 1.3em;
}

.arial {
  font-family:arial, verdana, sans-serif;
  font-weight:bold;
  }

.center {
  text-align: center;
  }

.green {
  color: #ccff33;
  }
  
.orange {
  color:#ffa900;
}

.purple {
 color: #522994
} 

.bold {
  font-weight: bold;
  }



.greenBorder {
  border-color: #ccff33;
}

.orangeBorder {
  border-color: #ffa900;
}

.testimonial {
  color: #ffa900;
  margin-bottom:10px;
  text-align:right;
}

.serif {
  font: 400 13px courier new, courier, serif; 
  letter-spacing: -1px;
 } 

.size14 {
font-size: 14px;
}

.size16 {
font-size: 16px;
}

.size18 {
font-size: 18px;
}

.size20 {
font-size: 20px;
}

.size22 {
font-size: 22px;
}

.size24 {
font-size: 24px;
}

.size26 {
font-size: 26px;
}

.size28 {
font-size: 28px;
}

.size30 {
font-size: 30px;
}

.size32 {
font-size: 32px;
}

.size34 {
font-size: 34px;
}

.size36 {
font-size: 36px;
}

.size38 {
font-size: 38px;
}

.size40 {
 font-size: 40px;
}

.size42 {
 font-size: 42px;
line-height: 40px;
letter-spacing:-5px;
}


.price {
	float:right;
	padding:15px;
	font-size:24px;
	color:#ccff33;
	background-color:#333;
	margin:10px;
	border-width: 2px;
	border-style: solid;
	border-color: #666 #666 #999 #666;
	}


/**************************************************************
   Topbar with newsletter form and theme change buttons
 **************************************************************/

#topbar {
  float: left;
  width: 100%;
  padding: 0.6em 0;

  font-size: 0.9em;
  text-transform: uppercase;

  color: #CFD9DB;
  background: #FFF url(../images/pageGraphics/bg/topbar.gif) repeat-x bottom left;
}

#leftimage {
position:absolute;
top:0px;
left:0px;

}

/**************************************************************
   Top menu and logo
 **************************************************************/

	/*the extra pages menu at top*/

#header {
	clear: both;
	position: relative;
	height: 3em;
	margin: 0 auto;
	background: #000000;
	border-bottom: 0px solid #ffa900;
	background-color: #000000;
}


#header img {
  position: absolute;
  top: 2%;
  left: 10px;
}

#header ul {
  margin: 1.5em 1em 0 0 !important;
  margin: 1.5em 0.5em 0 0;
  padding: 0;
  float: right;
}

#header ul li {
  display: inline;
  list-style: none;
}

#header ul li a {
  float: left;
  padding: 0 .8em;
  font: 400 13px courier new, courier, serif; 
  letter-spacing: -1px;
  word-spacing:-.2em;
  line-height: 0.8em !important;
  line-height: 1em;
  color: #ccff33;
  border-right: 1px solid #ffa900;
}

#header ul li a.last {
  padding-right: 0;
  border-right: 0;
}

#header ul li a:hover {
  color: #ffa900;

}

/**************************************************************
   Header Image/Flash Movie
 **************************************************************/

	/* the R2R header */
#headerImg {
  margin: 0 auto;
  height: 106px;
  background: url(../images/pageGraphics/bg/header_image.gif) no-repeat top left;
}

/*************************
The Cart
*************************/

#cart {
  margin: 0 auto;
 
}

#cart ul {
  list-style-type: none;
  width: 100%;
  margin: 0px 0px 10px 0px;
margin-bottom: 30px;
  padding: 0;
  font-family: verdana, arial, sans serif;
  font-size: 12px;
  letter-spacing: 0px;
  word-spacing: 0px;
  text-align: left;
  color: #ddd;
}

#cart li {
  list-style-type: none;
  list-style-image: none;
  }

 
#cart li.item {
  font-family: courier new, courier, serif;
  font-size:16px;
  letter-spacing: -1px;
  word-spacing: -.3em;
  color: #ddd;

}

#cart li.detail_A {
  font-size:12px;
  font-weight: normal;
  text-indent:15px;
  color: #ffa900;
}

#cart li.detail_B {
  font-size:11px;
  text-indent:25px;
  color: #ddd;
}

#cart li.upsell {
  text-indent: 15px;
  margin-top:-1px;
  margin-bottom:5px;
  font-size:10px;
  color:#ddd;	
}

#cart li.qty {
  font-weight: normal;
  text-indent:15px;
  margin-top:4px;
  color:#ffa900;
  font-size:12px;
}

#cart li a {
  font-weight:normal;
  font-style:normal;
  font-size:10px;
  color: #ccff33;
  }

#cart li a:hover {
  font-weight:normal;
  font-style:normal;
  font-size:10px;
  color: #ddd;
  }


#cart li.subtotal {
  text-indent:15px;
  font-weight:bold;
  color: #ddd;
}

#cart h6 {
font-size:11px;
letter-spacing:0em;
word-spacing:0em;
font-weight:normal;
}

#cart3 input{
text-indent:4px;}

/**************************************************************
   Top Block Menu
 **************************************************************/
	/* the Words menu*/
#wmenu {
  margin: 0 auto;
 
}

	/*the basic format for the words*/
#wmenu ul {
  width: 100%;
  float: left;
  margin: 0;
  padding: 0;
  font-family: courier new, courier, serif;
  font-size: 17px;
  letter-spacing: -1px;
  word-spacing:-.3em;
  text-align: left;
  border-top: 10px solid #000;
}

#wmenu ul li {
  display: inline;
  margin: 0;
  padding: 0;
  list-style: none;
}

#wmenu ul li a {
  float: left;
  text-align:center;
  width: 16.66%;
  border-bottom: 4px solid #000;
  color: #ffa900;
}

#wmenu ul li a span {
  display: block;
  padding: 0px;
}


#wmenu ul li a span.desc {
  color: #ccff33;
  border-bottom: 4px solid #000;
}

	/* the words on hover*/
#wmenu ul li a:hover,
#wmenu ul li a.here {
  border-bottom: 4px solid #ffa900;
  color: #ccff33;
}

#wmenu ul li a:hover span.desc,
#wmenu ul li a.here span.desc {
  border-bottom: 4px solid #ffa900;
  color: #fff;
}


	/*the icon menu */
#menu {
  margin: 0 auto;
 
}

#menu ul {
  width: 100%;
  float: left;
  margin: 0;
  padding: 0;
  height:75px;
  text-align: left;
/*  background: #000 url(../images/pageGraphics/bg/menu.gif) repeat-x top left; */
}

#menu ul li {
  display: inline;
  margin: 0;
  padding: 0;
  list-style: none;
}

	/*the plain icon*/
#menu ul li a {
  float: left;
  text-align:center;
  width: 16.66%;
  height: 75px;
  font-weight:normal;
  letter-spacing: 0.1em;
  padding-top:0px;
  color: #ccff33;
  border-top: 3px ridge #ccff33;
  border-bottom: 3px ridge #ccff33;
  
}

#menu ul li a span {
  display: block;
  padding: 0px 7px;
}


#menu ul li a span.desc {
  font-size: 0.8em;
  font-weight:normal;
  color: #ccff33;
}


	/*the icon when on hover*/
#menu ul li a:hover,
#menu ul li a.here {
  background: #333333;
  font-weight:bold;
  color: #ccff33;
  border-top: 3px solid #ffa900;
  background-color: #ccff33;
}

#menu ul li a:hover span.desc,
#menu ul li a.here span.desc {
  background-color: #ccff33;
  color: #fff;
}




/**************************************************************
   Footer
 **************************************************************/

#footer {
  clear: both;
  float: left;
  width: 100%;
  height: 5em;
  /*margin-top: -5em;*/
  font: 400 12px courier new, courier, serif; 
  letter-spacing: -1px;
  word-spacing:-.2em;
  color:#ffa900;
  border-top: 2px;
  border-color: #ffa900;
}

#footer #bg {
  position: relative;
  height: 5em;
  margin: 0 auto;
  background: #000; /*url(../images/pageGraphics/bg/header.gif) repeat-x bottom left; */
}

#footer #bg ul {
  float: right;
  margin: 3em 1em 0 0 !important;
  margin: 3em 0.5em 0 0;
  padding: 0;
}

#footer #bg ul li {
  display: inline;
  list-style: none;
  float:left;
}

#footer #bg ul li a {
  float: left;
  padding: 0 1em;
  line-height: 0.8em !important;
  line-height: 1em;
  border-right: 1px solid #ffa900;
}

#footer #bg ul li a.last {
  padding-right: 0;
  border-right: 0;
}

#footer #bg ul li a:hover {
  color: #fff;
}

#footer #bg img {
  position: absolute;
  top: 6%;
  left: 10px;
}




/**************************************************************
   Rounded Boxes
 **************************************************************/

.spiffy{display:block}
.spiffy *{
  display:block;
  height:1px;
  overflow:hidden;
  font-size:.01em;
  background:#222222}
.spiffy1{
  margin-left:3px;
  margin-right:3px;
  padding-left:1px;
  padding-right:1px;
  border-left:1px solid #2b2a2a;
  border-right:1px solid #2b2a2a;
  background:#4c4a4a}
.spiffy2{
  margin-left:1px;
  margin-right:1px;
  padding-right:1px;
  padding-left:1px;
  border-left:1px solid #0a0909;
  border-right:1px solid #0a0909;
  background:#525050}
.spiffy3{
  margin-left:1px;
  margin-right:1px;
  border-left:1px solid #525050;
  border-right:1px solid #525050;}
.spiffy4{
  border-left:1px solid #2b2a2a;
  border-right:1px solid #2b2a2a}
.spiffy5{
  border-left:1px solid #4c4a4a;
  border-right:1px solid #4c4a4a}
.spiffyfg{
 padding:6px;
  background:#222222}
.a.hover.spiffyg {
	color: #333333;
}