/* ---------------------------------------------------------------------------------------- General Settings */

body{
	background-color: #000;
}

html {
	overflow: auto;
}

#container {
	background-color: #000;
	width: 1000px;
	margin: 0px auto 0px auto;
}


/* ---------------------------------------------------------------------------------------- Fonts */

p {font-family: arial; font-size: 14px; color: #c7cdd4;}
.news_title {font-weight: bold; font-size: 15px;}
.news_date {font-weight: bold; font-size: 15px; padding: 4px 12px 0px 5px; text-align: center;}
.description {font-family: arial; font-size: 16px; color: #c7cdd4; padding-left: 6px;}
.quote {font-family: arial; font-size: 15px; font-weight: bold; color: #90b8d1; padding: 18px 15px 0px 15px;}
.author {font-size: 11px; padding: 16px 15px 0px 15px;}
.company {font-family: arial; font-size: 11px; padding: 2px 15px 0px 15px; color: #767e88; text-decoration: none;}
.portfolio_title {font-family: arial; font-size: 20px; font-weight: bold;}
.portfolio_link {font-family: arial; font-size: 12px; color: #90b8d1;}
.portfolio_tech {font-family: arial; font-size: 11px; color: #143850; padding-right: 40px;}
.about {padding-right: 160px;}
.contact {padding-left: 115px;}


/* ---------------------------------------------------------------------------------------- Header */

#top{
	background-color: transparent;
	background-image: url(../images/top.jpg);
	background-position: left top;
	width: 100%;
	height: 126px;
	margin-top: -15px;
}

#logo{
	float: left;
	background-color: transparent;
	width: 255px;
	height: 80px;
	margin: 20px auto auto 50px;
}

#menu{
	float: right;
	background-color: transparent;
	width: 300px;
	height: 25px;
	margin: 99px 50px auto 0px;	
}

ul.navigation { padding:0; margin:0; list-style-type:none; position: absolute;}
ul.navigation li { font-family: calibri ;padding:0px 15px 0px 0px; margin:0px 0px 0px 10px; display:inline; }
ul.navigation li a { color:#e7e7e7; text-decoration:none; text-transform:uppercase; }
ul.navigation li a:hover { color:#31d280; display:inline;}
ul.navigation li a:active { color:#31d280;}
ul.navigation li.last { background:transparent; padding:0; }



/* ---------------------------------------------------------------------------------------- Welcome and Title */

#welcome{
	background-color: transparent;
	background-image: url(../images/welcome.jpg);
	background-position: left top;
	width: 100%;
	height: 148px;
	margin-top: 0px;
}

#title_home{
	float: left;
	background-color: transparent;
	background-image: url(../images/title_hello.png);
	width: 800px;
	height: 40px;
	margin: 30px auto auto 50px;	
}

#title_work{
	float: left;
	background-color: transparent;
	background-image: url(../images/title_work.png);
	width: 800px;
	height: 40px;
	margin: 30px auto auto 50px;	
}

#title_about{
	float: left;
	background-color: transparent;
	background-image: url(../images/title_about.png);
	width: 800px;
	height: 40px;
	margin: 30px auto auto 50px;	
}

#title_contact{
	float: left;
	background-color: transparent;
	background-image: url(../images/title_contact.png);
	width: 800px;
	height: 40px;
	margin: 30px auto auto 50px;	
}

#description{
	float: left;
	background-color: transparent;
	width: 850px;
	height: 40px;
	margin: 10px auto auto 50px;	
}



/* ---------------------------------------------------------------------------------------- Portfolio */

#portfolio{
	background-color: transparent;
	background-image: url(../images/portfolio.jpg);
	background-position: left top;
	width: 100%;
	height: 330px;
	margin-top: 0px;
}

#portfolio_middle{
	background-color: transparent;
	background-image: url(../images/portfolio_middle.jpg) ;
	background-position: left top;
	background-repeat: no-repeat;
	width: 100%;
	height: 450px;
	margin-top: 0px;
}

.portfolio_wrapper {
	background-color: transparent;
	width: 100%;
	height: 248px;
	margin: 0px;
	padding-top: 20px;
}

.portfolio_left{
	float: left;
	background-color: transparent;
	width: 260px;
	height: 228px;
	margin: 0px;
	padding: 15px 40px 0px 56px;
}

