@font-face {
	font-family: "nillandcostum";
	src: local("Nilland"), local("Nilland"), url("Nilland.ttf") format("truetype");
}
@font-face {
	font-family: "neviscostum";
	src: local("Nevis"), local("Nevis"), url("Nevis.ttf") format("truetype");
}
html,body,h1,h2,h3,h4,h5,h6,p,form,fieldset,img,ul,ol,li
{
margin:0;
padding:0;
border:0 none;
}
ul,ol,li,ul li
{
list-style:none;
margin:0;
padding: 0;
}
body
{
text-align:center;
font-size:100%;
font-family: Helvetica,Arial,Sans-serif;
line-height:1.5em;
color:#242221;
background:#DADFE8 url(../art/bg.gif) repeat;
border-top:1px solid #fff;
}
.clearfix:after
{
content:".";
display:none;
height:0;
clear:both;
visibility:hidden;
}
.clearfix
{display:inline-block;}
#wrap
{
position:relative;
margin:0 auto;
text-align:left;
width:960px;
}
#overlay{
background:none repeat scroll 0 0 #000000;
bottom:0;
display:none;
left:0;
position:fixed;
right:0;
top:0;
z-index:1100;
}
a{
color: #076170;
text-decoration: none;
}
a:hover{
color: #04333b;
}
#wrapper{
background: transparent url("../art/lighttop.png") no-repeat -5px 0;
}
#header{
position: relative;
height:100px;
margin: 0 0 20px;
}
#head-dark{
display: block;
width: 682px;
height: 253px;
background: transparent url("../art/head-dark.png") no-repeat left top;
position: absolute;
top:120px;
left: 300px;
z-index: 4000;
}
h1.logo a{
background: transparent url("../art/logo.png") no-repeat;
width: 140px;
height: 92px;
display: block;
text-indent: -90000px;
}
.mainmenu{
position: absolute;
top:0;
right: 0;
}

.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
*:first-child+html .group { zoom: 1; } /* IE7 */

#main-menu { margin: 0 auto; list-style: none; position: relative; width: 488px; }
#main-menu li { display: inline;
}
#main-menu li a { 
color: #6f707d;
font: bold 12px Helvetica,Arial,Sans-serif;
display: block; 
float: left; 
padding: 32px 10px 4px 10px;
margin:0 15px; 
text-decoration: none; 
text-transform: uppercase; 
text-transform: uppercase;
text-shadow:0 1px 0 rgba(255, 255, 255, 0.6);
}
#main-menu li a.active,#main-menu li a:hover {
color: #3a3736; 
}
#magic-line{ position: absolute; top: 0px; left: 0; width: 40px; height: 20px; background: #b3b7c1; 
border-bottom:1px solid #fff;z-index: 8; 
}

