/* CSS Reset 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, 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, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td {
  border:0pt none;
	color: #000000;
	font-family: Myriad Pro, 'Lucida Grande', Geneva, Arial, Verdana, sans-serif;
	font-size: 18px;
  font-family:inherit;
  margin:0pt;
  padding:0pt;
  vertical-align:baseline;
}*/


a,a:hover,a:focus,a:active,a:visited {
  text-decoration: none;
}

/* HTML5 tags */
header, section, footer, aside, nav, article, figure, legend {
    display: block;
}

@font-face {
    	font-family: 'Heroic Condensed Bold';
    	src: url('Fonts/heroiccondensed-bold-webfont.eot');
    	src: url('Fonts/heroiccondensed-bold-webfont.eot?iefix') format('eot'),
    	url('Fonts/heroiccondensed-bold-webfont.woff') format('woff'),
    	url('Fonts/heroiccondensed-bold-webfont.ttf') format('truetype'),
    	url('Fonts/heroiccondensed-bold-webfont.svg#webfontZam02nTh') format('svg');
    	font-weight: normal;
    	font-style: normal; }


/* =Main Styling
	*/
body {
	background-color: #fff;
	color: #000000;
	font-family: Myriad Pro, 'Lucida Grande', Geneva, Arial, Verdana, sans-serif;
	font-size: 18px;
	margin: 0 auto;
	width: 1024px;
	height: 100%;
}

body.iPad {
	font-size: 14px;
}

body.iPhone {
	font-size: 14px;
}

body .hentry  {
	width: 834px;
	margin: 10px auto 50px auto;
}

body.portrait .hentry  {
	width: 100%;
	margin: 10px auto 50px auto;
	max-width: 740px;
}

body.landscape .hentry  {
	width: 834px;
	margin-left: 95px;
}


.site-header {
  height: 114px;
	background-color: #E6E6E6;
	position: relative;
}
.site-header.black {
  height: 114px;
	background-color: #000000;
	position: relative;
}
.site-header .nav {
  width: 400px;
	height:40px;
	text-align: right;
	position: absolute;
	top: 37px;
	left: 550px;
}
.site-header .nav  a {
  position: relative;
	padding: 0px 20px 0px 20px;
	display: block;
	float: left;
}
.site-header .nav  a p {
  font-family: 'Heroic Condensed Bold';
	font-size: 23px;
	line-height: 40px;
  font-weight: 400;
	color: #000000;
	margin: 0px;
	text-transform: uppercase;
}
.site-header .nav  a p.active {
	color: #7ac242;
}

.hentry h1 {
  font-family: 'Heroic Condensed Bold';
	font-size: 30px;
	line-height: 40px;
  font-weight: 400;
	color: #7ac242;
	margin: 0px 0px 10px 0px;
	text-transform: uppercase;
}
.hentry h1 .black{
	color: #000000;
}
.hentry p {
  text-align:justify;
  margin: 0px 0px 18px 0px;
}
.hentry .center {
  text-align: center;
}

.productslink {
  position: relative;
  display: block;
	float: left;
	width: 242px;
	height: 259px;
	text-align: center;
	border: 1px solid #c0c0c0;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.productslink.left {
  margin: 0px 25px 20px 0px;
	clear: both;
}
.productslink.middle {
  margin: 0px 25px 20px 26px;
}
.productslink.right {
  margin: 0px 0px 20px 26px;
}

.productslink img{
  height: 200px;
	width: 222px;
  margin: 0px 0px 49px 10px;
	border: none;
}
.productslink .productslinktext{
  width: 220px;
	height: 39px;
	position: absolute;
	bottom: 10px;
	left: 10px;
	background-color: #7ac242;
	text-align: center;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

}
.productslink .productslinktext p{
  font-family: 'Heroic Condensed Bold';
	font-size: 25px;
	line-height: 39px;
  font-weight: 400;
	text-align: center;
	margin: 0px 0px 0px 0px;
	color: #000000;
	text-transform: uppercase;
}








a.backlink {
  width: 100%;
	text-align: left;
	display: block;
	color: #000000;
	font-size: 20px;
	margin: 0px 0px 20px 0px;
}

