/*-------------------------------------------------------
* Filename: styles.css
* Version: 1.0.0
* Website: http://www.themeflash.com
* Author: system32
* Description: Handles the site layout.
-----------------------------------------------------*/

/* Global 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, font,img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, 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-weight: inherit; 
	font-style: inherit; 
	font-size: 100%; 
	font-family: inherit;  
}   

body{  
	font:normal 11px/20px  Tahoma, "Trebuchet MS", Arial, sans-serif;
	color:#b0b0b0;
	background:#18191b url(../images/bg.jpg) top center; 
}

.clear {
	clear:both; 
}

.fr	{
	float:right;
}

.fl{
	float:left;
}

.imgleft{
margin-right:20px;
margin-bottom:20px;
}

.imgright{
margin-left:20px;
margin-bottom:20px;
}
/*******************
Scroll
********************/

 #pane1  {	width:680px; height:280px;}
 #pane2  {	width:680px; height:280px;}
 #pane3  {	width:680px; height:280px;}
 #pane4  {	width:680px; height:300px;}
 #pane5  {	width:680px; height:300px;}
 #pane6  {	width:680px; height:300px;}

.left .jScrollPaneTrack 		{	left: 0;right: auto;}
	.left a.jScrollArrowUp 		{	left: 0;right: auto;}
	.left a.jScrollArrowDown 	{	left: 0;right: auto;}


/*******************
HEADINGS 
********************/
h1{
	margin:0;
	padding: 0px 0 0 0px;
	color:#18191b;
	font:normal 28px/34px "Trebuchet MS", Tahoma, Arial, sans-serif;
	letter-spacing:-1px;
}

h2{
	margin:0;
	padding:0px;
	color:#18191b;
	font:normal 25px/30px "Trebuchet MS",Tahoma, Arial, sans-serif;
	letter-spacing:-1px;
}
h3{
	padding:0px;
	color:#18191b;
	font:normal 22px/28px "Trebuchet MS",Tahoma, Arial, sans-serif;
	letter-spacing:-1px;
	
}
h4{
	margin:0;
	padding:0px;
	color:#18191b;
	font:normal 18px/22px "Trebuchet MS",Tahoma, Arial, sans-serif;
	letter-spacing:0px;
}

h5{
	margin:0;
	padding:0px;
	color:#18191b;
	font:normal bold 12px/20px "Trebuchet MS",Tahoma, Arial, sans-serif;
}
h6{
	margin:0;
	padding:0px;
	color:#18191b;
	font:normal bold 10px/16px "Trebuchet MS",Tahoma, Arial, sans-serif;
}

p{
	font:normal 11px/20px  Tahoma, "Trebuchet MS", Arial, sans-serif;
	color:#18191b;
	margin:0 0 10px 0;

}

a{
	text-decoration:none;
	color:#18191b;
}
a:hover{
	color:#515151; 
	 	text-decoration:none;
	 
}

a.readmore{
	color:#fff; 
	background:#18191b;
	border:1px solid #343539;
	font-size:9px;

	padding: 4px 10px;
	text-decoration:none;
	text-transform:uppercase;
}
a.readmore:hover{
	text-decoration:none;
	color:#fff;
	padding: 4px 10px;
	border:1px solid #343539;
	background:#9f9f9f;
}

/*************************
header
************************/
#pagewrap{
	width:800px;
	margin-right:auto;
	margin-left:auto;
}

.header{
	width:780px;
	height:120px;
	margin:10px auto;
	text-align:center;
	}

	.header img.logo{
	margin:10px 0;
	}

#main_background{ 
	background:	url(../images/bg2.png) 0 0 no-repeat;
	width:788px;
	position:relative;
	display:block;
	height:409px;
	margin-left:auto;
	margin-right:auto;
	}
	
.social_links{
	height:25px;	 
	margin:0 10px 0 0;
	text-align:right;
}
/****************************
		menu
*****************************/
.home, .services, .about, .works, .contact {
	background: transparent url(../images/menucontent.gif) no-repeat;
	border:0px none;
	display: block;
	float: left;
	height: 27px;
}
.home {
	background-position: 0px 0px;
	width: 120px;
}

