@charset "UTF-8";
/* CSS Document */


/*    DIVS    */
#wrap {
	text-align:center;
	width:850px;
	height:auto;
	margin-left: auto;
	margin-right: auto;
	top: 0;
	}
	
#header {
	position: relative;
	top:0px;
	width:850px;
	height:100px;
	}
	
#logo {
	float: left;
	}

#title {
	position: relative;
	left:15px;
	top: -3px;
	text-align: left;
	width: 845px;
	height: auto;
	margin-bottom: 15px;
	}

#subnavbar {
	position:relative;
	width:705px;
	height:19px;
	top: 8px;
	left: 141px;
	background-color: #4d4547;
	text-align: center;
	z-index: 0;
	}

#subnavbar2 {
	position:relative;
	top: 0px;
	left: -125px;
	width:830px;
	height:19px;
	text-align: center;
	}

#content {
	position: relative;
	width: 846px;
	height: auto;
	background-color: #231f20;
	overflow: hidden;
	}

#featured {
	position:relative;
	top: -11px;
	left: 1px;
	}

#testimonial_images {
	float: right;
	text-align: center;
	padding-right: 15px;
	}

#bgimage {
	position:relative;
	top: -11px;
	left: 1px;
	}

#about {
	position: absolute;
	top: 32px;
	left:569px;
	height: 290px;
	width: 258px;
	background-color: black;
	opacity: .7;
	z-index: 4;
	padding: 10px 10px 10px 10px;
	line-height: 20px;
	}
	
#widget1 {
	float:left;
	margin: 0px 10px 5px 16px;
	width: 261px;
	height: 222px;
	}

#widget2 {
	float: left;
	margin: 0px 5px 5px 5px;
	width: 261px;
	height: 222px;
	}
	
#widget3 {
	float: left;
	margin: 0px 10px 5px 10px;
	width: 261px;
	height: 222px;
	}

#widget4 {
	float: left;
	margin: 0px 0px 0px 0px;
	width: 195px;
	height: 166px;
	}

#widget5 {
	float: left;
	margin: 0px 0px 0px 0px;
	width: 195px;
	height: 166px;
	}

#widget6 {
	float: left;
	margin: 0px 0px 0px 0px;
	width: 195px;
	height: 166px;
	}

#widget7 {
	float: left;
	margin: 0px 0px 0px 0px;
	width: 261px;
	height: 222px;
	}

#features {
	width: 400px;
	float: left;
	text-align: left;
	margin: 0px 10px 5px 10px;
	}

#moreinfo {
	width: 400px;
	float: right;
	text-align: center;
	margin: 0px 10px 25px 10px;
	}

#gallery {
	width: 400px;
	float: right;
	}
	
#footer {
	position: relative;
	top: 30px;
	height: 50px;
	text-align: center;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 11px;
	color:#111010;
	}

#abouttext {
	width: 415px;
	height: 460px;
	float: left;
	}

#aboutimage {
	width: 415px;
	height: 460px;
	float: right;
	}

#partners {
	margin: 0px 5px 15px 11px;
	width: 825px;
	height: 302px;
	}

#partnersimg {
	background-color: white;
	padding: 5px 5px 10px 5px;
	}

#readmore {
	margin: 0px 5px 15px 11px;
	width: 400;
	height: 44px;
	}

#readmoreimg {
	background-color: #d4aa80;
	padding: 5px 5px 10px 5px;
	}

#hardwareimg {
	position: relative;
	width: 690px;
	height:30px;
	left: 72px;
	background-color: white;
	padding: 10px 5px 10px 5px;
	}

#address {
	width: 415px;
	height: 530px;
	float: left;
	}
#form {
	text-align: left;
	position: relative;
	left: 80px;
}

#form p {
	text-indent: 0px;
	}

#contactform {
	width: 345px;
	height: 530px;
	float: right;
	text-align: right;
	padding: 0px 80px 20px 0px;
	}
#contactform p {
	text-indent: 0px;
}

#contactform li {
	list-style-type:none;
}