.leftcol{
  width: 450px;
	padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
	float: left;
}
.rightcol{
  width: 350px;
	height: 100%;
	padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
	float: right;
}
.rightcol h1 {
  font-family: 'Heroic Condensed Bold';
	font-size: 25px;
	line-height: 25px;
  font-weight: 400;
	color: #000000;
	margin: 0px 0px 10px 0px;
}

.rightcol .menu{
  width: 100%;
	position: relative;
	height: 30px;
	margin: 0px 0px 20px 0px;
}
.rightcol .menu #menuDetail{
  width: 160px;
	height: 30px;
	border: 1px solid #7ac242;
  transform: skew(-30deg);
	text-align: center;
	position: absolute;
	top: 0px;
	left: 0px;
	display: block;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.rightcol .menu #menuDetail p{
  transform: skew(30deg);
  font-family: 'Heroic Condensed Bold';
	font-size: 25px;
	line-height: 30px;
  font-weight: 400;
	text-align: center;
	margin: 0px 0px 0px 0px;
	color: #000000;
}
.rightcol .menu #menuSpec{
  width: 160px;
	height: 30px;
	border: 1px solid #7ac242;
  transform: skew(-30deg);
	text-align: center;
	position: absolute;
	top: 0px;
	left: 190px;
	display: block;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.rightcol .menu #menuSpec p{
  transform: skew(30deg);
  font-family: 'Heroic Condensed Bold';
	font-size: 25px;
	line-height: 30px;
  font-weight: 400;
	text-align: center;
	margin: 0px 0px 0px 0px;
	color: #000000;
}
.rightcol .menu .Active{
  background-color: #7ac242;
}
.leftcol .nav .thumb{
  width: 100px;
	height: 79px;
	padding: 0px 0px 0px 0px;
  margin: 20px 10px 0px 0px;
  float: left;
  border: 1px solid #c0c0c0;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.leftcol .nav .thumb img{
  margin: auto auto auto auto; 
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

/* give slideshow some style */
/* Flash image when changing page problem NOT cured by .first class and setting others to display:none */
/* as the others were not displayed. WAS fixed by adding overflow hidden to #branding #header-slideshow */
#slideshow { 
  margin: 0px; 
	padding: 0px; 
	width: 438px; 
	height: 347px;
	left: 0px; 
	position: relative; 
	top: 0px;
	z-index: 0; 
	overflow: hidden;
}


/* give each slide the same dimensions */
#slideshow div { margin: 0px; padding: 0px; width: 436px; height: 345px; z-index: 0; overflow: hidden;
  border: 1px solid #c0c0c0;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	
 }

/* make sure each slide image is centered */
#slideshow div img { margin: 0px auto 0px auto; padding: 0px; display: block; z-index: 0;  }
#slideshow div video { margin: 65px auto 0px auto; padding: 0px; display: block; z-index: 0;  }

#slideshow #div0{
  display: block;
}
#slideshow #div1{
  display: none;
}
#slideshow #div2{
  display: none;
}
#slideshow #div3{
  display: none;
}


#switchtext #detail{
  display: block;
}
#switchtext #spec{
  display: none;
}
#switchtext ul{
  padding: 0px 0px 0px 10px;
}
#switchtext ul li{
  margin: 0px 0px 10px 0px;
}

#switchtext #detail p,
#switchtext #detail ul li,
#switchtext #spec p,
#switchtext #spec ul li
{
  font-size: 17px;
}
#switchtext #spec ul.smaller li
{
  font-size: 15px;
	line-height: 17px;
  margin: 0px 0px 5px 0px;
}
#switchtext #spec ul.smaller1 li
{
  font-size: 14px;
	line-height: 16px;
  margin: 0px 0px 4px 0px;
}
#switchtext #spec ul.smaller2 li
{
  font-size: 14px;
	line-height: 15px;
  margin: 0px 0px 4px 0px;
}

.language {
  width: 139px;
	height:78px;
	padding: 20px;
	position: absolute;
}
.english{
	top: 165px;
	left: 820px;
}
.french{
	top: 295px;
	left: 820px;
}
.german{
	top: 425px;
	left: 820px;
}