/* @override file:///Users/andrearawlings/Dropbox/Clients/cjgraphix/Contract/Reduced%20Fat/TVT/HTML/assets/styles/base.css */

@charset "UTF-8";
/*------------------------------------*\
	BASE.CSS
\*------------------------------------*/
/*
Author:             Andrea Rawlings
Version:            1.0
Project:			Tech Valley Technologies
Date:               May 24 2011

Reference:			inuitcss.com 1.4.3 Harry Roberts


/*------------------------------------*\
	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,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,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video{
	margin:0;
	padding:0;
}
article,aside,details,figcaption,figure,footer,
header,hgroup,menu,nav,section{
	display: block;
}

table{
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img{
	border:0;
}
address,caption,cite,dfn,th,var{
	font-style:normal;
	font-weight:normal;
}
caption,th{
	text-align:left;
}
h1,h2,h3,h4,h5,h6{
	font-size:100%;
	font-weight: normal;
}
q:before,q:after{
	content:'';
}
abbr,acronym{
	border:0;
}

/*------------------------------------*\
	MAIN
\*------------------------------------*/
html{
	overflow-y:scroll; /* Force scrollbars 100% of the time */
	font-size:100.01%;
	height: 100%;
	font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;;
	line-height:1.5;
	background:#56554E;
	color:#58595B;
}
body{
	min-height:100%;
	padding:0 0 20px;
	margin:0;
	text-align: center;
	font-size: 75%;
}

.container {
	width: 950px;
	height: 100%;
	margin: 0 auto;
	padding:0;
	text-align: left;
	position: relative;
}
.container:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

/*------------------------------------*\
	GRIDS
\*------------------------------------*/
/*
Most frameworks rely on class="end" or similar to remove the margin from the last column in a row of grids. We don’t want to do that so we use a combination of margin- and negative margin-left. It’s clever...
We also allow you to use grid items as stand alone columns or in a series of columns. To use a series just wrap them all in <div class="grids">...</div>
*/

.row{
/* width: 100%; */
max-width: 950px;
min-width: 755px;
margin: 0 auto;
overflow: hidden;
}
ul.row{
	/* So we can make grids out of lists */
	margin:0 0 0 -20px;
	list-style:none;
}
.col{
margin-right: 3.8%;
float: left;
min-height: 1px;
}
.row .col{
	margin:0 0 0 20px;
}

.row .onecol {
/* width: 850px; */
float: left;
}

.row .twocol {
width: 47%;
}

.row .threecol {
width: 30.75%;
}

.row .fourcol {
width: 22.05%;
}

/*------------------------------------*\
	HEADER
\*------------------------------------*/

#header {
	background: url(images/bg-header.png);

}

/*------------------------------------*\
	LOGO
\*------------------------------------*/
#logo{
	width:192px;
	height:81px;
	margin-top: 9px;
	float: left;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	background: #d7d6c7;
}

/* Based on the fact that we need to use an <img /> in our markup, let’s hide the actual image and use a background on the <a>--this gives us sematically sound markup and the ability to use sprites for hover effects! */
#logo a{
	display: block;
	width: 100%;
	height: 100%;
	background:url(../images/techvalley-logo.png) no-repeat center center;
}
#logo:hover{
	/* Hover states */
	background-position:0 -00px;
}
#logo img{
	position:absolute;
	left:-99999px;
}

#header .slogan {
	color: #fff;
	float: right;
	width: 343px;
	height: 22px;
	margin: 62px 30px 0 0;
	text-indent: -9999px;
	overflow: hidden;
	background: url(images/ampup.png) no-repeat;
}

/*------------------------------------*\
	NAV
\*------------------------------------*/
#navigation {
	background: #8ac977; /* Old browsers */
	background: -moz-linear-gradient(top, #8ac977 1%, #459f46 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#8ac977), color-stop(100%,#459f46)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #8ac977 1%,#459f46 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #8ac977 1%,#459f46 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #8ac977 1%,#459f46 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8AC977', endColorstr='#459F46',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #8ac977 1%,#459f46 100%); /* W3C */
}
#navbar{
	list-style:none;
	width:100%;
	margin:0; padding: 0;
	font-family: 'Francois One', sans-serif;
	text-transform: uppercase;
}
#navbar li{
	position: relative;
	float:left;
	line-height: 35px;
	height: 35px;
	padding: 0 15px;
	font-size: 1.167em;
	border-right: 1px dotted #DCEDD6;
}
	#navbar li:last-child,
	#navbar li.last{border-right: none;}

