/*----------------------------------------------------
                 Mixel - CSS File
------------------------------------------------------*/


/* Global
------------------------------------------------------*/
html, body{width:100%; overflow:hidden}

body{
	font-family:Arial, Tahoma, Verdana;	
	font-size:12px;	
	margin:0 auto; padding:0;
	background-color:#373737;
	ackground-image:url(../images/bg-container.jpg);
	background-repeat:repeat-x;
	background-position:top;
	background-attachment:fixed;
	color:#a5a6a6;
	height:100%;
	background: rgb(69,72,77); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

}
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){
html, body{width:100%; overflow:auto}
}

*{
	margin:0;
	padding:0;
}
*:focus{
	outline:none; /* removes ugly dotted border but may make template more unsuable, up to you
				 if you want to keep it! */
}
.clr{
	clear:both
}
form{
	margin:0; padding:0;
}
hr{
	border:0;
	color:#d3d3d3;
	background-color: #d3d3d3;
	height: 1px;
}
hr.content-line{
	border:0;
	color:#d0d0d0;
	background-color: #d3d3d3;
	margin:30px 0px 30px 0px;
	height: 1px;
}


/* Default Element Styles
------------------------------------------------------*/
/* heading */
h1, h2, h3, h4, h5, h6{
	font-family:Arial, Helvetica, sans-serif; 
	font-weight:normal;
	color:#787777;
}
h1{
	font-size:33px; 
	line-height:30px; 
	margin-bottom:10px;
}
h2{
	font-size:28px; 
	line-height:28px; 
	margin-bottom:10px;
}
h3{
	font-size:24px; 
	line-height:20px; 
	margin-bottom:10px;
}
h4{
	font-size:22px; 
	line-height:18px; 
	margin-bottom:8px; 
	font-weight:bold;
}
h5{
	font-size:18px; 
	margin:3px 0px; 
	padding:0px; 
}
h6{
	font-size:16px; 
	margin:3px 0px; 
	padding:0px; 
}

/* links */
a{
	color:#0d364b; 
	text-decoration:underline;
}
a:visited{
	color:#a7a6a6; 
	text-decoration:none;
}
a:hover{
	color:#a7a6a6; 
	text-decoration:none;
}
a img{
	border:none
}
.imgcenter{
	float:left; 
	margin:0px 0px 10px 0px;
}
.imgleft{
	float:left; 
	margin:4px 12px 10px 0px;
}
.imgright{
	float:right; 
	margin:4px 0px 10px 12px;
}
.border{ 
	padding:4px;
	border:1px solid #ebebeb;
}

/* lists, blockquotes and paragraphs */
p, ul, ol, blockquote{
	font-size:12px;
	line-height:18px;
	margin-bottom:14px;
	color:#a5a6a6;
}
ul, ol{
	margin:10px 0 35px 40px;
}
li ol, li ul{
	font-size:1.0em;
	list-style:square;
	margin-bottom:0;
	margin-top:0;
}
li ol{
	list-style:decimal;
}
blockquote{
	font-style:italic;
	margin:0px;
	color:#6e7a7f;
	padding:0px 4px 2px 38px;
	background-image:url(../images/quote.png);
	background-position:0px 5px;
	background-repeat:no-repeat;
	float:left;
}


/* code */
code{
	font-family:Tahoma, Arial, Verdana;
	letter-spacing:1px;
	margin:25px 0 25px 0px;
	display:block;
	font-size:0.9em;
	border-left:4px solid #dddddd;
	padding:15px 10px;
}


/* Container
------------------------------------------------------*/
#container{
	width:960px;
	margin:0px auto;
	background-image:url(../images/glow-bg.png);
	background-repeat:no-repeat;
	background-position:top center;
}


/* Header
------------------------------------------------------*/
#header{
	width:960px;
	top:0px;
	position:fixed;
	z-index:20;
	/*background-color:#FF0000*/
	