.home:hover, .home.jFlowSelected {
	background-position: 0px -27px;
		width: 120px;
}
.about {
	background-position: -120px 0px;
		width: 120px;
}
  .about:hover, .about.jFlowSelected {
	background-position: -120px -27px;
		width: 120px;
}
.services {
	background-position: -240px 0px;
		width: 130px;
}
  .services:hover, .services.jFlowSelected {
	background-position: -240px -27px;
		width: 130px;
}
.works {
	background-position: -360px 0px;
		width: 120px;
}
  .works:hover, .works.jFlowSelected{
	background-position: -360px -27px;
		width: 120px;
}

.contact {
	background-position: -480px  0px;
		width: 120px;
}
  .contact:hover, .contact.jFlowSelected {
	background-position: -480px -27px;
		width: 120px;
}


	

/*************************
content
************************/
.content{
	padding:30px;
	}
	.content h3 {
			margin-bottom:10px; 
			color:#343434;
			}
	.content h4 {
			margin-bottom:10px; 
			color:#343434;
			}
		
/*************************
footer
************************/

.footer{
	width:537px;
	height:40px;
	padding-top:12px;
	background:url(../images/footer.png) top center;
	color:#fff;
	margin:auto;
	text-align:center; 
	}
	
/*************************
workspage
************************/

.imgborder {
	border:1px solid #424547;
	padding:3px;
}

.panel {
	clear:both;
	display:block;
	width:100%;
	overflow:hidden;
	height:100%;
	margin:10px 0;
	padding:10px 0;
	border-bottom:1px solid #424547;
}
.thumb {
	width:250px;
	float:left;
	margin:0 30px 0px 0;
}
.details {
	width:360px;
	float:left;
}

/*************************
contact page
************************/

.location {
	float:left;	
	width:45%;
}



#contactarea {
	width:340px;
	margin:0px auto;
	margin-right:10px;
	text-align:left;
	padding:5px;
	float:left;
}

.inputbox {
	border: 1px solid #424547;
	background:#fff;
	width: 270px;
	color:#18191b;
	margin:2px 0;
	padding: 4px;
}

.inputlabel {
	width:100px;
	color:#18191b;
	display:inline-block;
}

#textarea {
	border: 1px solid #424547;
	background:#fff;
	color:#18191b;
	width:270px;
	margin:2px 0;
	padding: 4px;
}

#submitbutton {
	border: 1px solid #424547;
	background:#18191b;
	margin:2px 0;
	color:#fff;
	padding: 4px;
	cursor:pointer;
}
/************************************************
                      Definition List                  
************************************************/
 dl { 
 	padding: 0;
	color:#18191b; 
	}
	dt { 
	float: left; 
	clear: left; 
	width: 70px; 
	text-align: left; 
	font-weight: bold; 
	} 
	dt:after { 
	content: " "; 
	} 
	dd:before { 
	content: " : "; 
	padding-left:0px;
	} 
	dd { 
	margin: 0 0 0 80px; 
	padding: 0 0 1px 0; 
	}


/*******************************************************
  				Error / Success / Notice	
*******************************************************/

.notes 	{background: #f0f0f0;border: 1px solid #b8b8b8;}
.success 	{background: #ccfcd1;border: 1px solid #60a400;}
.error	{background: #f9e3e3;	border: 1px solid #e79e9e;}
.notice 	{background: #fcf0cc;border: 1px solid #ecc735;}
	.notes, .notice, .success, .error 
		{font-size: 100%;color:#484848;padding:10px;width:auto;margin: 0 0 20px 0px; text-align:left}
	.notes span, .notice span, .success span, .error span 
		{font-weight: bold;font-size: 1.2em;padding: 2px 40px;}
	.notes p, .success p, .error p, .notice p 
		{margin: 0px;padding: 0px 40px;}