#navbar a{
	display:block;
	color: #fff;
}
#navbar a:hover{
	text-decoration: none;
	color: #D8EBD0;
}

#navbar .sub {
	position: absolute;
	top: 35px; left: 0;
	z-index: 9999;
	list-style: none;
	width: 310px;
	margin: 0;
	padding: 5px 4px;
	background: #4e9c45; /* Old browsers */
	background: -moz-linear-gradient(left, #4e9c45 0%, #6dba51 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#4e9c45), color-stop(100%,#6dba51)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #4e9c45 0%,#6dba51 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #4e9c45 0%,#6dba51 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(left, #4e9c45 0%,#6dba51 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4E9C45', endColorstr='#6DBA51',GradientType=1 ); /* IE6-9 */
	background: linear-gradient(left, #4e9c45 0%,#6dba51 100%); /* W3C */
	-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
	-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
	box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
}
#navbar .sub li {
	float: none;
	border-bottom: 1px dotted #DCEDD6;
	border-right: none;
	padding: 7px 5px 7px 29px;
	height: auto !important;
	line-height: 1.4;
	font-weight: bold;
	font-size: 12px;
	text-transform: none !important;
	/*background: url(images/ico-arrow-subnav.png) no-repeat 18px 9px;*/
}
	#navbar .sub li:last-child,
	#navbar .sub li.last {border-bottom: none;}

#navbar .sub li span {
	font-weight: normal;
}

#navbar .sub .title {
	font-size: 16px;
	font-weight: normal;
	text-transform: none !important;
	margin: 0 0 5px;
	color: #023F27;
}
#navbar .sub a {
	font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;
}
#navbar .sub .title a {
	color: #023F27;
}


/*------------------------------------*\
	TYPE
\*------------------------------------*/
/*--- HEADINGS ---*/
h1{
	font: 2em 'Francois One', sans-serif;
	line-height:1.5;
	text-transform: uppercase;
	margin-bottom:.2em;
}
h2{
	font-size:1.5em;
	margin-bottom:1em;
	line-height:1;
}
h3{
	font-size:1.25em;
	margin-bottom:1.2em;
	line-height:1.2;
}
h4{
	font-size:1.125em;
	margin-bottom:.333em;
	line-height:1.333;
	color: #60B848 !important;
	font-weight: bold;
}
h5{
	font-weight:bold;
}
h5,
h6{
	font-size:1em;
	margin-bottom:1.5em;
	line-height:1.5;
}
h1,h2,h3,h4,h5,h6{
	color:#004B8D;
}

h1 img, h2 img, h3 img,
h4 img, h5 img, h6 img {
  margin: 0;
}

hr {
	border-style: dashed;
	border-width: 1px 0 0 0;
	border-color: #939598;
	margin-bottom: 10px;
	}

/*--- PARAGRAPHS ---*/
p{
	margin-bottom:1.5em;
}
#subtitle p {
	font-size: 1.5em;
	font-weight: bold;
	padding: .15em 0 1.5em 0;
	border-bottom: 1px dashed #939598
}

/*--- LINKS ---*/
a{
	text-decoration:none;
	color: #54B948;
}
a:visited{
	opacity:0.8;
}
a:hover{
	text-decoration:underline;
}
a:active,

.more-link:after,	/* <= CSS2.1 syntax */
.more-link::after{ 	/* CSS3 syntax */
	/* Too many people use &raquo; in their markup to signify progression/movement, that ain’t cool. Let’s insert that using content:""; */
	content:" >";
}


/*--- LISTS ---*/
ul,
ol{
	margin:0 0 1.5em 60px;
}
ul ul,
ol ol,
ul ol,
ol ul{
	/* Let’s take care of lists in lists */
	margin:0 0 0 60px;
}
dl{
	margin-bottom:1.5em;
}
dt{
	font-weight:bold;
}
dt:after,
dt::after{
	content:":";
}
dd{
	margin-left:60px;
}
/*--- QUOTES ---*/
blockquote{
	text-indent:-0.4em; /* Hang that punctuation */
}
blockquote b,
blockquote .source{
	/* Mark the source up with either a <b> or another element of your choice with a class of source. */
	display:block;
	text-indent:0;
}

