/* CSS Document */

/* ==== global styles ==== */
@charset "UTF-8";
html {
	overflow:scroll;
}

body  {
	font-family: Arial, Helvetica, sans-serif;    /* default page font */
	font-size:12px;
	background: #fff;
	margin: 0;          /* shorthand for all margins = 0 */
	padding: 0;         /* no padding */
	text-align: center;	/* IE centering fix */
}

p, h1, h2, h3, h4, h5, h6, li {
    margin: 1ex 1em;
}

/* wrapper wraps around the rest of the page */
div#wrapper {
	width: 960px;       /* sets the content width */
	min-height:770px;
	margin: 0 auto;     /* no top/bottom margin, centered horizontally */
	background: #fff;
	text-align: left;	/* corrects for IE "centering" fix in body selector */
}

/* outerDiv sits inside wrapper, gives white margin and makes sure everything aligns */
div#outerDiv {
    width: 910px;       /* sets the content width */
    margin: 0 auto;     /* no top/bottom margin, centered horizontally */
	position: relative;
}

div#outerDiv.templemore {
    width: 720px;       /* sets the content width */
    margin: 0 auto;     /* no top/bottom margin, centered horizontally */
    background: #fff url(../images/bannerTemplemore.gif) no-repeat;       /* white content background, header image */
	position: relative;
}

/* ===== top menu ===== */
.logo {float:left; width:200px; height:112px;}

div#topMenu {
	height: 112px;      /* set size equal to banner image */
	background:#999 url(../images/banner.png) no-repeat;       /* grey content background, header image */
	background-position:20px 5px;								/*logo positioning */
	position: relative;
	border-radius:10px 10px 10px 10px;							/*rounded corners */
	-moz-border-radius:10px 10px 10px 10px;
	-webkit-border-radius:10px 10px 10px 10px;
}

/* ===== top navigation links ===== */

#topMenu ul {               /* turn off all the normal list behavior */
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;		/* set the position for the nav elements */
	top:40px;
	left: 580px;
	width: 380px;
}

#topMenu li {               /* turn off the normal list item behavior */
    float: left;
    margin: 0;
    padding:0;
}
#topMenu li a, #topMenu li span {
	margin-right:10px;
}
	
#topMenu li a:link, #topMenu li a:visited, #topMenu span {
    font-family: 'Fjalla One', Arial, Helvetica, sans-serif;
	font-size: 14px;
    display: block;         /* block mode for graphical button */
    color: #fff;            /* white text */
    text-decoration: none;  /* no underline */
	text-align:center;
    line-height: 40px;
    background: #999;
    border: none;           /* no border */
}

#topMenu li a:hover, #topMenu li a:active {
    color:#C60C30;         /* swap color for text */
}

#topMenu ul li a.current {  /* different look for "current" link */
	font-size:20px;
}

#topMenu .fix {
	margin-right:0px;
}

/* ===== side navigation links (i.e. left column) ===== */
#sideMenu {
	float:left;
	width:210px;
	padding:50px 10px 0 0;	
}
#sideMenu ul li{
	list-style:none;
	background-color:#999;
	font-weight:600;
	text-align:left;
	width:190px;
	height:22px;
	line-height:22px;
	border-radius:5px 5px 5px 5px;
	-moz-border-radius:5px 5px 5px 5px;
	-webkit-border-radius:5px 5px 5px 5px;
	text-indent: 6px;
}

#sideMenu a {
	color:#FFFFFF;
	text-decoration:none;
}
		
#sideMenu h3 {
	font:'Open Sans', Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-indent:2px;
	color:#fff;
	background-color:#999;
	border-radius:10px 10px 10px 10px;
	-moz-border-radius:10px 10px 10px 10px;
	-webkit-border-radius:10px 10px 10px 10px;
	padding: 2px 10px 2px 10px;
	margin: 2px 0px 2px 0px;
	height:26px;
	width:190px;
	cursor:pointer;
	line-height:26px;
	}

#sideMenu ul.submenu{padding:2px 0 2px 5px; margin: 2px 0px 2px 0px;}
#sideMenu ul li:hover{color:#c82032;background-color:#CCC;}		
#sideMenu h3:hover{color:#c82032;background-color:#CCC;}	
#sideMenu a:hover {color:#C82032;background-color:#CCC;}
	

#sideMenu h3.selected {
	background-color:#C60C30;
	color:#fff;
	width:190px;
}

#sideMenu h3.current:hover {
    cursor: default;
}
/* ===== welcoming paragraph =====*/
#welcome {
	width:750px;
	font-size:18px;
	color:#333333;
	font-weight:500;
	line-height:30px;
	text-align:left;
	margin-top:35px;
	margin-right:auto;
	margin-left:auto;
	font-family:'Ubuntu', sans-serif;
}

#footer p.info {
	font-size:16px;
	font-family:'Open Sans', Helvetica, sans-serif;
	margin-right:7%;
	margin-left:7%;
}
	
/* ===== main content (i.e. right column) ===== */

#mainContent {
	margin: 0; /* left margin allows space for sidebar... was 180px, but was causing conflict in IE, so zero'ed out and seems to be fine */
	padding-top: 10px; 
}

/* ===== product title ===== */

#prodTitle {
	margin-top:20px;
	float: right;
	width: 670px;
}

#prodTitle h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	color: #999;
	margin: 0;
	padding: 0;
	text-align: right;
	text-transform: uppercase;
}

#prodTitle h1.noPic {
	text-align: left;
}
/* ===== product picture placement ===== */

#prodPicTitled {
	float:right;
	width:672px;
	padding-top: 5px;
	padding-bottom: 0px;
}