#contactform input, #contactform textarea {
	padding: 5px;
	width: 200px;
	font-family: Helvetica, sans-serif;
	font-size: 12px;
	margin: 0px 0px 10px 15px;
	border: 1px solid black;
}

#contactform textarea {
	height: 90px;
}


#contactform input.submit-button {
	width: 79px;
	height: 30px;
	float: right;
	background-image: url(http://hhwindows.com/Assets/send.jpg);
	color:#d4aa80;
	font-family: 'FagoNo', sans-serif;
	font-size: 16px;
}

label {
	float: left;
	text-align: right;
	margin-right: 15px;
	width: 100px;
	padding-top: 5px;
	font-size: 12px;
}

.testimonial {
	background-color: #171314;
	padding: 15px;
	width: 670px;
	height: auto;
	line-height: 18px;
	margin: 0px 40px 0px 70px
	}

#tweet {
	position: absolute;
	top: 280px;
	left: 85px;
	text-align: center;
	}
	
/* IMAGE STYLING */

a img {
	filter:alpha(opacity=100);
	-moz-opacity: 1.0; 
	opacity: 1.0;
	-khtml-opacity: 1.0;
	-webkit-transition:opacity .5s; 
	-moz-transition: opacity .5s; 
	-o-transition: opacity .5s; 
	transition: opacity .5s
	}
a:hover img {
	filter:alpha(opacity=70); 
	-moz-opacity: 0.7; 
	opacity: 0.7;
	-khtml-opacity: 0.7;
	-webkit-transition:opacity .25s; 
	-moz-transition: opacity .25s; 
	-o-transition: opacity .25s; 
	transition: opacity .25s
	}
dl {
	display: inline;
	overflow:hidden;
	}
dt {
	display: inline;
	float: left;
	}

.gallery-item {
	width: 120px;
	height: 120px;
	display: inline;
	}

.gallery-icon {
	width: 100px;
	height: 100px;
	display: inline;
	margin: 10px;
	}

.galleryimg {
	margin: 10px;
	}

.testimonialimg {
	padding: 0px 10px 10px 0px
	}
a.widgetimage img {
	margin-top:5px;
	filter:alpha(opacity=75);
	-moz-opacity: 0.5; 
	opacity: 0.5;
	-khtml-opacity: 0.5;
	}

a.widgetimage:hover img {
	margin-top:5px;
	filter:alpha(opacity=100); 
	-moz-opacity: 1.0; 
	opacity: 1.0;
	-khtml-opacity: 1.0; 
	}
	
.partnerimg {
	margin: 0px 10px 0px 10px;
	}
.hardwareimg {
	margin: 0px 10px 0px 10px;
	float:left;
	}

.tech {
	padding:0px 30px 0px 30px;
	}
	
/* LIST STYLING */

ul.list { 
	list-style-type: disc;
	text-align: left;
	line-height: 20px;
	}

#features li {
	margin-left: 15px;
	line-height: 18px;
	}
	
#subnav {
	text-align: center;
	list-style-type:none;
	padding-top:2px;
	padding-left: 0px;
	overflow:hidden;
	display: inline;
	z-index:3;
	}
	
#subnav li {
	float:left;
	display: inline;
	text-align: center;
	}



/*    FONT STYLING  */
body {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 14px;
	color:#d4aa80;
	background: url("http://hhwindows.com/Assets/bg.jpg") fixed;
	}
a:link {
	color:#8a6138;
	} 
a:visited {
	color:#8a6138;
	}
a:hover {
	color:#d4aa80;
	} 
a:active {
	color:#8a6138;
	} 
p {
	font-family: Helvetica, Arial, sans-serif;
	text-align: left;
	font-size: 14px;
	color:#d4aa80;
	line-height: 18px;
	text-indent: 30px;
	padding-left: 20px;
	padding-right: 20px;
	}
.quote {
	text-align: center;
	width: 440px;
	}
.thequote {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 13px;
	line-height: 23px;
	color:#d4aa80;
	}
.who {
	color:#73614f;
	}
	
.testname {
	color:#d4aa80;
	font-family: 'FagoNo', sans-serif;
	text-decoration: none;
	font-size: 15px;
	text-align: right;
	 }
	 