#content{
position: relative;
margin:0 0 40px;
font-size:0.865em;
text-shadow:0 1px 0 rgba(255, 255, 255, 0.6);
width: 960px;
}
#content p {
    font-size: 0.93em;
    text-shadow:0 1px 0 rgba(255, 255, 255, 0.6);
    line-height: 1.75em;
    color: #363332;
    letter-spacing: 0.02em;
    
}
div#content.home .left{
float: left;
width:410px;
display: inline;
position: relative;
margin-right: 20px;
}
div#content.home .right{
float: right;
width:530px;
}
img.bulb{
margin: -20px 0 0 -100px;
}
img.lighton{
position: absolute;
top:-55px;
left: -90px;
}
h1.contentsite{
color: #076170;
font-size:2.3em;
margin: 0;
}
h1.tagline{
padding: 0 0 5px;
margin: 0 0 8px;
display: block;
text-indent: -9000px;
}
h2.tagline-two{
display: block;
text-indent: -9000px;
}
h1.home{
background: transparent url("../art/head-one-home.png") no-repeat;
width: 363px;
height: 142px;
margin: -40px 0 8px;
}
h2.home{
background: transparent url("../art/head-two-home.png") no-repeat;
width: 373px;
height: 51px;
margin: 25px 0 0;
}
h1.about{
background: transparent url("../art/head-one-about.png") no-repeat;
width: 559px;
height: 103px;
}
h2.about{
background: transparent url("../art/head-two-about.png") no-repeat;
width: 549px;
height: 46px;
margin: 10px 0 20px;
}
#aboutcontent h2{
	
	font-family:Helvetica,Arial,Sans-serif;
	font-size:1.3em;
	font-weight:bold;
	color:#076170;
	margin:20px 0 0 0;
	float:left;
}
h1.project{
background: transparent url("../art/head-one-project.png") no-repeat;
width: 232px;
height: 29px;
}
h2.project{
background: transparent url("../art/head-two-project.png") no-repeat;
width: 316px;
height: 70px;
}
h1.blog{
background: transparent url("../art/head-one-blog.png") no-repeat;
width: 250px;
height: 70px;
float: left;
margin:15px 0 0 30px;
}
h2.blog{
background: transparent url("../art/head-two-blog.png") no-repeat;
width: 210px;
height: 28px;
float: left;
margin:0 0 0 30px;
}
h1.contact{
background: transparent url("../art/head-contact.png") no-repeat;
width: 560px;
height: 71px;
display: block;
text-indent: -9000px;
}
#content p.introduction{
background: transparent url("../art/border-hr.gif") repeat-x top left;
padding: 15px 0 0;
margin:10px 0 0;
width: 370px;
line-height: 1.5em;
font-size:1.1em;
}
#content p.introduction a{
display: block;
font-weight: bold;
margin: 8px 0;
}
.contactbox{
background: #DFE4EC url("../art/box-bg-contact.png") repeat-x;
width: 380px;
margin: 65px 0 20px;
height: 120px;
position: relative;
}
.servefor{
background-color: rgba(255, 255, 255, 0.3);
border-top:1px solid rgba(255, 255, 255, 0.7);
background-image: none;
width: 350px;
margin: 40px 0 20px;
padding: 20px 15px;
position: relative;
}
.servefor ul{
margin: 25px 0 10px;
}
.servefor ul li{
margin: 5px 0;
display: block;
width: 300px;
padding-left: 18px;
font-size: 0.93em;
background: transparent url("../art/check.png") no-repeat 0 center;
}
span.serveforhead{
background: transparent url("../art/serve-heading.png") no-repeat 0 0;
width: 175px;
height: 65px;
position: absolute;
top:-5px;
left: -2px;
text-indent: -9000px;
}
.contactbox-inner{
background: transparent url("../art/contact-illustration.png") no-repeat 0 0;
top:-4px;
left: -8px;
padding: 20px 0 0 113px;
height:102px;
position: absolute;
}
h4.titlebox{
font-size: 0.85em;
text-transform: uppercase;
font-family: Helvetica,Arial,Sans-serif;
text-shadow:0 1px 0 rgba(255, 255, 255, 0.6);
margin:0 0 8px;
}
.contactbox-inner ul li a{
font-size: 0.8em;
color:#242221;
display: block;
margin: 6px 0;
text-transform: uppercase;
text-shadow:0 1px 0 rgba(255, 255, 255, 0.6);
}
.contactbox-inner ul li a:hover{
color: #076170;
text-decoration: none;
}
.contactbox-inner a.projectsheet{
background: transparent url("../art/doc-ico-small.gif") no-repeat left center;
padding: 0 0 0 20px;
}
.contactbox-inner a.contact{
background: transparent url("../art/mail-ico-small.gif") no-repeat left center;
padding: 0 0 0 20px;
}
.toogle{
position: absolute;
top:160px;
left:190px;
width: 100px;
z-index: 2000;
}
.toogle #toogle-slider-wrapper{
width: 40px;
height: 15px;
display: block;
float: left;
margin: 4px 0 0;
position: relative;
}
.toogle .toogle-background{
display: block;
width: 40px;
height: 15px;
float: left;
position: absolute;
top: 0;
left:0;
}
.toogle #toogle-slider-wrapper .on{
background: transparent url("../art/toogle-on.png") no-repeat;
}
.toogle #toogle-slider-wrapper .off{
background: transparent url("../art/toogle-off.png") no-repeat;
}
.toogle #toogle-slider{
width: 17px;
height: 16px;
position: relative;
margin: 0px 0 0 -2px;
}
.toogle a.ui-slider-handle{
background:transparent url("../art/toogle-handle.png")no-repeat;
height:18px;
left:0;
position:absolute;
top:-1px;
width:16px;
z-index:10;
display: block;
text-indent: -9000px;
}
.toogle ul li{
float: left;
margin: 0 4px;
}
.toogle span{
color: #fff;
text-shadow: none;
font-size: 0.78em;
display: block;
width: 30px;
float: left;
}
.toogle ul li a.button{
display: block;
width:32px;
height: 16px;
}
.toogle ul li a.on{
background: transparent url("../art/tooglebutton-on.png")
}
.toogle ul li a.off{
background: transparent url("../art/tooglebutton-off.png")
}
/*scroll*/
.browserframe{
background: url("../art/browser-frame-home.png") no-repeat;
}
div.captureimage img{
margin: 0;
}
div.testimonial{
background: transparent url("../art/testi-bg.png")no-repeat;
margin: 8px 0 0 10px;
width:451px;
height: 110px;
padding: 40px 30px 20px 25px;
position: relative;
}
#content div.testimonial p{
font-family:Georgia,Serif;
font-size:0.95em;
}
#content div.testimonial span{
display: block;
position: absolute;
text-align: right;
font-family: Helvetica,Arial,Sans-serif;
bottom: 15px;
right:20px;
line-height: 0.8em;
}
p.portfolioname{
font-size: 1em;
font-weight: bold;
text-transform: uppercase;
margin: 5px 0 0 20px;
}

