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


/***Reset CSS***/
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, font, 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 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/***Body***/
body{
	background-color:#000;
}
.container{
	width:980px;
	margin:0 auto;
	position:relative;
}
@font-face{
	font-family:MAGNETO;
	src: url("MAGNETOB.ttf") format("truetype");
}
h1,h2{
	font-family:MAGNETO;
}
h1{
	font-size:72px;
}
h2{
	font-size:24px;
}
p{
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:18px;
}
#contentarea{
	background-color:#FFF;
	float:left;
	width:98.9%;
	margin:0 .1em;
}
header,footer,section,nav{
	display:block;
}
nav{
	padding:0 5px;
	position:absolute;
	right:0;
	top:4em;
}
#page{
	width:980px;
	margin:40px auto;
	position:relative;
}
/*Header*/
header{
	width:100%;
	position:relative;
	float:left;
	height:61px;
}
#topleft{
	background-image:url(images/top-left.png);
	height:61px;
	float:left;
	position:relative;
	width:55px;
}
#top{
	background-image:url(images/top.png);
	background-repeat:repeat-x;
	height:61px;
	width:89%;
	float:left;
	position:relative;
}
#topright{
		background-image:url(images/top-right.png);
	height:61px;
	float:left;
	position:relative;
	width:45px;
}
/*Content Area*/
#title{
	text-align:center;
	height:110px;
}
.textarea{
	margin: 0 .5em 0 .5em;
	background-color:#FFF;
}
#servicearea{
	margin: 1.5em 4em 0 4em;
	background-color:#FFF;
	padding-bottom:2em;
}
.service{
width:30%;
float:left;
border-right:#adadad 2px solid;
padding:1em 0.5em 1em;
}
.service h3{
	font-size:18px;
	padding: 0 0 1em 0;
}
#contact{
	width:90%;
	clear:both;
	background-color:#FFF;
	padding:2em .5em 1em .5em;
	height:350px;
}
#contact p{
	width:30%;
	height:100%;
	padding:0 1em 0 0;
	float:left;
}
#form{
	width:570px;
	text-align:left;
	float:left;	
}
#form label{
	display:block;
	float:left;
	margin-bottom: 10px;
	padding-right:20px;
	text-align:left;
	width:100px;
}
#message_box{
	float:right;
	width:320px;
}
#form textarea{
	background-color:#ebe9e9;
	height:200px;
	width:300px;
	margin-top:-7px;
	padding:10px 13px 40px 10px;
}
#form input{
	background-color:#ebe9e9;
	height:30px;
	margin:-7px 0 0;
	padding: 5px 0 0 8px;
	width:215px;
}
#send{
	margin:14px 0 0 436px;
	width:75px;
}
#form input.send{
	background:url(images/button.png);
	height:27px;
	width:69px;
}
/*Footer*/
footer{
	margin-bottom:30px;
	text-align:center;
	font-size:.825em;
	float:left;
	clear:both;
	width:100%;
	height:61px;
	
}
footer p{
	margin:30px;
	position:relative;
}
#bottomleft{
	background-image:url(images/bottom-left.png);
	height:58px;
	float:left;
	position:relative;
	width:55px;
}
#bottom{
	background-image:url(images/bottom.png);
	background-repeat:repeat-x;
	height:58px;
	width:89%;
	float:left;
	position:relative;
}
#bottomright{
		background-image:url(images/bottom-right.png);
	height:58px;
	float:left;
	position:relative;
	width:43px;
}
/*Panel*/
.panel {
position: fixed;
top: 50px;
left: 0;
display: none;
background: #000;
border:1px solid #111111;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
width: 330px;
height: auto;
padding: 30px 30px 30px 150px;
filter: alpha(opacity=85);

}
.panel h3{
	color:#fff;
}
.panel p{
margin: 0 0 15px 0;
padding: 0;
color: #fff;
}

.panel a, .panel a:visited{
margin: 0;
padding: 0;
color: #9FC54E;
text-decoration: none;
border-bottom: 1px solid #9FC54E;
}

.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid #ffffff;
}

a.trigger{
position: fixed;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 15px;
font-weight: 700;
background:#333333 url(images/plus.png) 85% 55% no-repeat;
border:1px solid #fff;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.trigger:hover{
position: fixed;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 20px;
font-weight: 700;
background:#222222 url(images/plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.active.trigger {
background:#222222 url(images/minus.png) 85% 55% no-repeat;
}
#socialmedia{
	width:150px;
	height:20px;
	float:left;
	margin: 0 0 0 60px;
}
#facebook{
	background-repeat:no-repeat;
	height:39px;
	width:38px;
	float:left;
	padding-right:10px;
}
#facebook a{
	background:url(images/facebook.png) no-repeat;
	height:39px;
	width:38px;
	float:left;
	border:none;
}
#facebook a:hover{
	background:url(images/facebookroll.png);
	background-repeat:no-repeat;
	height:39px;
	width:38px;
}
#twitter{
	background-repeat:no-repeat;
	height:37px;
	width:37px;
	float:left;
	margin:1px;
	
}
#twitter a{
	background:url(images/twitter.png) no-repeat;
	float:left;
	height:37px;
	width:37px;
	float:left;
	border:none;
}
#twitter a:hover{
	background:url(images/twitterroll.png);
	background-repeat:no-repeat;
	height:37px;
	width:37px;
}
.columns{
clear: both;
width: 330px;
padding: 0 0 20px 0;
line-height: 22px;
}

.colleft{
float: left;
width: 130px;
line-height: 22px;
}

.colright{
float: right;
width: 130px;
line-height: 22px;
}
ul{
padding: 0;
margin: 0;
list-style-type: none;
}

ul li{
padding: 0;
margin: 0;
list-style-type: none;
}