background: rgb(180,221,180); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(180,221,180,1) 0%, rgba(131,199,131,1) 17%, rgba(82,177,82,1) 33%, rgba(0,138,0,1) 67%, rgba(0,87,0,1) 83%, rgba(0,36,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(180,221,180,1)), color-stop(17%,rgba(131,199,131,1)), color-stop(33%,rgba(82,177,82,1)), color-stop(67%,rgba(0,138,0,1)), color-stop(83%,rgba(0,87,0,1)), color-stop(100%,rgba(0,36,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4ddb4', endColorstr='#002400',GradientType=0 ); /* IE6-9 */
height: 115px;
}
.logo{
	width:172px;
	height:64px;
	margin-top:30px;
	float:left;
}

/* Mainmenu Styling */
#mainmenu{
	width:373px;
	margin:48px 0px -126px 0px;
	float:right;
}
.navigation{
	width:363px;
	float:left;
	list-style-type:none;
}
.navigation ul{
	margin:0px; 
	padding:0px; 
	list-style-type:none; 
	position:relative;
	clear:both;	
}
.navigation li{	
	list-style-type:none; 
	padding:0px; 
	margin:0px; 
	float:left;
	z-index:100; 
	position:relative;
}
.navigation li a{
	font-size:18px;
	text-decoration:none;
	color:#ffffff !important; 
	display:block;
	margin:0px;
	padding:0px 25px 10px 0px;
	float:left;
	z-index:100;	
}
.navigation li.current a, .navigation li a:hover, .navigation li.current li a:hover{
	text-decoration:none;
	color: #ffffff !important; 	
}
.navigation li.current li a{
	text-decoration:none;
	color:#ffffff !important; 
}


/*  Slideshow
------------------------------------------------------*/
#slideshow-container{
	width:805px;
	margin:0px auto;
}
#slideshow{
	width:493px;
	height:347px;
	margin:150px 0px 0px -116px;
	background-image:url(../images/slide-monitor.png);
	background-repeat:no-repeat;
	position:fixed;
	z-index:80;
	float:left;
}

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){
#slideshow{
	margin:220px 0px 0px -116px;
	top:0
}
}


#slideshow ul, #slideshow li{
	width:385px;
	height:218px;
	margin:8px 0px 0px 27px; 
	padding:0px;
	list-style-type:none;
}


/* Content
------------------------------------------------------*/
.content-box{
	width:874px;
	height:513px;
	margin:133px 0px 0px 80px;	
	background-image:url(../images/box-bg.jpg);
	background-repeat:repeat-x;
	float:left;
}
* html .content-box{margin-left:40px;}
.content-box-left{
	width:859px;
	height:513px;
	background-image:url(../images/box-bg-left.jpg);
	background-repeat:no-repeat;
	float:left;
}
.content-box-right{
	width:15px;
	height:513px;
	background-image:url(../images/box-bg-right.jpg);
	background-repeat:no-repeat;
	float:right;
}


/* Page Styling
------------------------------------------------------*/
#page{
	width:960px;
	margin:0px auto;
	position:relative;
	z-index:10;
}
#home, #about, #services, #gallery{
	width:960px;
	height:513px;
	margin:-76px 0px 360px 0px;
	float:left;
	background:white;
	-moz-box-shadow: 0 5px 15px #dcdcdc;
-webkit-box-shadow: 0 5px 15px #dcdcdc;
box-shadow: 0 18px 15px #dcdcdc;
}
#contact{
	width:960px;
	height:513px;
	margin:-76px 0px 660px 0px;
	float:left;
}
* html #home, * html #about, * html #services, * html #gallery, * html #contact{margin:0px 0px 360px 0px;}
.front-content{
	width:417px;
	margin:60px 0px 0px 0px;
	float:left;
	position:absolute;
	right:60px;
}
#front-content-scroll, #front-content-scroll2{
	width: 420px;
	height: 350px;
	overflow: auto;
	position: relative;
	margin:60px 0px 0px 0px;
	padding: 15px;
	position:absolute;
	right:40px;
}
.front-content h3, #front-content-scroll h3, #front-content-scroll2 h3{
	margin:-10px 0px 25px 0px;
	color:#66CC00;
}
.front-column{
	width:190px;
	margin-top:15px;
	float:left;
}
.front-icon{
	margin:0px 22px;
}
.front-spacer{
	display:block;
	width:37px;
	float:left;
}
.services{
	margin-bottom:18px;
}