/*--- GENERAL ---*/
q,
i,
em,
cite{
	font-style:italic;
	font-weight:inherit;
}
b,
strong{
	font-weight:bold;
	font-style:inherit;
}
mark{
	background:#ffc;
}
s,
del{
	text-decoration:line-through;
}
small{
	font-size:0.75em;
	line-height:1;
}

/*--- CODE ---*/
pre,
code{
	font-family:monospace;
	font-size:1em;
}
pre{
	overflow:auto;
	margin-bottom:1.5em;
	line-height:24px; /* Having to define explicit pixel values :( */
}
code{
	line-height:1;
}
/*------------------------------------*\
	IMAGES
\*------------------------------------*/
img{
	max-width:100%;
	height:auto;
	/* Give it some text styles to offset alt text */
	font-style:italic;
	color:#c00;
}
img.left	{ margin:0 20px 0 0; }
img.right	{ margin:0 0 0 20px; }

/*--- FLASH/VIDEO
object,
embed,
video{
	max-width:100%;
	height:auto;
}
---*/
/*------------------------------------*\
	CLASSES
\*------------------------------------*/
/*
Some not-too-pretty and insementic classes to do odd jobs.
*/
.left	{ float:left; }
.right	{ float:right; }
.clear	{ clear:both; float:none; }

.text-left		{ text-align:left; }
.text-right		{ text-align:right; }
.text-center,
.text-centre	{ text-align:center; }

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
.clearfix {
	display:-moz-inline-stack;
	display:inline-block;
	zoom:1;
	*display:inline;
}

/*------------------------------------*\
	CONTENT
\*------------------------------------*/

#feature .container {
	width: 950px;
	height: 422px;
	padding: 0;
	text-align: center;
	background: #ccc;
}
#content .container {
	width: 820px;
	padding: 28px 65px 80px 65px;
	background: #fff url(images/bg-content.png) no-repeat 85px bottom;
}
#home #content .container,
#product #content .container {
	width: 902px;
	padding: 40px 20px 40px 28px;
	background: #fff;
}

#product #content .container {
	background: #fff url(images/bg-content.png) no-repeat 85px bottom;
	padding-bottom: 80px;
}

#content .custom-grf {
	display: block;
	margin: 0 auto;
}

#content img.title_img {
	padding: 0 0 1.5em 0;
}

#content .tabs {
	padding: 2px 0 0;
	margin: -48px -20px 48px -28px;
}
	#content .tabs span {display: none;}
	#content .tabs .tab_1,
	#content .tabs .tab_contact {
		height: 96px;
		float: left;
	}
	#content .tabs .tab_1 {
		width: 747px;
		background: url(images/content-tab-1.png) no-repeat;
	}
	#content .tabs .tab_contact {
		display: block;
		width: 203px;
		background: url(images/content-tab-contact.png) no-repeat;
	}

/*------------------------------------*\
	FOOTER
\*------------------------------------*/
#footer .container {
	line-height: 1;
	padding:10px 65px !important;
	background: #60B848 !important;
}
#home #footer .container {
	line-height: 1;
	padding:10px 24px !important;
	background: #60B848 !important;
}
#product #prodfoot #footer .container {
	padding: 10px 0 !important;
}

#footer .meta {
	width:100%;
	margin:0;
	padding: 0;
	list-style:none;
	color: #fff;
	text-align:center;
}

#footer .meta li{
	float:left;
	display:block;
	padding: 0 15px;
	position: relative;
	display:inline;
	float:none;
}
#footer .copyright {
	color: #8E8E8A;
	font-size: 0.917em;
	margin-top: 8px;
}

#p_slideshows {
	width: 340px;
}
#p_details {
	width: 460px;
}
#p_details .title {
	text-transform: none;
	line-height:1;
	margin:0 0 10px;
}

.p_name {
	text-transform: none;
}
.p_desc {
	font-size: 16px;
	line-height: 20px;
	font-weight: bold;
}

.slider {
	width: 324px;
	overflow: hidden;
	position: relative;
}
.img_slideshow {
	list-style: none;
	margin: 0;
	padding: 0;
	min-height: 265px;
	position: relative;
}
.img_slideshow {
	margin: 0 0 21px;
}

.img_slideshow li {
	float: left;
}

span.arrow_left {
position: absolute;
	top: 110px;
	left: 8px;
}

span.arrow_right {
	text-align: right;
	float: right;
	width: 16px;
	height: 32px;
position: absolute;
	top: 110px;
	left: 300px;
}