/* FEATURED CONTENT SLIDER STYLES */

#wrapper_slider{
width: 512px;
margin:0;
height:800px;
}

#slider {
margin: 0 auto;
position: relative;
height:800px;
}
#slideshow-wrapper{
margin:-30px 0 0 15px;
position: relative;
}
#slideshow-wrapper_content{
position: relative;
}
#slideshow{
/*background: transparent url("../art/browser-frame-home.png") no-repeat;*/
width: 512px;
height: 830px;
margin:0 auto;
}
#slideshow_content{
width: 512px;
margin:0 ;

}
.captureimage{
position: relative;
}
#slideshow .projectinfo{
position: absolute;
top:620px;
left: 0;
}

#content #slideshow p.portfolioname{
font-size: 0.9em;
}
.scroll img{
height: 557px;
}
.scrollContainer div.panel {
}
#shade{
position: absolute;
top:620px;
right: 25px;
display: block;
}
#shade_content{
position: relative;
margin:10px 30px 0 0;
float:right;
display: block;
clear:both;
}
div#shade a,div#shade_content a  {
text-decoration:none;
background:url("../art/bullets.png") no-repeat;
width:18px;
height:18px;
float: left;
display:block;
position: relative;
z-index: 8;
}

div#shade a.activeSlide,div#shade_content a.activeSlide {
background-position:-18px 0;

}

.scrollButtons {
position: absolute;
top: 130px;
cursor: pointer;
}

div#content.home .scrollButtons.left {
left: -13px;
z-index: 100;
display: none;
visibility: hidden;
}

.scrollButtons.right {
right: -13px;
z-index: 101;
display: none;
visibility: hidden;
}

.hide {
display: none;
}

span.thumbtitle{
display: block;
font-size: 1.3em;
text-align: center;
display:none;
}

img.scroller-thumb{
padding: 0.3em 0.4em;
border: 0.1em solid #2b2b2b;
width: 13.3em;
}

img.scroller-thumb-big{
padding: 0.3em 0.4em;
border: 0.1em solid #2b2b2b;
}

a.selected img.scroller-thumb{
}
#footer-wrap{
background:#2A2B2D url("../art/footer-bg.png") repeat-x scroll center top;
float:left;
margin-top:40px;
width:100%;
height: 165px;
}
.footer{
display:block;
margin:0 auto;
width:960px;
padding: 35px 0 0 10px;
/*background: transparent url("../art/footer-light.jpg") no-repeat -14px 3px;
float:left;*/
text-align: center;
}
h1.logofooter{
width: 94px;
height: 74px;
background: transparent url("../art/logo-btm.png") no-repeat;
display: block;
float: left;
text-indent: -9000px;
margin:0 0 0 15px;
}
#footer-wrap ul{
display: block;
}
#footer-wrap ul li{
float: left;
padding: 0 1px;
color: #85888e;
}
.footer .text{
float: left;
width: 400px
font-size: 0.7em;
}
.footer .logo-footer{
width:130px;
display: block;
float: left;
}
#footer-wrap p{
text-align: left;
font-size: 0.7em;
color: #adafb3;
font-weight: bold;
margin: 3px 0 0 0;
}
#footer-wrap ul li a{
font-size: 0.7em;
color: #0b91ab;
}
#footer-wrap p.copyright{
font-weight: normal;
font-size: 0.7em;
}
.footer div.clearfooter{
clear: both;
position: relative;
}

/*about*/

div#content.about .left{
float: left;
width:360px;
display: inline;
position: relative;
margin-right: 20px;
}
div#content.about .right{
float: right;
width:580px;
}
#aboutcontent{
position: relative;
margin: 0 0 80px;
}
#aboutcontent p{
font-size: 1em;
margin: 10px 0;
line-height: 1.8em;
float:left;
}
.team{
margin: 10px 0;
float: left;
}
#content .team p{
font-size: 0.9em;
}
.team ul li{
width:240px;
height: 110px;
margin: 20px 0;
}
.team ul li img{
float: left;
margin: 0 10px 10px;
}
.team h2{
font-size: 1em;
font-weight: bold;
margin:0 0 2px;
padding: 14px 0 0;
display: block
}
.team ul li a{
font-size: 0.87em;
}
#content #our-process{
margin: 10px 0;
padding: 40px 0 0;
background: transparent url("../art/border-hr-small.gif") repeat-x top left;
position: relative;
}
#content #our-process div.processsectionwrapper{
float: left;
position: relative;
margin: 80px 0 30px;
}