.widgettitle {
	float:left;
	color:#d4aa80;
	font-family: 'FagoNo', sans-serif;
	font-size: 16px;
	text-decoration:none;
	}

	
@font-face {
    font-family: "FagoNo";
    src: url(http://hhwindows.com/Assets/FagoNo.otf),
		url(http://hhwindows.com/Assets/FagoNo.eot);
    }

#nav a {
	color:#d4aa80;
	font-family: 'FagoNo', sans-serif;
	font-size: 16px;
	padding:0 20px;
	display:block;
	text-decoration:none;
	}

#nav a:hover {
	color:#9b7d61;
	font-family: 'FagoNo', sans-serif;
	font-size: 16px;
	padding:0 20px;
	display:block;
	text-decoration:none;
	}
	
#navigation .current a {
	color:white;
	font-family: 'FagoNo', sans-serif;
	font-size: 16px;
	padding:4px 20px 10px;
	display:block;
	text-decoration:none;
	background:url("http://hhwindows.com/Assets/indicator.png") center no-repeat;
	}

#navigation .current span a {
	color:white;
	font-family: 'FagoNo', sans-serif;
	font-size: 16px;
	padding:10px 20px 10px;
	display:block;
	text-decoration:none;
	background:url("http://hhwindows.com/Assets/indicator.png") center no-repeat;
	}

#navigation .current a:hover {
	color:white;
	font-family: 'FagoNo', sans-serif;
	font-size: 16px;
	padding:4px 20px 10px;
	display:block;
	text-decoration:none;
	background:url("http://hhwindows.com/Assets/indicator.png") center no-repeat;
	}

#navigation .current_NoSub a {
	color:white;
	font-family: 'FagoNo', sans-serif;
	font-size: 16px;
	padding:4px 20px;
	display:block;
	text-decoration:none;
	}

#navigation .current_NoSub a:hover {
	color:white;
	font-family: 'FagoNo', sans-serif;
	font-size: 16px;
	padding:4px 18px;
	display:block;
	text-decoration:none;
	}
	
#subnav a {
	color:#d4aa80;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	padding:4px 18px 5px 18px;
	display:block;
	text-decoration:none;
	}

#subnav a:hover {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	color:white;
	padding:4px 18px 5px 18px;
	display:block;
	text-decoration:none;
	}

h1 {
	color:#d4aa80;
	text-align: left;
	font-family: 'FagoNo', sans-serif;
	text-decoration: none;
	font-size: 16px;
	font-weight: normal;
	}
	
h2 {
	color:#d4aa80;
	text-align: right;
	padding-right: 45px;
	font-family: 'FagoNo', sans-serif;
	text-decoration: none;
	font-size: 16px;
	font-weight: normal;
	}

h3 {
	color:#d4aa80;
	text-align: center;
	font-family: 'FagoNo', sans-serif;
	text-decoration: none;
	font-size: 20px;
	font-weight: normal;
	}
	
h4 {
	color:#d4aa80;
	text-align: left;
	padding-right: 45px;
	font-family: 'FagoNo', sans-serif;
	text-decoration: none;
	font-size: 20px;
	font-weight: normal;
	}
	
/* SLIDER STYLING */

#s3slider { 
   width: 844px; /* important to be same as image width */ 
   height: 309px; /* important to be same as image height */
   position: relative; /* important */
   overflow: hidden; /* important */
}

#s3sliderContent {
   width: 844px; /* important to be same as image width or wider */
   position: absolute; /* important */
   top: 0; /* important */
   left: 0px;
   margin-left: 0; /* important */
}

.s3sliderImage {
   float: left; /* important */
   position: relative; /* important */
   display: none; /* important */
}

.s3sliderImage span {
   position: absolute; /* important */
   left: 0;
   font: 10px/15px Arial, Helvetica, sans-serif;
   width: 374px;
   background-color: #000;
   filter: alpha(opacity=0); /* here you can set the opacity of box with text */
   -moz-opacity: 0.0; /* here you can set the opacity of box with text */
   -khtml-opacity: 0.0; /* here you can set the opacity of box with text */
   opacity: 0.0; /* here you can set the opacity of box with text */
   color: #fff;
   display: none; /* important */
   top: 0;

   /*
       if you put
       top: 0; -> the box with text will be shown at the top of the image 
       if you put
       bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}

.clear {
   clear: both;
}

/* ROLLOVER NAVIGATION STYLES */

#navigation {
	position: relative;
	top: 0px;
	z-index: 1;
	}