.img_slideshow .caption {
	display: block;
	line-height: 1.3;
	text-align: center;
}

.btn_video {
	display: block;
	width: 303px;
	text-align: center;
	font-weight: bold;
	font-size: 14px;
	line-height: 1;
	color: #fff;
	padding: 6px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background: rgb(247,148,30); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(247,148,30,1) 0%, rgba(241,90,41,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(247,148,30,1)), color-stop(100%,rgba(241,90,41,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(247,148,30,1) 0%,rgba(241,90,41,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(247,148,30,1) 0%,rgba(241,90,41,1) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, rgba(247,148,30,1) 0%,rgba(241,90,41,1) 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7941e', endColorstr='#f15a29',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, rgba(247,148,30,1) 0%,rgba(241,90,41,1) 100%); /* W3C */
}
	.btn_video .ico {
		display: inline-block;
		vertical-align: middle;
		margin: 0 9px 0 0;
		width: 20px;
		height: 21px;
		background: url(images/ico_video.png) no-repeat;
}
	.btn_video .txt {
		vertical-align: middle;
}

.p_specs{
	list-style: none;
	margin: 0 0 28px -2px;
}
.p_specs li {
	margin: 0 0 15px;
	padding: 0 0 0 20px;
	background: url(images/ico_specs.png) no-repeat 0 3px;
}

.p_features {
	color: #fff;
	background: #54B948;
	padding: 0 0 10px;
}
.p_features .title {
	position: relative;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	line-height: 1;
	padding: 10px 9px;
	border-bottom: 1px solid #fff;
background: rgb(138,201,119); /* Old browsers */
background: -moz-linear-gradient(top, rgba(138,201,119,1) 0%, rgba(69,159,70,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(138,201,119,1)), color-stop(100%,rgba(69,159,70,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(138,201,119,1) 0%,rgba(69,159,70,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(138,201,119,1) 0%,rgba(69,159,70,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(138,201,119,1) 0%,rgba(69,159,70,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8ac977', endColorstr='#459f46',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(138,201,119,1) 0%,rgba(69,159,70,1) 100%); /* W3C */
}
	.p_features .title span {
		position: absolute;
		top: 0; right: 0; bottom: 0; left: 5px;
		display: block;
		background: url(images/ptrn_features.png);
	}
.p_features ul {
	margin: 10px 16px;
	list-style: none;
}
.p_features ul li {
	padding: 0 16px;
	background: url(images/ico_features.png) no-repeat 0 4px;
}

/* FORM / FORM */
/* BASE FORM DESIGN */
form.form {
	margin: 0;
	padding: 0;
}
form.form fieldset {margin: 0; padding: 0;border: none;}
form.form legend {
	font-size: 1.714em;
	font-weight: bold;
	margin: 0;
	padding: 0 0 10px 0;
}
form.form p {
	margin: 0 0 3px !important;
	padding: 0 0 0 0 !important;
	font-size: 14px !important;
	font-weight: bold;
}
form.form div {padding: 3px;}

form.form label {
	display: block;
	margin: 0;
	font-weight: bold;
	line-height: 1.8;
}
    form.form label.required {font-weight: bold;}


form.form input,
form.form textarea#comments {
	color: #6e787a;
	width: 200px;
	padding: 6px;
	margin: 0 10px 5px 0;
	-webkit-box-shadow:inset 0 1px 0 rgba(0,0,0,0.18);
	-moz-box-shadow:inset 0 1px 0 rgba(0,0,0,0.18);
	box-shadow:inset 0 1px 0 rgba(0,0,0,0.18);
	border: 1px solid #e8e8e8;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background: #f2f2f2;
}
	form.form input:focus {color: #505859;}

form.form input.warning {background: #ffbcbc;}

form.form select {
	padding: 0;
	margin: 0 0 15px 0;
	border: 1px solid gray;
	font-size: 14px;
}
form.form textarea {
	height: 90px;
	width: 350px;
	font-size: 14px;
	padding: 2px;
	border: 1px solid gray;
}
form.form textarea#comments {
	border: none;
	width: 200px;
	height: 180px;
}
form.form button {
	margin: 20px 0;
	width: auto;
	height: auto;
	font-size: 14px;
}

form.form input.box {width: 17px; border: none;}
form.form input.half {width: 175px;}
form.form input.short {width: 100px;}
form.form input.userfile {border: none;}

form.form select.multiple {width: 100%; height: 200px;}