#content #our-process div.processsection{
float: left;
width: 400px;
}
#content #our-process div.plus{
width:58px;
margin: 0 40px;
position: relative;
}
#content #our-process div.plus img{
margin: 0;
}
#content #our-process div.build{
margin-left:8px;
}
#content #our-process div.build img{
float: right;
margin: 0 0 30px 10px;
}
#content #our-process div.publish{
float: none;
margin: 0 auto;
text-align: center;
}
#content #our-process div.publish img{
float: none;
margin:0 0 5px 0;
}
h2.processtitle{
margin: 0 auto;
display: block;
text-indent: -9000px;
background: transparent url("../art/head-process.png")no-repeat;
width: 390px;
height: 25px;
}

#our-process .processsection img{
float: left;
margin: 0 15px 20px;
}

#our-process h3.processtitle{
display: block;
text-indent: -9000px;
margin: 0 0 8px;
}
#our-process h3#plan{
background: transparent url("../art/head-research.png") no-repeat;
width: 256px;
height: 16px;
margin: 0 0 8px 93px;
}
#our-process h3#build{
background: transparent url("../art/head-build.png") no-repeat;
width: 107px;
height: 16px;
}
#our-process h3#publish{
background: transparent url("../art/head-publish.png") no-repeat;
width: 58px;
height: 14px;
margin: 0 0 8px 170px;
}
#our-process .processsection p{
font-family: Helvetica,Arial,sans-serif;
line-height: 1.7em;
font-size: 0.9em;
}
/*contact*/
div#content.contact .left{
float: left;
width:350px;
display: inline;
position: relative;
margin-right: 20px;
padding-left: 10px;
}
div#content.contact .right{
float: right;
width:580px;
}
#contactcontent{
position: relative;
margin: 0 0 40px;
width:580px;
}
#contactcontent h1{
margin: 0 0 10px;
}
#contactcontent p.contactparagraph{
float: left;
width:420px;
}
#contactcontent div.download-sheet{
float: right;
width: 110px;
background: transparent url("../art/border-bold-vert.gif") repeat-y;
padding: 10px 0 10px 30px;
}
#contactcontent div.download-sheet a{
margin: 0 auto;
text-align: center;
display: block;
}
#contactcontent div.download-sheet a:hover{
text-decoration: none;
}
#contactcontent div.download-sheet span{
display: block;
text-transform: uppercase;
color: #6f707d;
font-size: 0.8em;
text-align: center;
line-height: 1em;
}
#contactcontent div.download-sheet a:hover span{
color: #242221;
text-decoration: none;
}
.contact-info{
margin: 20px 0 0;
}
.contact-info h1{
font-size: 1em;
color: #9d9ea0;
margin: 0 0 3px;
padding: 0;
font-weight: normal;
text-indent: 0px;
text-transform: uppercase;
}
.contact-info img{
margin: 5px 0 5px -3px;
}
#content .contact-info p{
font-size: 0.87em;
color: #242221;
}
.contact-info a{
display: block;
color: #242221;
font-weight: normal;
margin: 10px 0;
font-size: 0.87em;
cursor: pointer;
width: 230px;
}
.contact-info a.fb{
background: transparent url("../art/fb-icon.png") no-repeat left center;
padding: 0 0 0 30px;
}
.contact-info a.twitter{
background: transparent url("../art/twitter-icon.png") no-repeat left center;
padding: 0 0 0 30px;
}
#contactcontent form.contact{
display: block;
margin: 20px 0 0;
position: relative;
width: 470px;
padding: 0 0 30px;
float: left;
}
#contactcontent form.contact div.clearform{
clear: both;
position:relative;
width: 460px;
}
#contactcontent form.contact div.last{
margin:3px 0 50px;
}
#contactcontent form.contact input,#contactcontent form.contact textarea{
float: left;
display: block;
border: none;
color: #5d5e69;
font-size: 0.85em;
text-shadow:0 1px 0 rgba(255, 255, 255, 0.4);
}
#contactcontent form.contact input{
background: transparent url("../art/text-input-bg.gif") no-repeat;
padding: 0 0 0 10px;
width: 450px;
height: 47px;
margin: 5px 0;
letter-spacing: 0;
font-family: inherit;
}
#contactcontent form.contact textarea{
background: transparent url("../art/text-area-bg.gif") no-repeat;
width: 460px;
height: 233px;
font-size: 0.9em;
padding: 15px 0 0 10px;
margin: 5px 0;
font-family: inherit;
}
#contactcontent form.contact label{
font-size: 0.9em;
color: #5d5e69;
text-shadow:0 1px 0 rgba(255, 255, 255, 0.4);
}
#contactcontent form.contact label.error{
color: #076170;
margin-bottom: 3px;
display: block;
}
#contactcontent form.contact span.required{
font-size: 0.7em;
font-style: italic;
color: #6f707d;
position: absolute;
top:20px;
right: 20px;
}
form.contact a.extend-form{
background: transparent url("../art/extend-form-btn.png");
width: 151px;
height: 33px;
display: block;
text-decoration: none;
margin: 0 0 0 140px;
position: relative;
}
form.contact a.activeExtend:hover{
background-position: 0 66px;
}
form.contact a.activeExtend{
background-position: 0 66px;
}
form.contact a.extend-form:hover{
background-position: 0 -33px;
}
#contactcontent form.contact #contact_submit{
background: transparent url("../art/send-form-btn.png");
width: 150px;
height: 33px;
cursor: pointer;
text-indent: -9000px;
}
#contactcontent fieldset#extend-contact{
margin: 20px 0 47px;
padding: 40px 30px 30px;
background-color: #ccd0d9;
-moz-border-radius:6px 6px 6px 6px;
border-radius:6px 6px 6px 6px;
-webkit-border-radius:6px 6px 6px 6px;
}
#contactcontent fieldset#extend-contact div#uploadsheet{
margin-bottom: 10px;
border-bottom: 1px solid #abaeb6;
padding-bottom: 10px;
}
#contactcontent #uploadifyUploader{
margin-top: 5px;
visibility: hidden;
}
#contactcontent #fileQueue{
margin-bottom: 8px;
}
#contactcontent fieldset#extend-contact div#uploadsheet span{
display: block;
margin-bottom: 4px;
font-weight: bold;
}
#contactcontent fieldset#extend-contact div#budget{
margin: 20px 0;
}
#contactcontent fieldset#extend-contact div#budget label{
float: left;
margin-right: 15px;
width: 100px;
font-weight: bold;
}
#contactcontent fieldset#extend-contact div#budget select{
background-color: #ebedf1;
border: 1px solid #90949e;
padding: 5px 7px;
}
#submit-btn{
position: absolute;
bottom: 15px;
right: 15px;
}
#contactcontent form.contact #contact_submit:hover{
background-position: 0 -33px;
}
/*blog*/
div#blog-header{
position: relative;
margin:30px 0 10px;
width: 960px;
}
div#blog-header img{
float: left;
}
div.blog-content{
position: relative;
margin: 20px 0 0;
}
div.blog-content div.item-news{
float: left;
display: block;
width: 292px;
padding: 10px;
height: 380px;
}
div.images-wrapper{
background: transparent url("../art/shadow_small_bg.png")no-repeat scroll 50% 93%;
display: block;
width: 292px;
display:block;
padding:0 0 19px;
}
div.images-wrapper img{
border:5px solid #EFF3F4;
}
div.blog-content div.item-news h2{
font-weight: bold;
font-family: Helvetica,Arial,Sans-serif;
display: block;
font-size: 1.3em;
padding: 0 0 0 10px;
}
div.blog-content div.item-news p{
padding: 0 0 0 10px;
margin: 5px 0 10px;
}
/*blog detail*/
div.blogdetail div.left{
width: 600px;
float: left;
display: inline;
margin-right: 10px;
}
div.blogdetail div.right{
float:right;
width:350px;
}
#blogdetailcontent{
position: relative;
margin: 15px 0 10px 8px;
padding: 0 20px 0 0;
}