#navbar {
	position: relative;
	z-index: -1;
	top: 8px;
	width:705px;
	height:26px;
	left: 141px;
	background-color: #231f20;
	}
ul#topnav {
	position: relative;
	width:800px;
	height:26px;
	top: 46px;
	left: 21px;
	list-style: none;
	position: relative; /*--Set relative positioning on the unordered list itself - not on the list item--*/
	}
ul#topnav li {
	float: left;
	margin: 0;
	color:#d4aa80;
	font-family: 'FagoNo', Arial, sans-serif;
	font-size: 16px;
	padding:0px 3px;
	text-decoration:none;
	}
ul#topnav li a {
	display: block;
	text-decoration: none;
	color:#d4aa80;
	font-family: 'FagoNo', Arial, sans-serif;
	font-size: 16px;
	padding:4px 9px;
	text-decoration:none;

	}
ul#topnav li a:hover {
	color:#9b7d61;
	font-family: 'FagoNo', sans-serif;
	font-size: 16px;
	padding:4px 12px;
	display:block;
	text-decoration:none;
	}
ul#topnav li span {
	float: left;
	position: absolute;
	left: 120px; top:26px;
	display: none; /*--Hide by default--*/
	width:671px;
	height:14px;
	background-color: #4d4547;
	text-align: center;
	padding-bottom: 5px;
	}
ul#topnav li:hover span { 
	display: block; 
	padding:0px 17px 5px 17px;
	} /*--Show subnav on hover--*/

ul#topnav li span a {
	display: inline; 
	color:#d4aa80;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	text-decoration:none;
	}
ul#topnav li span a:hover {
	display: inline; 
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	color:white;
	text-decoration:none;
	background: none;
	}
ul#topnav li.current span {
	display: none; 
	} 

ul#topnav li.current span a {
	display: none; 
	color:#d4aa80;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	text-decoration:none;
	background: none;
	} 
	
/* Custom Styles For The Social Media Widget Icons */

.socialmedia-buttons {
	margin-top: 5px;
}

.smw_left {
	text-align: left;
}

.smw_center {
	text-align: center;
}

.smw_right {
	text-align: right;
}

li.Social_Widget a {
	padding: 0 !important;
	margin: 0 !important;
	background: none !important;
}
	
.socialmedia-buttons img {
	border: 0;
	border: 0 !important;
	margin-right: 10px !important;
	display: inline;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	transition: all 0.2s ease;
}

.socialmedia-buttons a {
	background: none !important;
}

.socialmedia-buttons a:hover {
	text-decoration: none;
	border: 0;
}
.socialmedia-buttons img.fade:hover {
	opacity: 1 !important;
	-moz-opacity: 1 !important;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	transition: all 0.2s ease;
}

.socialmedia-buttons img.scale:hover {
	-moz-transform: scale(1.2);
	-webkit-transform: scale(1.2);
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-ms-zoom: 1.2;
	transition: all 0.2s ease;
}
	
.socialmedia-buttons img.bounce:hover {
	transform: translate(0px, -2px);
	-moz-transform: translate(0px, -2px);
	-webkit-transform: translate(0px, -2px);
	-webkit-transition: -webkit-transform 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	transition: all 0.2s ease;
	
}

.socialmedia-buttons img.combo:hover {
	transform: translate(0px, -4px);
	-moz-transform: scale(1.1) translate(0px, -4px);
	-webkit-transform: scale(1.1) translate(0px, -4px);
	-ms-zoom: 1.1;
	opacity: 1 !important;
	-moz-opacity: 1 !important;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	transition: all 0.2s ease;
}

.align-right { float:right; margin: 0 0 15px 15px; }

.align-left { float:left; margin: 0 15px 15px 0; }