/* Gallery
------------------------------------------------------*/
#gallery-page{
	width:437px;	
	margin-top:0px;
	float:left;
}
#gallery ul{
	width:437px;
	margin:0px; 
	padding:0px; 
	list-style-type:none;
	float:left;
}
#gallery ul li{
	width:125px;
	height:122px;
	background-image:url(../images/gallery-shadow.png);
	background-position:bottom;
	margin:5px 20px -3px 0px;
	float:left;
}
#gallery ul li.gl-last{
	margin-right:0px;
	float:left;
}


/* Footer
------------------------------------------------------*/
/* Social Icon Styling */
#social-icon{
	width:360px;
	height:40px;
	margin-left:600px;
	position:fixed;
	top:695px;
}
.social{
	width:180px;
	float:right;
	list-style-type:none;
}
.social ul, .social li{
	margin-top:-20px;	
	list-style-type:none; 
}
.social li a{
	display:block;
	padding:0px 9px 0px 0px;
	float:left;
}

/* Footer Styling */
#footer{
	width:960px;
	color:#d3d3d3;
	margin:70px auto 0px auto;
}
#footer-copyright{
	width:600px;
	position:fixed;
	top:690px;
	float:left;
}


/* Contact
------------------------------------------------------*/
form{
	margin:0; 
	padding:0;
}
fieldset{
	border:0;
	margin:0;
	padding:0; 
}
#contactFormArea label{
	width:60px;
	font-size:12px;
	color:#a5a6a6;
	padding-right:15px;
	margin-top:6px;
	float:left; 
}
#contactFormArea{
	width:410px; 
	margin-top:0px; 
	color:#606060; 
	float:left;
}
.textfield{
	background-color:#ffffff; 
	font-size:13px; 
	border:1px solid #d7d7d7; 
	width:305px; 
	padding:5px 5px 5px 5px; 
	margin:0px 0px 15px 0px; 
	color:#6b6b6b;
}
.input-submit{
	background-image:url(../images/but-send.png); 
	background-repeat:no-repeat;
	margin:0px 15px 0px 0px;
	padding:0px; 
	border:0px; 
	width:91px; 
	height:34px; 
	cursor:pointer; 
	float:right; 
}
.textarea{
	background-color:#ffffff; 
	font-family:Arial, Helvetica, sans-serif;
	overflow-y:hidden;
	font-size:13px; 
	border:1px solid #d7d7d7; 
	width:305px; 
	padding:5px 5px 5px 5px; 
	margin:0px; 
	color:#6b6b6b;
}
.buttoncontact{
  	background-image:url(../images/but-send.png); 
	background-repeat:no-repeat;
	margin:10px 15px 0px 0px;
	padding:0px; 
	border:0px; 
	width:91px; 
	height:34px; 
	cursor:pointer; 
	float:right; 
}
.require{
	float:right;
	display:inline;
	color:#f00;
	font-weight:bold;
	margin-right:8px;
}
.loading{
    background:url(../images/loading.gif) top left no-repeat;
    padding-left:20px;
    margin-top:20px;
    float:left;
}
.success {
	text-align:center;
    margin:15px 0;
    font-size:11px;
    color:#3F9153;  
    padding:8px 10px 8px 37px;
    background:#D7F7DF url(../images/ok.png) no-repeat;
	background-position:57px 4px;
    border:1px solid #A3F7B8
}