#blogdetailcontent h1{
font-weight: bold;
font-family: Helvetica,Arial,Sans-serif;
display: block;
font-size: 1.5em;
margin: 8px 0 0;
text-transform: uppercase;
color: #076170;
}
#blogdetailcontent a{
	text-decoration:underline;
}
#blogdetailcontent h2{
	font-size:1.3em;
	font-weight: bold;
	margin-bottom: 7px;
	padding-top:15px;
	color: #076170;
	display:block;
	padding-bottom:4px;
}
#blogdetailcontent h3{
	font-size:1em;
	font-weight: bold;
	padding-top:4px;
}
#blogdetailcontent ul.list-image li{
	float:left;
	display:block;
	margin:7px 35px 14px 0;
}
#blogdetailcontent img.left-small{
	border:4px solid #EFF3F4;
	float:left;
	margin:0 10px 10px 3px;
}
#blogdetailcontent ul.list-image li a img{
-moz-border-radius:2px 2px 2px 2px;
-moz-box-shadow:0 2px 10px #9a9ea6;
background-color:#EFF3F4;
padding:7px;
}
#blogdetailcontent small.meta{
font-size: 0.85em;
margin: 3px 0 10px;
display: block;
color: #666;
}
#blogdetailcontent p{
margin: 15px 0;
}
#blogdetailcontent div.summary{
font-style: italic;
font-size: 1em;
}
#blogdetailcontent div.images-wrapper-blog{
background:url("../art/shadow_large_bg.png") no-repeat scroll 50% 100% transparent;
border:medium none;
display:block;
padding:0 0 19px;
width:465px;
}
#blogdetailcontent div.images-wrapper-blog img{
border:5px solid #eff3f4;
width:455px;
}
.author-info{
	background-color:rgba(182, 193, 211, 0.3);
	padding:6px 10px;
	border-top:1px solid rgba(255, 255, 255, 0.7);
	font-size:0.9em;
	width:400px;
	margin: 0 0 10px;
}
.author-info img{
	float:left;
	margin:0 8px 10px 0;
}
div.comments{
margin: 25px 0 20px 8px;
position: relative;
padding: 0 20px 0 0;
}
.comments h2{
font-weight: bold;
font-family: Helvetica,Arial,Sans-serif;
display: block;
font-size: 1.2em;
margin: 8px 0 18px;
text-transform: uppercase;
color: #076170;
padding-bottom: 8px;
background: transparent url("../art/border-hr-small.gif") repeat-x left bottom;
}
.comment-entry{
margin: 0 0 15px;
padding:0 0 12px;
border-bottom: 1px dotted #abaeae;
width: 577px;
}
#content .comment-entry p{
margin: 0 0 10px;
}
.comment-entry img.gravatar{
width: 50px;
margin-right: 10px;
float: left;
display: block;
border: 3px solid #eff3f4;
}
.comment-entry .info-user{
float: left;
width: 440px;
}
#content .comment-entry p.author{
font-weight: bold;
margin: 0;
}
#content .comment-entry p.date{
margin: -6px 0 3px;
color: #888888; 
font-size: 0.8em;
}
#comment-form{
margin: 0 0 30px 0;
padding: 15px 8px;
width: 530px;
}
h2.comment-heading{
font-weight: bold;
font-family: Helvetica,Arial,Sans-serif;
display: block;
font-size: 1.2em;
margin: 32px 0 18px 8px;
text-transform: uppercase;
color: #076170;
padding-bottom: 8px;
background: transparent url("../art/border-hr-small.gif") repeat-x left bottom;
}
#comment-form form div{
float: left;
margin: 10px 0;
position: relative;
}
#comment-form form label{
position: absolute;
left: 0;
top: 0;
font-size: 0.9em;
}