.portfolio_right {
	/*float: right;*/
	background-color: #0d1a28;
	width: 640px;
	height: 228px;
	margin: 0px 40px -20px 335px;
}

#portfolio1 {
	background-color: transparent;
	width: 100%;
	height: 100%;
	background-image: url(../images/portfolio_preview/image01.jpg) ;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

#portfolio2 {
	background-color: transparent;
	width: 100%;
	height: 100%;
	background-image: url(../images/portfolio_preview/image02.jpg) ;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

#portfolio3 {
	background-color: transparent;
	width: 100%;
	height: 100%;
	background-image: url(../images/portfolio_preview/image03.jpg) ;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

#about_middle{
	background-color: transparent;
	background-image: url(../images/portfolio_middle.jpg) ;
	background-position: left top;
	background-repeat: no-repeat;
	width: 100%;
	height: 350px;
	margin-top: 0px;
}

.content_wrapper {
	background-color: transparent;
	width: 100%;
	height: 248px;
	padding: 20px 0px 0px 57px;
}

/* ---------------------------------------------------------------------------------------- Content */

#left{
	float: left;
	background-color: transparent;
	background: url(../images/middle_bottom_left.jpg) bottom right no-repeat;
	width: 510px;
	height: 350px;
}

#left_top {background-color: transparent; background: url(../images/recentnews.png) top left no-repeat; width: 125px; height: 30px; margin: 25px 0px 10px 40px;}
#left_bottom {background-color: transparent; width: 100%; height: 145px;}
.left_bottom_left {float: left; background-color: transparent; background: url(../images/news.png) 50% 50% no-repeat; width: 52px; height: 41px; margin: 0px 10px 0px 40px;}
.left_bottom_right {background-color: transparent;  height: 40px; margin-bottom: 30px; padding-right: 35px;}

#right{
	float: right;
	background-color: transparent;
	background: url(../images/middle_bottom_right.jpg) bottom left no-repeat;
	width: 490px;
	height: 350px;
}

#right_top_left {float:left; background-color: transparent; width: 45%; height: 300px;}
#right_top_left_top {background-color: transparent; background: url(../images/whatwedo.png) top left no-repeat; width: 125px; height: 30px; margin: 25px 0px 10px 0px;}
.right_top_left_left {float: left; background-color: transparent; background: url(../images/tick.png) center no-repeat; width: 12px; height: 10px; margin: 0px 10px 5px 0px;}
.right_top_left_right {background-color: transparent; width: 198px; margin-bottom: 5px;}

#right_top_right {float: right; background-color: transparent; background: url(../images/quote.png) no-repeat; width: 222px; height: 176px; margin: 25px 33px 0px 0px;}

#right_bottom {background-color: transparent; background: url(../images/hireus.png) no-repeat; width: 462px; height: 80px; margin: 220px 0px 0px 0px;} 
#right_bottom_left {background-color: #cecece; background: url(../images/getaquote.png) no-repeat; width: 262px; height: 75px; margin: 0px 0px 0px 10px;}
#right_bottom_right {float: right; background-color: transparent; width: 190px; height: 80px; margin: -55px -10px 0px 0px;}

.rollover a {display:block; width: 163px; height: 48px; background: url(../images/btn_quote.png) 0 0 no-repeat; }
.rollover a:hover {background: url(../images/btn_quote_hover.png) 0 0 no-repeat;}
.rollover a:active {background: url(../images/btn_quote_hover.png) 0 0 no-repeat;}



/* ---------------------------------------------------------------------------------------- footer */

#footer{
	background-color: transparent;
	background: url(../images/footer.jpg) no-repeat;
	width: 100%;	
	height: 75px;
	margin-top: 350px;
}

#footer_left {float: left; background-color: transparent; background: url(../images/footer_title.png) no-repeat; width: 132px; height: 40px; margin: 20px 0px 0px 40px;}
#footer_right {float: right; background-color: transparent; width: 600px; height: 40px; margin: 20px 30px 0px 0px; display: inline;}

.footer {font-family: arial; font-size: 13px; color: #35404d; text-decoration: none; text-align: right;}
.footer a:hover {color: #fff;}