#prodPicUntitled {
	width: 672px;
	padding-top: 10px;
	float: right;
}

/* ===== photo credit ===== */

#photoCredit {
	float: right;
	width: 540px;
	padding-top: 5px;
}

#photoCredit p {
	font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
	color: #999;
    margin: 0;
    padding: 0;
	text-align: right;
}

#photoCredit a:link, #photoCredit a:visited{
    display: block;         /* make it a block element */
    color: #999;
	text-decoration: none;
    border: none;           /* don't display a border */
}

#photoCredit a:hover, #photoCredit a:active{
	color: #666;
    text-decoration: none;
}

/* ===== landing page links ====== */
div .link {
	display:block;
	width:360px;
	background-color:#EAEAEA;
	margin-right:auto;
	margin-left:auto;
	margin-top:20px;
	margin-bottom:50px;
	text-decoration: none;
	color:#000000;
}

.link h3 {font-family:'Open Sans',Helvetica, sans-serif; padding:0px 8px 0px 8px; font-size:14px;}
.link p{font-family:'Open Sans', Helvetica, sans-serif; padding:0px 8px 0px 8px; line-height:150%; font-size:12px;}
	
a:link, a:visited {
	text-decoration:none;
	color:#C60C30;
}
/* ===== main content (i.e. right column) ===== */
#mainContent {
	margin: 0; /* left margin allows space for sidebar... was 180px, but was causing conflict in IE, so zero'ed out and seems to be fine */
	background-color:#FFFFFF;

}		
#mainContent #leftCol a img:hover, #mainContent #rightCol a img:hover {
	opacity:0.8;
	filter:alpha(opacity=80); /* For IE8 and earlier */
	-khtml-opacity:0.8;
	-moz-opacity:0.8;
}

#leftCol .link:hover, #rightCol .link:hover {
	opacity:0.8;
	filter:alpha(opacity=80); /* For IE8 and earlier */
	-khtml-opacity:0.8;
	-moz-opacity:0.8;
}	
#leftCol a img, #rightCol a img {
	border:0;
	outline:none;
}

#leftCol, #rightCol {
	width:360px;
	margin:30px 45px 45px;
	}
/* ===== info ===== */

#prodInfo td {
	font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 19px;		/* can be adjusted relative to ad height and amount of text */
    color: #666;
	margin: 0;				/* zero-ing out, set for 1ex 1em at top, can be adjusted according to amount of text */
	padding-bottom: 1em;
}

img.insetProdPic {
	float: right;
	margin-left: 1em;
}

#prodInfo p a:link, #prodInfo p a:visited {
	color: #C60C30;
	text-decoration: none;
}

#prodInfo p a:hover, #prodInfo p a:active {
	color: #999;
	text-decoration: none;
}

#prodInfo ul {
	font-family: 'Open Sans',Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 19px;		/* can be adjusted relative to ad height and amount of text */
    color: #666;
	margin: 0;				/* zero-ing out, set for 1ex 1em at top, can be adjusted according to amount of text */
	padding-bottom:30px;;
}

#prodInfo ul a:link, #prodInfo ul a:visited {
	color: #C60C30;
	font-family:'Open Sans', Arial, sans-serif;
	font-size:14px;
	text-decoration: none;
}

#prodInfo ul a:hover, #prodInfo ul a:active {
	color: #999;
	text-decoration: none;
}

/* ===== specs table ===== */

#specsTable {
	float: right;
	width: 672px;
	padding: 10px 0 10px 0;
	padding-bottom: 30px;
}

#pg_tecni_table {
	float: left;
	width: 672px;
	padding: 10px;
	background-color: #F4CED6;
	border: thin solid #4F0513;
	margin: 1ex 0;
}

#tableLayout td {
	align: left;
	border: thin solid #E28698;
	height: 25px;
	padding-left: 10px;
	font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    line-height: 19px;		/* can be adjusted relative to ad height and amount of text */
    color: #333;
	margin: 0;				/* zero-ing out, set for 1ex 1em at top, can be adjusted according to amount of text */
}

#pg_tecni_table h3 {
	font-size: 14px;
	margin: 0px 0px 11px 0px;
	color: #C60C30;
}

/* ===== sideAd ===== */

#sideAd {          /* set the position for the ad */
    float: left;
	padding: 10px 0px;
}

/* ===== footer ===== */

#footer {
    background:#999;
	font-size:16px;
	line-height:120%;
}
	
#footer p {
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: 400;
	line-height: 19px;
	color: #fff;
	margin: 0;
	padding: 15px 0px 0px 0px;
	text-align: center;
}

#footer a:link, #footer a:visited {
    color: #fff;
    text-decoration: none;
}

#footer a:hover, #footer a:active {
    color: #c60c30;
    text-decoration: none;
}

#footer .info {
	padding-top:20px;
	padding-bottom:20px;
	line-height:30px;
	padding-left:80px;
	padding-right:80px;
}		

#footer p.trademark {
    font-size: 9px;
	font-weight: normal;
	line-height: 12px;
	text-align:center;	
	padding-left:20%;
	padding-right:20%;
	padding-bottom:10px;
}

#footer .member {
	font-size:12px;
}	

#footer a{
	font-size:14px;
}
/*===== prodInfo moved to under picture slider ===== */

.description {
	width:670px;
	float:right;
	color:#000000;
	font-family:'Open Sans', Arial, sans-serif;
	font-size:14px;
	line-height:150%;
}

.description h2 { font-family:'Open Sans', Arial, sans-serif; font-weight:500; text-indent:-6px; }
/* ===== class for clearing floats ===== */

.clearfloat {
	clear: both;
    height: 0;
    font-size: 1px;
    line-height: 0px;
}