#comment-form form textarea{
height:200px;
margin:10px 0;
color:#4c4c55;
width:436px;
-moz-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
background-color: rgba(162, 162, 162, 0.3);
border: 1px solid #abaeae;
padding: 10px;
}
#comment-form form input{
margin:0 0 0 100px;
color:#4c4c55;
width:336px;
-moz-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
background-color: rgba(162, 162, 162, 0.3);
border: 1px solid #abaeae;
padding: 10px;
}
#comment-form form p{
margin: -10px 0 0;
}
#comment-form form input.checkbox{
margin: 0;
width: auto;
}
#comment-form form div.buttons{
margin:0;
}
#comment-form form input.submit-button{
width:119px;
height: 31px;
display: block;
text-indent: -9000px;
border: none;
background: transparent url("../art/submit-btn.png")no-repeat 0 0;
margin:-20px 0 0 336px;
cursor: pointer;
}
#comment-form form input.submit-button:hover{
background-position: 0 -31px;
}
span.aboutboxhead{
background: transparent url("../art/about-box-heading.png") no-repeat 0 0;
width: 175px;
height: 65px;
position: absolute;
top:-5px;
left: -2px;
text-indent: -9000px;
}
span.twitbird{
background: transparent url("../art/twitbird.png") no-repeat 0 0;
width: 30px;
height: 26px;
position: absolute;
top:-23px;
left: -2px;
text-indent: -9000px;
}
span.projectboxhead{
background: transparent url("../art/projects-box-heading.png") no-repeat 0 0;
width: 175px;
height: 65px;
position: absolute;
top:-5px;
left: -2px;
text-indent: -9000px;
}
.projectbox ul li{
width: 260px;
}
.rssbox{
width: 300px;
margin: 30px 0 0 25px;
font-size: 0.9em;
}
.rssbox span{
	font-family:Helvetica,Arial,Sans-serif;
	font-size:1em;
	font-weight:bold;
	text-transform:uppercase;	
	background-color: rgba(255, 255, 255, 0.3);
	display:block;
	padding:10px 8px;
}
.rssbox span a{
	background :transparent url("../art/rss_btn.png") no-repeat 0 0;
	padding:5px 0 10px 40px;
	height:17px;
	display:block;
}
.rssbox span a:hover{
	background :transparent url("../art/rss_btn.png") no-repeat 0 100%;
}
.aboutbox{
background-color: rgba(255, 255, 255, 0.3);
border-top:1px solid rgba(255, 255, 255, 0.7);
background-image: none;
width: 270px;
margin: 60px 0 0 25px;
font-size: 0.9em;
}
.aboutbox p{
margin: 20px 0 0;
}
.aboutbox p.more{
margin: 5px 0 0;
}
.projectbox{
background-color: rgba(255, 255, 255, 0.3);
border-top:1px solid rgba(255, 255, 255, 0.7);
background-image: none;
width: 270px;
margin: 30px 0 0 25px;
font-size: 0.9em;
}
.twitterbox{
background-color: rgba(255, 255, 255, 0.3);
border-top:1px solid rgba(255, 255, 255, 0.7);
background-image: none;
width: 270px;
margin: 30px 0 0 25px;
font-size: 0.9em;
padding: 10px 15px 20px;
}
.twitterbox p{
margin:0;
}
.twitterbox p.more{
margin: 5px 0 0;
}
.projectbox ul li{
background: transparent none;
float: left;
margin: 8px 0;
}
.projectbox ul li img{
border:4px solid rgba(162,162,162,0.2);
float: left;
}
.projectbox ul li h2{
font-weight: bold;
font-family: Helvetica,Arial,Sans-serif;
margin: 5px 0 0 128px;
font-size: 1em;
}
.projectbox ul li p{
margin: 0 0 0 128px;
}
.projectbox ul li a.more{
margin: 0 0 0 200px;
}
.mail-chimpbox{
width: 270px;
margin: 20px 0 0 25px;
font-size: 0.9em;
padding: 10px 7px 20px;
}
form#mc-embedded-subscribe-form fieldset,form#mc-embedded-subscribe-form{
	border:none;
}
span.title-newsletter{
	color:#076170;
	display:block;
	font-family:Helvetica,Arial,Sans-serif;
	font-size:1em;
	font-weight:bold;
	padding-bottom:8px;
	text-transform:uppercase;
}
input#mce-EMAIL{
	float:left;
	font-weight:normal;
	margin:0;
	padding:5px 4px 6px;
	width:150px;
	-moz-border-radius:2px 2px 2px 2px;
	border-radius:2px 2px 2px 2px;
	-webkit-border-radius:2px 2px 2px 2px;
	border:1px solid #c2cad5;
	background-color: rgba(255, 255, 255, 0.3);
	margin:0 3px 0 0;
	vertical-align:middle;
}
input.btn{
	-moz-border-radius:2px 2px 2px 2px;
	border-radius:2px 2px 2px 2px;
	-webkit-border-radius:2px 2px 2px 2px;
	background:none repeat scroll 0 0 #076170;
	color:#FFFFFF;
	float:left;
	font-weight:normal;
	margin:0 0 0 3px;
	padding:4px;
	width:62px;
	border:none;
}
#mce-error-response,.mce_inline_error,#mce-success-response{
	float:left;
	margin:4px 0 0 5px;
	/*background-color:rgba(162, 162, 162, 0.3);*/
	padding:5px 0;
	background-image: none;
}
/*projects*/
div#content.portfolio .left{
float: left;
width:350px;
display: inline;
position: relative;
margin-right: 20px;
padding-left: 10px;
}
div#content.portfolio .right{
float: right;
width:580px;
}
div.portfolio-info{
position: relative;
margin: 20px 0;
padding: 50px 0 0 5px;
background: transparent url("../art/portfolio-illustration.png") no-repeat left top;
}
div.portfolio-info h1{
font-size: 1.9em;
margin: 0 0 4px;
}
div.portfolio-info h2{
font-size: 1.3em;
margin: 0 0 10px;
}
div.portfolio-info a.porto-nav{
background: transparent url("../art/portfolio-nav.png");
width: 97px;
height: 26px;
display: block;
padding: 1px 0 0 10px;
text-transform: uppercase;
font-size: 0.76em;
font-weight: bold;
color: #3a3736;
}
div.portfolio-info a.porto-nav:hover{
background-position: 0 -27px;
text-decoration: none;
}
div.portfolio-info a#portonav.active{
background-position: 0 27px;
text-decoration: none;
}
div#portfoliocontent{
position: relative;
margin: 5px 0 0;
width: 580px;
}
div.portfolio-featured div.portfolio-images{
background-color: rgba(255, 255, 255, 0.55);
padding: 10px;
border: 1px solid rgba(255, 255, 255, 0.7);
margin: 2px 0 15px;
display: block;
float: left;
}
div.portfolio-featured div.portfolio-images img{
border: 1px solid rgba(255, 255, 255, 1);
}
div#portfoliocontent h2{
font-weight: bold;
font-family: Helvetica,Arial,Sans-serif;
display: block;
font-size: 1.3em;
margin: 8px 0 0;
padding: 0 0 0 10px;

}
div#portfoliocontent h2 a{
color: #242221;
}
div#portfoliocontent h2 a:hover{
color: #076170;
}
div#portfoliocontent img{
margin:0 auto;
}
div#portfoliocontent div.portfolio-featured div.portfolio-images a{
display: block;
margin: 0 auto;
width: 559px;
height: 341px;
}
div#portfoliocontent p{
padding: 0 0 0 10px;
margin: 0 0 10px;
}
.portfolio-list{
margin: 30px 0 20px;
position: relative;
width: 580px; 
}
.portfolio-list li{
float: left;
display: block;
width: 260px;
margin: 15px 30px 15px 0;
}
.portfolio-list img{
background-color: rgba(255, 255, 255, 0.3);
padding: 10px 10px;
border: 1px solid rgba(255, 255, 255, 0.7);
margin: 2px 0 15px;
width: 245px;
display: block;
}
.portfolio-list a:hover img{
background-color: rgba(255, 255, 255, 0.5);
}
#portfoliocontent .portfolio-list li h2{
font-size: 1em;
}
#toogleporto{
background:rgba(238, 240, 244, 0.6);
padding: 10px 0;
width: 150px;
border: 1px solid rgba(161, 172, 194, 0.4);
}
#toogleporto ul li a{
display: block;
padding: 7px 45px 7px 12px;
color: #242221;
font-size: 0.8em;
text-transform: uppercase;
}
#toogleporto ul li a:hover{
background:rgba(161, 172, 194, 0.6);
text-decoration: none;
}
/*portfolio detail*/
div.projectdetail div.left{
width: 530px;
float: left;
display: inline;

}

