@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

body, html {padding:0; margin:0;}
body {width:100%; overflow-x:hidden}

.Clearfix{ clear:both;}
.Spacer{float:none; clear:both; height:20px;}
.SpacerY{float:left; padding:5px; width:50px;}

input[type=text], input[type=password], input[type=email]{padding:5px 5px 5px 30px; width:86%; border:1px solid #CCC;}
textarea{width:97%; border:1px solid #CCC; resize:none;}
textarea:focus{border:1px solid #999; outline:none;}
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus{border:1px solid #999; outline:none;}


@font-face{font-family:NotoNormal; src:url(../fonts/NotoSans-Regular.ttf);}
@font-face{font-family:NotoBold; src:url(../fonts/NotoSans-Bold.ttf);}

@keyframes HoverNav
{
	from{ background:none; color:#FFF;}
	to{ background:rgba(0, 0, 0, 0.9); }
}
@-moz-keyframes HoverNav
{
	from{ background:none; color:#FFF;}
	to{ background:rgba(0, 0, 0, 0.9);}
}
@-webkit-keyframes HoverNav
{
	from{ background:none; color:#FFF;}
	to{ background:rgba(0, 0, 0, 0.9);}
}
@keyframes SubMenuHoverNav
{
	from{ background:none; color:#FFF;}
	to{ background:rgba(0, 0, 0, 0.9); color:#999;}
}
@-moz-keyframes SubMenuHoverNav
{
	from{ background:none; color:#FFF;}
	to{ background:rgba(0, 0, 0, 0.9); color:#999;}
}
@-webkit-keyframes SubMenuHoverNav
{
	from{ background:none; color:#FFF;}
	to{ background:rgba(0, 0, 0, 0.9); color:#999;}
}

input[type=submit]{padding:10px 16px;  text-decoration:none; color:#FFF; font-family:NotoBold; font-size:15px; background:rgba(0, 0, 0, 0.9); border:1px solid #333; cursor:pointer;}
input[type=submit]:hover{color:#999;}

#HomeBody h1, #Body h1{font-family:NotoBold; font-size:22px; color:#333; margin:8px 0px;}
#HomeBody h2, #Body h2{font-family:NotoBold; font-size:18px; color:#666; margin:8px 0px;}
#HomeBody h3,{font-family:NotoBold; font-size:15px; color:#666; margin:0 0 2px 0; padding-bottom:8px; border-bottom:3px solid #333;}
#HomeBody p{font-family:NotoNormal; font-size:13px; color:#666; line-height:18px; }
ul{font-family:NotoNormal; font-size:13px; color:#666; list-style-type:square;}
ul li a:link, ul li a:visited{color:#333; text-decoration:none;}
ul li a:hover{ text-decoration:underline;}

#Body dl{font-size:13px; color:#666; padding-left:20px;}
#Body dl dt{font-family:NotoBold;}
#Body dl dd{font-family:NotoNormal; margin-left:15px;}

#HomeBody a:link, #Body a:link, #HomeBody a:visited, #Body a:visited{ font-family:NotoNormal; color:#666; text-decoration:none; font-weight:bold;}
#HomeBody a:hover, #Body a:hover{color:#333;}

.BigButton:link, .BigButton:visited{
	display:block;
	padding:10px 16px;
	text-decoration:none;
	color:#FFF;
	font-family:NotoBold;
	font-size:15px;	
	margin:2px 6px;
}
.BigButton:hover{
	color:#999;
	animation-name:HoverNav;
	-webkit-animation-name:HoverNav;
	animation-iteration-count: 1;
	-moz-animation-iteration-count: 1;
	-webkit-animation-iteration-count: 1;
	animation-fill-mode:forwards;
	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	animation-duration:0.5s;
	-webkit-animation-duration:0.5s;
	-moz-animation-duration:0.5s;
}
/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	10;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

/* Mobile Layout: 480px and below. */

.gridContainer {
	width: 100%;
	margin: 0;
	padding:0;
}
#InnerWrapper {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
header{background-image: url(../images/header.png); background-repeat:no-repeat; background-size:cover; float:left; clear:both; width:100%;}
#HeaderTop{width:100%; float:left; clear:both; margin-bottom:8px; margin-top:10px;}
#HeaderTop #LogoMain{float:left; margin:8px 0px 0px 6px;}
#HeaderTop #LogoMain img{width:180px; height:70px;}

#HeaderNavContainer{width:100%; float:left; clear:both; background:rgba(0, 0, 0, 0.9);}

#HeaderNav{float:right; margin-right:50px;}
#HeaderNav nav{list-style-type:none; padding:0; margin:0;}
#HeaderNav nav li{float:left;}
#HeaderNav nav li a:link, #HeaderNav nav li a:visited, #HeaderNav nav li a:hover {
	display:block;
	padding:8px;
	text-decoration:none;
	color:#FFF;
	font-family:NotoBold;
	font-size:15px;	
	margin:2px 6px;
}

#HeaderNav nav li div.SubMenu{display:none;}
#HeaderNav nav li:hover div.SubMenu{ display:none;}

#HeaderNavContainer .LogoIcon{float:left; margin-left:20px;}

.HeaderScroll{ position:fixed; top:0; background-color:#333; z-index:9999999; right:0; font-family:NotoBold; font-size:15px; background:rgba(0, 0, 0, 0.9);}
.ContactUsTop{display:none;}
/* Header End */
/* Body Section */
#HomeBody{width:100%;}
#HomeBody a:link, #HomeBody a:visited{ font-family:NotoNormal; color:#666; text-decoration:none; font-weight:bold;}
#HomeBody a:hover{color:#333;}
#ServicesContainer{width:100%; float:left; clear:both;}

.FullBlock{width:100%; margin:5px 0px; float:left;}
.LeftBlock{width:100%; float:left; padding:5px;}
.RightBlock{width:100%; float:left; padding:5px;}

.FullBlock .ServiceBlockLeftPortion{float:left; width:20%;}
.FullBlock .ServiceBlockRightPortion{float:left; width:78%; padding:5px 0px; margin-left:6px; }
.FullBlock h3{font-family:NotoBold; font-size:15px; color:#333; margin:0 0 2px 0; padding-bottom:8px; border-bottom:3px solid #333;}
.FullBlock p{font-family:NotoNormal; font-size:13px; color:#666; line-height:18px; margin-bottom:8px; }


ul.Portfolio{padding:5px 0px; margin:0; list-style-type:none; widows:100%; float:left;}
ul.Portfolio li{float:left; display:inline-block; margin:0px 10px; box-shadow:1px 1px 2px 2px #333; width:210px; height:200px;}
ul.Portfolio li img{border:none; outline:none;}

.PortfolioPagination{width:100%; float:left; clear:both; padding:5px 0px; background-color:#DDD; border:1px solid #999;}
.PortfolioPagination .PortfolioPaginationHolder{float:right; margin-right:15px;}
.PortfolioPaginationHolder span{display:inline-block;}
.PortfolioPaginationHolder #Prev{ cursor:pointer; background: url(../images/csg-517e5abd33a77.png) no-repeat -74px 0; width: 24px; height: 24px;}
.PortfolioPaginationHolder #Next{ cursor:pointer; background: url(../images/csg-517e5abd33a77.png) no-repeat 0 0; width: 24px; height: 24px;}

.WhatsNewList{width:100%; float:left;}
.WhatsNewList ul{width:100%; padding:0; margin:0;}
.WhatsNewList ul li{
	display:block;
	cursor:pointer;
	float:left;
	width:100%;
	padding:5px 0px;  
	border-bottom:1px solid #CCC; 
	background-image: linear-gradient(bottom, rgb(245,245,245) 5%, rgb(232,232,232) 53%);
	background-image: -o-linear-gradient(bottom, rgb(245,245,245) 5%, rgb(232,232,232) 53%);
	background-image: -moz-linear-gradient(bottom, rgb(245,245,245) 5%, rgb(232,232,232) 53%);
	background-image: -webkit-linear-gradient(bottom, rgb(245,245,245) 5%, rgb(232,232,232) 53%);
	background-image: -ms-linear-gradient(bottom, rgb(245,245,245) 5%, rgb(232,232,232) 53%);
	
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.05, rgb(245,245,245)),
		color-stop(0.53, rgb(232,232,232)));
}
.WhatsNewList ul li .DateContainer{float:left; margin:8px; text-align:center; width:13%;}
.DateContainer .Date{font-family:NotoBold; font-size:26px; color:#333; margin-bottom:5px;}
.DateContainer .Month{font-family:NotoNormal; font-size:14px; color:#666;}
.WhatsNewList ul li .WhatsNewText{float:right; padding:5px; font-family:NotoNormal; font-size:13px; color:#666; width:76%; line-height:18px;}

#BodyContainer{width:100%;}
#Body{width:100%; padding-bottom:30px;}
#Sidebar{width:100%;}

#Sidebar h2.SidebarTitle{font-family:NotoBold; font-size:17px; color:#333; margin:8px 0px 15px 0px;}

#BreadCrumbsContainer{width:100%; float:left; clear:both; padding:5px 0px; background-color:#EEEEEE; box-shadow:0px 1px 1px 1px #CCC; border-bottom:1px solid #CCC; font-size:12px; font-family:NotoNormal;}
#BreadCrumbsContainer .BreadCrumbsNav{float:left; list-style-type:none; padding:0; margin:0px 0px 0px 15px;}
#BreadCrumbsContainer .BreadCrumbsNav li{float:left; display:inline-block;}
#BreadCrumbsContainer .BreadCrumbsNav li a:link, #BreadCrumbsContainer .BreadCrumbsNav li a:visited{
	color:#333;
	font-weight:bold;
	font-weight:normal;
	text-decoration:none;
}
#BreadCrumbsContainer .BreadCrumbsNav li a:hover{ text-decoration:underline;}
#BreadCrumbsContainer .Active{ font-weight:bold;}


/* Body Section End */

/* Footer */
footer{float:left; clear:both; width:100%; background-image: url(../images/header.png); background-repeat:no-repeat; background-size:cover;}
footer .FooterBlock{width:100%; float:left;  margin:15px 10px 10px 10px;}
footer #FooterInner{width:99%; margin:0 auto;}
.FooterBlock h3{font-family:NotoBold; font-size:15px; color:#333; margin:0 0 2px 0; padding-bottom:8px; border-bottom:3px solid #333;}
.FooterBlock ul{padding:0; margin:0; list-style-type:none;}
.FooterBlock ul li{float:none;}
.FooterBlock ul li a:link, .FooterBlock ul li a:visited {
	display:block;
	padding:10px;
	text-decoration:none;
	color:#FFF;
	font-family:NotoNormal;
	font-size:13px;	
	margin:2px 6px;
}
.FooterBlock ul li a:hover { 
	text-decoration:underline;
}


.SocialBlock{float:left; width:100%; margin:15px 10px 10px 10px;}
.SocialBlock h3{font-family:NotoBold; font-size:15px; color:#333; margin:0 0 2px 0; padding-bottom:8px; border-bottom:3px solid #333;}
.SocialBlock ul{padding:0; margin:0; list-style-type:none;}
.SocialBlock ul li{padding:10px 0px 10px 40px; margin:5px 0px; background: url(../images/csg-517e5abd33a77.png) no-repeat;}
.SocialBlock ul li.facebook{background-position: -148px 0; width: 32px; height: 32px;}
.SocialBlock ul li.twitter{background-position: -312px 0; width: 32px; height: 32px;}
.SocialBlock ul li.linkedin{background-position: -230px 0; width: 32px; height: 32px;}

.SocialBlock ul li a:link, .SocialBlock ul li a:visited{
	min-width:155px;
	font-family:NotoNormal;
	font-size:13px;
	display:block;
	text-decoration:none;
	color:#FFF;
}
.SocialBlock ul li a:hover{ text-decoration:underline;}

.CopyrightText{float:right; text-align:right; padding:8px 15px; background-color:#333;}
.CopyrightText small{font-family:NotoNormal; color:#FFF; font-size:12px;}
.CopyrightText small a:link, .CopyrightText small a:visited{
	font-family:NotoNormal; 
	color:#FFF;
	text-decoration:underline;
	
}
.CopyrightText small a:hover{text-decoration:none;}

/* Footer End */




/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {

/* Header Starts */
header{}
#HeaderTop{margin-bottom:10px;}
#HeaderTop #LogoMain{margin:8px 0px 0px 6px;}

#HeaderNav nav li a:link, #HeaderNav nav li a:visited {
	display:block;
	padding:10px;
	text-decoration:none;
	color:#FFF;
	font-family:NotoBold;
	font-size:15px;	
	margin:2px 6px;
}
#HeaderNav nav li a:hover { 
	color:#999;
	animation-name:HoverNav;
	-webkit-animation-name:HoverNav;
	animation-iteration-count: 1;
	-moz-animation-iteration-count: 1;
	-webkit-animation-iteration-count: 1;
	animation-fill-mode:forwards;
	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	animation-duration:0.5s;
	-webkit-animation-duration:0.5s;
	-moz-animation-duration:0.5s;
}

.Current{background:rgba(0, 0, 0, 0.9); color:#999;}



#HeaderNav nav li:hover div.SubMenu .SubMenuInner{margin:0px auto; width:470px;}
#HeaderNav nav li div.SubMenu ul{float:left; list-style-type:none; padding:0; margin:0; width:95%;}
#HeaderNav nav li div.SubMenu ul li {float:none;}
#HeaderNav nav li div.SubMenu ul li a:link, #HeaderNav nav li div.SubMenu ul li a:visited {
	display:block;
	width:100%;
	padding:5px;
	text-decoration:none;
	color:#EEEEEE;
	font-family:NotoNormal;
	font-size:13px;	
	margin:2px;
}
#HeaderNav nav li div.SubMenu ul li a:hover{
	color:#999;
	animation-name:HoverNav;
	-webkit-animation-name:HoverNav;
	animation-iteration-count: 1;
	-moz-animation-iteration-count: 1;
	-webkit-animation-iteration-count: 1;
	animation-fill-mode:forwards;
	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	animation-duration:0.5s;
	-webkit-animation-duration:0.5s;
	-moz-animation-duration:0.5s;
}

#HeaderNav nav li div.SubMenu .SubMenuTitle{font-family:NotoBold; font-size:16px; color:#FFF; margin-left:8px; margin-bottom:5px; background:url(../images/SubMenuBorder.png) no-repeat 0% bottom; padding-bottom:20px;}

.ContactUsTop{display:block; position:fixed; top:0; right:0; color:#333; background:rgba(0, 0, 0, 0.9);}
.ContactUsTop a:link, .ContactUsTop a:visited{display:block; text-decoration:none; color:#FFF; font-family:NotoBold; font-size:15px; padding:12px 14px;} 
.ContactUsTop a:hover{
	animation-name:SubMenuHoverNav;
	-webkit-animation-name:SubMenuHoverNav;
	-moz-animation-name:SubMenuHoverNav;
	animation-iteration-count: 1;
	-moz-animation-iteration-count: 1;
	-webkit-animation-iteration-count: 1;
	animation-fill-mode:forwards;
	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	animation-duration:0.5s;
	-webkit-animation-duration:0.5s;
	-moz-animation-duration:0.5s;
}

/* Header End */
/* Body Section */
#HomeBody{margin-left:auto; margin-right:auto; max-width:900px; height:auto; padding:20px 5px 10px 5px;}
.FullBlock{width:100%; margin:5px 0px; float:left;}
.LeftBlock{width:48%; float:left; padding:5px;}
.RightBlock{width:48%; float:right; padding:5px;}


ul.Portfolio{padding:5px 0px; margin:0; margin-left:5px; list-style-type:none; widows:100%; float:left;}
ul.Portfolio li{float:left; display:inline-block; margin:0px 10px; box-shadow:1px 1px 2px 2px #333; width:200px; height:200px;}
ul.Portfolio li img{border:none; outline:none;}

#BodyContainer{margin-left:auto; margin-right:auto; max-width:960px; min-height:500px; padding:0px 5px 10px 5px;}
#Body{float:left; width:68%; padding-left:5px; padding-right:5px; box-shadow:3px 3px 10px #CCC;}
#Sidebar{float:right; width:30%;}
/* Body Section End */

/* Footer */
footer #FooterInner{width:92%; margin:0 auto;}
footer .FooterBlock{width:16%; float:left; margin:15px 10px 10px 10px;}

.SocialBlock{float:right; width:18%; margin:15px 10px 10px 10px;}


.GoTop{width:56px; height:76px; float:right; background:url(../images/move_top_button-1.png) no-repeat 50% 50%;}
/* Footer End */
}




/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
/* Header Starts */
header{ }
#HeaderTop{margin-bottom:15px;}
#HeaderTop #LogoMain{margin:8px 0px 0px 25px;}
#HeaderNav nav li div.SubMenu{display:none;}
#HeaderNav nav li:hover div.SubMenu{
	animation-name:SubMenuHoverNav;
	-webkit-animation-name:SubMenuHoverNav;
	-moz-animation-name:SubMenuHoverNav;
	animation-iteration-count: 1;
	-moz-animation-iteration-count: 1;
	-webkit-animation-iteration-count: 1;
	animation-fill-mode:forwards;
	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	animation-duration:0.5s;
	-webkit-animation-duration:0.5s;
	-moz-animation-duration:0.5s; 
	display:block;  
	position:absolute; 
	left:0; 
	right:0; 
	padding:10px; 
	background:rgba(0, 0, 0, 0.9); 
	z-index:999; 
	color:#999; 
	height:370px;
}

.SubMenuNormal{top:145px;}
.SubMenuScroll{top:39px;}
/* Header End */	

/* Body Section */
.WhatsNewList ul li .WhatsNewText{float:right; padding:5px; font-family:NotoNormal; font-size:13px; color:#666; width:80%; line-height:18px;}

/* Body Section End */

/* Request for Quote Form */
form#RequestForQuote{width:95%; float:left; padding:8px; box-shadow:0px 0px 1px 1px #999;}
form#RequestForQuote img{width:99%;}
form#RequestForQuote .FormTitle{text-align:center; font-family:NotoBold; font-size:17px; color:#333; margin:8px 0px 15px 0px;}
form#RequestForQuote .FormSubTitle{font-family:NotoBold; font-size:12px; color:#666; margin:12px 0px 8px 0px;}
.user{background:url(../images/icn_user.png) no-repeat 2%;}
.email{background:url(../images/icn_email.png) no-repeat 2%;}
.phone{background:url(../images/icn_phone.png) no-repeat 2%;}
.code{background:url(../images/icn_lock.png) no-repeat 2%;}


}