div.projectdetail div.left div.image{
	background-color: rgba(255, 255, 255, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.6);
	margin: 14px 0 0;
	padding: 20px;
	

}

div.projectdetail div.left div.image img{
	background-color: rgba(255, 255, 255, 1);
	
}
div.projectdetail a.otherproject{
background: transparent url("../art/other-project-active.png")no-repeat 0 0;
width: 111px;
height: 16px;
top:35px;
right: 20px;
position: absolute;
z-index: 10;
}
div.projectdetail a.activeOther{
background: transparent url("../art/other-project.png")no-repeat 0 0;
}
div.projectdetail a.otherproject span{
display: none;
}
div.projectdetail div#other-project{
background-color: rgba(188, 188, 188, 0.2);
border:1px solid rgba(188,188,188,0.5);
padding: 15px 10px;
float: left;
margin: 55px 0 10px;
width: 920px;
}
div.projectdetail div#other-project ul li{
float: left;
margin: 0 5px;
}
div.projectdetail div#other-project ul li img{
padding: 5px;
background-color:rgba(255,255,255,0.9);
opacity:0.7;
}
div.projectdetail div#other-project ul li a:hover img{
opacity:1;
}
div.projectdetail div.left .img img{
border:1px solid rgba(255,255,255,0.9);
}
div#content.projectdetail div.right{
width: 410px;
float: right;
margin:20px 0 0;
}
#projectdetailcontent{
position: relative;
margin: 10px 0;
padding: 0 20px 0 0;
}
#projectdetailcontent h1{
font-weight: bold;
font-family: Helvetica,Arial,Sans-serif;
display: block;
font-size: 1.5em;
margin: 8px 0;
text-transform: uppercase;
color: #076170;
background: transparent url("../art/border-hr-small.gif") repeat-x left bottom;
padding: 0 115px 8px 0;
}
#projectdetailcontent p{
margin: 15px 0;
}
#projectdetailcontent div.summary{
font-size: 1.07em;
font-style: italic;
margin: 25px 0 20px;
}

.projectdetail .contactbox{
margin:20px 0 20px;
}
a.launch_project{
	background:url("../art/launch_btn.png") no-repeat scroll 0 0 transparent;
	border:medium none;
	display:block;
	height:33px;
	margin:15px 0 0 0;
	text-indent:-9000px;
	width:165px;
}
a.launch_project:hover{
	background:url("../art/launch_btn.png") no-repeat scroll 0 100% transparent;
}

a.download_btn{
	background:url("../art/download_btn.png") no-repeat scroll 0 0 transparent;
	border:medium none;
	display:block;
	height:33px;
	text-indent:-9000px;
	width:151px;
}
a.download_btn:hover{
	background:url("../art/download_btn.png") no-repeat scroll 0 100% transparent;
}

form.donate{
	margin-top:-93px;
}
/*modal*/
.modal{
	display:block;
	width:584px;
	height:272px;
}
p.status{
	display:block;
	text-indent:-1000px;
	position:absolute;
}
p.sukses{
	background:url(../art/success-msg.png) 0 0 no-repeat;
	width:417px;
	height:91px;
	text-align:center;
	top:52px;
	left:63px;
}
p.failed{
	background:url(../art/erorr-msg.png) 0 0 no-repeat;
	width:443px;
	height:128px;
	text-align:center;
	top:65px;
	left:48px;
}