/* MOZILLA no focus on lick twit */
:-moz-any-link:focus {  outline: none;}

html, body {	margin: 0;	padding: 0; }

body {	font-family: 'Trebuchet MS', Arial, Tahoma, Verdana, sans-serif; font-size: 0.7em;	color: #3F4448;	background: #ffffff;}

p, ul, ol, li, dd, h1, h2, h3, h4, h5, form, fieldset, input, select { margin: 0; padding: 0; }

a {	color: #ffffff; text-decoration: underline; }

a:hover { color: #FFFFFF; text-decoration: none; }

a img { border: none;}

/* content */

.clear{ clear:both;}

#overall { display:block; margin:0; padding:0; border:0;}

#bigcontainerbox {
	left:0;
	width: 100%;
	min-width:950px;
	height: 620px;
	background: url(../img/headerback.png) repeat-x left top;
}

#bigcontainer {
	float:left;
	width:100%;
	height: 620px;
}


#waterdrops {
	width: 100%;
	min-width:950px;
	height: 620px;
	background: url(../img/waterdrops.png) no-repeat left top;
}

#headermenu {
	float:left;
	width: 100%;
	min-width:950px;
	height: 86px;
	background: url(../img/headermenuback.png) repeat-x left top;
	margin-top:11px;
}

#overlaycontainer {
	float:left;
	width: 100%;
	position:relative;
	top:-6px;	
	min-width:950px;
	height: 620px;
}


#overlay {
	width: 100%;
	min-width:950px;
	height:100%;

}

#bigbrush {
float:left;
	width: 100%;
	min-width:950px;
	height: 100%;
	position:static;
	background: url(../img/big_brush.png) no-repeat left top;
}

#tweeter {
	float:right;
	width: 110px;
	height: 116px;
	margin-top:33px;
	margin-right:20px;
	position:static;
}

#tweeter a {
	float:right;
	width: 110px;
	height: 116px;
	margin-top:33px;
	margin-right:20px;
	background: url(../img/tweeter.png) no-repeat left top;
}
#tweeter a:hover {
	float:right;
	width: 110px;
	height: 116px;
	margin-top:33px;
	margin-right:20px;
	background: url(../img/tweeter2.png) no-repeat left top;
}

#stickers {
	float:left;
	width:272px;
	height:193px;
	margin-top:325px;
	margin-left:55px;
	padding:0;
	background: url(../img/stickers.png) no-repeat left top;
}

#stickerlink a { float:left; width:272px; height:193px; border:0px; position:relative;}

#headermenubrake {	width:100%; height:39px; }

#headermenuitems {
	padding-left:200px;
	width:700px;
	line-height:20px;
	height:20px;
	position:relative; /*makes links clickable */ 
	/*padding-left:340px; -- THIS IS THE FuCKER no1 */ 
}
		#headermenuitems ul a { float:left; display: block; text-decoration:none; font:1.2em 'Trebuchet MS', Arial, Helvetica, sans-serif; font-weight:bold; letter-spacing:1pt; color:#3F4448; }
		#headermenuitems ul a:hover { float:left; display: block; text-decoration:none; font:1.2em 'Trebuchet MS', Arial, Helvetica, sans-serif; font-weight:bold; letter-spacing:1pt; color:#de8247; }
		#headermenuitems ul li {float:left; cursor:pointer; display:block; overflow:hidden; margin-right:10px; color:#3f4448;}

#containershadow {
	width:100%;
	height:100%;
	min-width: 950px;
	min-height:750px;	
	margin-left:0;
	margin-right:0;
	background: url(../img/mainshadow.png) repeat-x left top;
}

#containerbox {
	width:950px;
	min-width: 950px;
	min-height:750px;
	height:100%;
	background: url(../img/mainboxback.png) repeat-y top;
	margin-left:auto;
	margin-right:auto;
}

#container {
	width:950px;
	height: 100%;
	float:none;
}

#outercontainer {
	float:left;
	width:auto;
	height:100%;
	min-height:290px;
	margin-top:10px;
}

#leftcontent {
	float:left;
	width:230px;
	min-height:100%;
}

#contentmainbox {
	float:left;
	width:700px;
	height:100%;
	min-height:290px;

	margin-left:20px;
}

#contentmaintitle {
	float:left;
	width:700px;
	height:100%;
	height:55px;
	margin-top:10px;
	background: url(../img/maintitle.png) no-repeat;	
	}	
	
#contentmain {
	float:left;
	width:660px;
	height:288px;
	min-height:290px;
	margin-top:10px;
	background-color: #f8f8f8;
	border:1px solid #f3f3f3 ;
}

#bigframe {
	float:left;
	margin-top:20px;
	background: url(../img/bigframe.png) no-repeat;
	width:406px;
	height:244px;	
}

#bigframe img {

	margin-left:32px;
	margin-top:14px;
	width:317px;
	height:218px;	
}

#bigframetxt {
	font:12px Arial, Helvetica, sans-serif;
	float:left;
	margin-top:20px;
	width:240px;
	height:240px;
	overflow:hidden;	
}

#bigframetxttitle {
	letter-spacing:1px;
	font:14px Arial, Helvetica, sans-serif;
	font-weight:bold;
	float:left;
	width:240px;
	height:20px;	
}

#bigframetxtsub {
	font:9px Arial, Helvetica, sans-serif;
	float:left;
	width:240px;
	height:20px;
	margin-bottom:5px;	
}

#contentmain a {
	font:10px Arial, Helvetica, sans-serif;
color:#FF6633;	
}



#menumain {
	float:left;
	width:230px;
	height:100%;
		margin-top:10px;
	background: url(../img/menuback.png) repeat-y;
}
#menumain h1 { float:left; width:230px; text-transform:capitalize;  }
		#menumain ul { float:left; display: block; font: bold 1.1em 'Trebuchet MS',Arial, Helvetica, sans-serif ;}
		#menumain ul li {float:left; cursor:pointer; display:block; overflow:hidden; }
		#menumain h1 { width:222px; text-align:center; margin-bottom:20px; font: normal 2.7em 'Trebuchet MS', Arial;}
		
		
/*IMPORTANT - NO PADDING FOR THE MENU UL ! */
#menumain ul a { float:left; padding-left:30px; height:18px; width:100%; line-height:27px; color:#333333; text-decoration:none; text-transform:uppercase;}
#menumain ul a:hover, { float:left; padding-left:30px; height:39px; line-height:27px; color:#FFFFFF;}
#menumain ul li { float:left; height:39px; width:230px; line-height:39px;color:#333333;}
#menumain a:hover { vertical-align:top; float:left; background: url(../img/menuselect.png) no-repeat; height:39px; width:230px; line-height:27px; color:#FFFFFF; }
#menumain .active { background: url(../img/menuselect.png) no-repeat;  }

#menumain .active a { color: #FFFFFF; }

#submenu {
	float:left;
	width:200px;
	height:100%;
	margin-top:10px;
}
#submenutitle {
	letter-spacing:1px;
	font:1.4em 'Trebuchet MS', Arial, Helvetica, sans-serif;
	font-weight:bold;
	padding-left:20px;
	float:left;
	width:180px;
	height:100%;
	margin-top:10px;
}
#submenusubtitle {
	padding-left:20px;
	color:#de8247;
	letter-spacing:1px;
	font:1.1em 'Trebuchet MS', Arial, Helvetica, sans-serif;
	font-weight:bold;
	float:left;
	width:180px;
	height:100%;
}

#submtext {
	font:12px Arial, Helvetica, sans-serif;
	padding-left:20px;
	float:left;
	width:180px;
	height:100%;
	margin-top:10px;
}

#submenu_checks {
	padding-left:20px;
	padding-top:20px;
	float:left;
	width:180px;
	height:100%;
	margin-top:10px;
}

		#submenu_checks ul { float:left; display: block; font:10px Arial, Helvetica, sans-serif ; font-weight:bold; letter-spacing:1px; }
		#submenu_checks ul li {float:left; width:180px; cursor:pointer; display:block; overflow:hidden; padding-left:20px; margin-bottom:5px; background: url(../img/smallcheck.png) no-repeat left center; color:#738f9e; }
		#submenu_checks ul li a {color:#738f9e; text-decoration:none; width:180px; }


#logo {
	float: left;
}

.cloudright {
	float: right;
}

.contentbox {
	float: right;
	width: 662px;
	overflow: hidden;
}
/* ## Bloging ##*/
#blogging { float:left; width:660px; height:auto; }
#blogging a { color: #de8247; line-height:18px; }

#blogging h1 {
	font: normal 3em 'Trebuchet MS', Arial;
	float: left;
	font-weight:normal;
	margin-top:5px;
	margin-left:0px;
	margin-bottom:0px;
	color: #3F4448;
	width:660px;
	text-transform:capitalize;
	border-bottom:1px solid #ccc;
	display: block;
}

#blogposttxt h1 { float:left; width:660px; }
#blogposttxt p { float:left; width:660px; }

#blogging h2 {
	font: bold 1.2em 'Trebuchet MS', Arial;
	float: left;
	color: #3F4448;
	width:500px;
	margin-bottom:5px;
	line-height:25px;
}

#blogging h3 {
	font: normal 1.6em 'Trebuchet MS', Arial;
	float: left;
	font-weight:normal;
	margin-top:5px;
	margin-left:0px;
	margin-bottom:5px;
	color: #3F4448;
	width:660px;
	border-bottom:1px solid #ccc;
	display: block;
}


.smallblogtxt {
	float: left;
	font-size:0.9em;
	font-weight:normal;
	color: #ccc;
	margin-top:0px;
	margin-left:2px;
	margin-bottom:15px;	
	width:500px;
}

.relatedposts {
	float: left;
	width:660px;
	height:auto;
	margin-bottom:10px;	
}
.relatedposts p { font: normal 1.1em 'Trebuchet MS', Arial; line-height:18px; }
.relatedposts ul { line-height:18px; }

.relatedposts ul li {
	float: left;
	width:630px;
	list-style:none;
}


.relatedposts ul li a {
	font: normal 1.3em 'Trebuchet MS', Arial;
	font-weight:normal;
	float: left;
	margin-left:30px;
	margin-top:2px;
	list-style:none;
	list-style-type:none;
}


#blogging .blogimgwrap { float:left; margin-bottom:10px; width:658px; height:298px; border:1px solid #ccc; background-color:#F1F1F1; }
.blogimgwrap .blogimg img { width:638px; height:278px; background-color: #999999; margin-left:10px; margin-top:10px; }
.inpostimg { float:left; margin-top:20px; margin-bottom:20px; margin-left:auto; margin-right:auto; border:1px solid #ccc;}

#blogging #blogposttxt p { clear:both; margin-bottom:15px; line-height:18px; font-family: Arial, Tahoma, Verdana, sans-serif; font-size: 1.4em; float:none; }

/* ## Comments------------------------------------------------------------------------------ ##*/
	.commentscontainer { width:660px; height:auto; float:left; } /*NO FLOAT - COMMENT*/

	.comments { float:left; width:660px; height:auto; margin-bottom:10px; }
	.comments p { width:200px;}
	.commentsheader { float:left; width:660px; height:53px; background: url(../img/commentsheader.png) no-repeat;}
		.commenttitle { float:left; margin-left:65px; margin-top:25px; }
			.commentautor { font-size:12px; font-weight:bold; margin-right:5px; color:#de8247; line-height:16px;}
			.commentdate {font-size:10px;}
	.commentsmain {	float:left; width:660px; height:auto; min-height:50px; padding:20px; background: url(../img/commentsmain.png) repeat-y left top;}
		.commentcontent { float:left; width:100%; }
		.commentcontent p { float:left; width:630px !important; }
	
	.commentsfoot {	float:left; width:660px; height:3px; background: url(../img/commentsfoot.png) no-repeat left top;}
	.addcommentexpand { float:left;  cursor:hand; cursor:pointer;	height: auto; line-height:30px; text-decoration:none !important;
	width: 120px;
	background-color: #7DBEE2;
	font-family: "Trebuchet MS";
	font-size: 0.9em;
	font-weight: bold;
	margin-bottom:5px;
	color: #ffffff !important;
	border: none;
	text-align: center;  }
/* ## ENDer Comments-------------------------------------------------------------------------------- ##*/

/* ## ENDer bloging ---------------------------------------------------------------------------------- ##*/



#about {
	width: 100%;
	overflow: hidden;
	padding: 28px 0 40px 0;

}

#about h1 {
	float: left;
	font-size: 1.6em;
	color: #3F4448;
	text-transform: uppercase;
}

.subtitlefeat {

	font: normal 11px Arial, Tahoma, Verdana, sans-serif;
	color: #ffffff;
	text-transform: uppercase;
}

.subtitle {
    clear:left;
	float: left;
	font: normal 11px Arial, Tahoma, Verdana, sans-serif;
	color: #b2d6e4;
	text-transform: uppercase;
}

#about h1 img {
	display: block;
	margin: 0 0 4px 0;
}

.boxleft {
	width: 302px;
	float: left;
}

.boxright {
	width: 302px;
	height:100%;
	float: right;
	display: inline;
	margin-right: 8px;
}

#about .boxleft p { margin-top: 18px;}

#about .boxright p {
	margin-top: 18px;
	padding: 0 0 6px 40px;
	border-bottom: 1px solid #cce7f2;
	background: url(../img/talkbubble.png) no-repeat left top;
}

.btn {margin-top: 12px;}	

.works { margin-top:45px;}
.works img {
		width:328px;
		}

/* footer */
.beforefooter { clear:both; height:50px; width:950px; margin-left:auto; margin-right:auto; }
.push {height: 440px; width:400px;}

#footermenucontainer {
	background: url(../img/footermenubg.png) repeat-x left top;
	width: 100%;
	min-width:950px;
	margin: 372px auto 0 auto;
	height:48px;
	display:inline-block;
	position: absolute;
	z-index:555;
}

#footermenu {
	max-width: 950px;
	width:100%;
	height:48px;
	margin-left:auto;
	margin-right:auto;
}

#footermenuitems {	float:left; width:940px; height:40px; position:relative; margin-top:15px; }
#footermenuitems .x3mfootcontainer { float:left; width:97px; height:40px; top:-9px; position:relative;margin-right:20px;}
#footermenuitems .x3mmediafooter { float:left; background: url(../img/x3mmediafooter.png) no-repeat top left; width:97px; height:34px;  }

#footermenuitems span { float:left; color:#848484; height:20px; width:290px; overflow:hidden; line-height:16px; margin-left:35px;  }
		#footermenuitems ul { float:right; width:auto;}
		#footermenuitems ul a { display: block; text-decoration:none; font:11px Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase; letter-spacing:1px; color:#3F4448; }
		#footermenuitems ul a:hover { isplay: block; text-decoration:none; font:11px Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase; letter-spacing:1px; color:#ffffff; }
		#footermenuitems ul li {float:left; cursor:pointer; display:block; overflow:hidden; margin-left:20px; color:#3f4448;}



#footerbox {
	left:0;
	width: 100%;
	min-width:950px;
	height: 426px;
	background: url(../img/footerbg.png) repeat-x left top;
}

#footerboxfix {
	float:left;
	width:100%;
	height: 426px;
}

#footercontainer {
	float:left;
	height: 426px;
	width: 100%;
	min-width:950px;
	margin: 0 auto -300px auto;
	background: url(../img/footerspot.png) no-repeat left bottom;
}

#footercontainerbrush {
	float:left;
	height: 426px;
	width: 100%;
	min-width:950px;
	background: url(../img/footerbrush.png) no-repeat left 20px;
	position:relative;
	z-index:1;
}

#footer {
	max-width:940px;
	height:100%;
	margin-left:auto;
	margin-right:auto;
}

#footer h1 { float: left; font: normal 11px Arial, Tahoma, Verdana, sans-serif;	color: #ffffff;	text-transform: uppercase; }
#footer h1 img {	display: block; margin: 0 0 4px 0;  }

/* -------- FOOTER BOXES Start--------- */
.footerboxes { float:left; width:940px; height:340px; margin-top:35px;}
.footerbox {  float:left; width:220px; height:310px; }
.fboxtitle {  float:left; width:220px; height:30px; border-bottom:1px solid #ccc; }
.footerbox ul { float:left; }
.footerspacer { float:left; width:20px; height:360px; }

/* -------- FIRST FOOTER BOX (1 of 4) Start--------- */
#footer .ftbox_bloge {
	width:220px;
	height:85px;
	float:none;
	position:relative;
	margin-bottom:5px;
}

#footer .latestbloge {
	float:left;
	width:200px;
	margin:0px;
	height:auto;
	list-style: none;
	padding-top:6px;
	color: #ffffff;
}

#footer .latestbloge .spanbloge{
	float:left;
	list-style: none;
	padding-left:26px;
	padding-top:6px;
	height:27px;
	color: #ffffff;
	width:195px;

	background: url(../img/lbicon.png) no-repeat left top;
}

#footer .latestbloge .tweettitle{
	float:left;
	list-style: none;
	padding-top:6px;
	height:27px;
	color: #ffffff;
	width:195px;
	font-weight:bold;
}

#footer .latestbloge .blgdate {
	float:left; width:35px; height:12px; margin-right:7px;   
	
}

#footer .latestbloge .spanblogtxt {
	float:left; 
	height:52px;
	overflow:hidden;
}

#footer .latestbloge a {
font-weight:bold;
text-decoration:none;
}
/* -------- FIRST FOOTER BOX (1 of 4) een ENDer --------- */

/* -------- SECOND FOOTER BOX (2 of 4) Start--------- */
#footer .ftbox_comments {
	background: url(../img/bigbule.png) no-repeat right bottom;
	width:220px;
	height:100%;
	float:left;
	position:relative;
}

#footer ul.latestcomments {
	margin-top: 18px;
}

#footer .latestcomments {
	float:left;
	width:200px;
	margin:0px;
	height:auto;
	list-style: none;
	padding-top:6px;
	color: #ffffff;
	
}

#footer .latestcomments .spanbloge{
	float:left;
	width:180px;
	list-style: none;
	padding-top:6px;
	height:27px;
	color: #ffffff;
}

#footer .latestcomments .spanblogtxt {
	float:left; 
	height:42px;
	margin-bottom:15px;
	width:100%;
}

.spanblogtxt a { font-weight:normal !important; }

#footer .latestcomments a {
font-weight:bold;
text-decoration:none;
}
/* -------- SECOND FOOTER BOX (2 of 4) een ENDer --------- */

/* -------- THIRD FOOTER BOX (3 of 4) Start--------- */

#footer .ftbox_flats {
	width:220px;
	height:auto;
	padding-top:12px;
	float:left;
	position:relative;
}

#footer .flatcontainer {
	float:left; 
	background-color:#eaeaea; 
	width:100px; 
	height:100px;
}

#footer .flat {
	float:left; 
	width:90px; 
	height:90px; 
	margin-top:5px; 
	margin-left:5px; 
	margin-right:5px; 
	margin-bottom:5px; 
	position:absolute;
}

#footer .spanspacer1 {
	float:left; 
	width:20px; height:100px;
}

#footer .spanspacer2 {
	float:left; 
	height:20px; width:220px;
}


/* -------- THIRD FOOTER BOX (3 of 4) een ENDer --------- */

/* -------- Tweeter FOOTER BOX (4-2 of 4) Start--------- */
#footer .ftbox_tweetbox {
	width:220px;
	height:300px;
	float:none;
	position:relative;
	background: url(../img/twitterbirdx3m.png) no-repeat left center;
}

#footer .latestbloge {
	float:left;
	width:200px;
	margin:0px;
	height:auto;
	list-style: none;
	padding-top:6px;
	color: #ffffff;
}

#footer .latestbloge .spanbloge{
	float:left;
	list-style: none;
	padding-left:26px;
	padding-top:6px;
	height:27px;
	color: #ffffff;
	width:195px;

	background: url(../img/lbicon.png) no-repeat left top;
}

#footer .latestbloge .tweettitle{
	float:left;
	list-style: none;
	padding-top:6px;
	height:27px;
	color: #ffffff;
	width:195px;
	font-weight:bold;
}

#footer .latestbloge .blgdate {
	float:left; width:35px; height:12px; margin-right:7px;   
	
}

#footer .latestbloge .spanblogtxt {
	float:left; 
	height:52px;
	overflow:hidden;
}

#footer .latestbloge a {
font-weight:bold;
text-decoration:none;
}
/* -------- Tweeter FOOTER BOX (4-2 of 4) een ENDer --------- */

#footer ul.journal {
	margin-top: 18px;
}

#footer ul.journal li {
	list-style: none;
	padding-left: 22px;
	margin-bottom: 12px;
	color: #ffffff;
	background: url(../img/serviceslibg2.png) no-repeat left center;
}

#footer ul.services li a, #footer ul.services li a:hover {
	color: #ffffff;
}



/* -------- FooterContact een STARTer --------- */
.footerboxcontact {  float:left; width:220px; height:310px; }
#footer .ftbox_contact {
	float:left;
	width:220px;
	height:300px;
}

#footer form p { float:left; margin-top: 10px;}

.valid{border:1px solid green !important;}
.invalid{ border:2px solid #800 !important;}

#footer label {
	float: left;
	width: 100px;
	color: #ffffff;
}

#footer input.txt {
	width: 213px;
	padding: 2px;
	font: normal 11px Arial, Tahoma, Verdana, sans-serif;
	color: #898989;
	border: 1px solid #75a633;
	position:relative;
}

#footer input.btn { border:0; margin-top:-9px; width:90px; height:30px; float:right; background: url(../img/sendit.png) no-repeat;}

#footer textarea {
	width: 213px;
	padding: 2px;
	font: normal 11px Arial, Tahoma, Verdana, sans-serif;
	color: #898989;
	border: 1px solid #75a633;
}

/* -------- FooterContact een ENDer ##################### --------- */

.boxleft #success, .boxleft #bademail, .boxleft #badserver {
	color: #FFFFFF;
}



.copyrights {
	clear: both;
	color: #eaefe4;
	padding-top: 6px;
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #FFF;
	background-color:#CC9900;
	height:30px;
	width:100%;
	line-height:20px;
	text-align:center;
	background: url(../img/topnavbg.png) repeat;
	background-color:#CC9999;


}


.serviceboxwrap {
	float:left;
	width:670px;
	margin-left:-8px;
	margin-bottom:30px;
	height:425px;
	min-height:290px;
}
.servicebox {
	float:right;
	width:660px;
	height:100%;
	min-height:290px;
	background-color:#f3f3f3;
	border:1px solid #ccc;
}

.serviceitem {
	float:left;
	width:190px;
	height:auto;
	padding-left:30px;
}

.secserviceitem { background:url(../img/serviceline.png) left repeat-y; height:auto; }
.serviceitem ul { float:left; display: block; font:12px Arial, Helvetica, sans-serif ; margin-top:10px; }
.serviceitem ul li {  line-height:16px; cursor:pointer; display:block; overflow:hidden; padding-left:30px; margin-bottom:8px; width:150px;}

.pozitive {background:url(../img/accept.png) no-repeat;}
.negative {background:url(../img/delete.png) no-repeat;}

.servdesc{ font:12px Arial, Helvetica, sans-serif; }
.pricez { float:left; font:22px Arial, Helvetica, sans-serif; font-weight:bold; color:#d15806; margin-top:20px; width:100%; line-height:22px;}
.oldprice { text-decoration:line-through; color: #CC3300; }
.onetime {font:11px Arial, Helvetica, sans-serif; color:#999999; width:auto; }
.orderbutton {width:158px; height:43px; margin-top:20px; background:url(../img/orderbutton.png) no-repeat;}
.orderbutton a { float:left;  width:158px; height:43px; font:14px Arial, Helvetica, sans-serif;text-decoration:none; padding-left:30px; margin-top:15px; color:#5c6458 !important;}
.orderbutton a:hover { float:left;  width:158px; height:43px; font:14px Arial, Helvetica, sans-serif; text-decoration:none; padding-left:30px; margin-top:15px; color:#318DC3!important;}
#selectorzbox { width:100%; height:37px; line-height:37px; position:relative; left:-10px; padding-top:30px;}

.serviceselector { float:left; background:url(../img/service_selector.png) no-repeat; width:191px; height:37px; line-height:37px; position:relative;  }

.serviceselector_bweb { float:left; background:url(../img/service_selector_basicw.png) no-repeat; width:191px; height:37px; line-height:37px; position:relative;  }
.serviceselectorlogo {float:left; background:url(../img/logopacktwo.png) no-repeat; width:191px; height:37px; line-height:37px; position:relative; left:65px; }
.serviceselectorconsult {float:left; background:url(../img/consultpack.png) no-repeat; width:191px; height:37px; line-height:37px; position:relative; left:95px;  }

.serviceselectorbroc { float:left; background:url(../img/service_selector_brochure.png) no-repeat; width:191px; height:37px; line-height:37px; position:relative;  }
.serviceselectorvisual {float:left; background:url(../img/service_selector_visual.png) no-repeat; width:191px; height:37px; line-height:37px; position:relative; left:65px; }
.serviceselectorprepress {float:left; background:url(../img/service_selector_prepressl.png) no-repeat; width:191px; height:37px; line-height:37px; position:relative; left:95px;  }

.serviceselectorlinks { float:left; background:url(../img/service_selector_links.png) no-repeat; width:191px; height:37px; line-height:37px; position:relative;  }
.serviceselectormarketing {float:left; background:url(../img/service_selector_marketing.png) no-repeat; width:191px; height:37px; line-height:37px; position:relative; left:65px; }
.serviceselectorcopyr {float:left; background:url(../img/service_selector_copyr.png) no-repeat; width:191px; height:37px; line-height:37px; position:relative; left:95px;  }

.serviceselectorlogo6 { float:left; background:url(../img/service_selector_sixlogo.png) no-repeat; width:191px; height:37px; line-height:37px; position:relative;  }
.serviceselectorlogo4 {float:left; background:url(../img/service_selector_fourlogo.png) no-repeat; width:191px; height:37px; line-height:37px; position:relative; left:65px; }
.serviceselectorlogo2 {float:left; background:url(../img/service_selector_twologo.png) no-repeat; width:191px; height:37px; line-height:37px; position:relative; left:95px;  }


.serviceselector2 {float:left; background:url(../img/advwebpack.png) no-repeat; width:191px; height:37px; line-height:37px; position:relative; left:65px; }
.serviceselector3 {float:left; background:url(../img/basicwebpack.png) no-repeat; width:191px; height:37px; line-height:37px; position:relative; left:95px;  }

#portofolio {
	float:left;
	width:auto;
	height:auto;
}

.proj {
	width:320px;
	height:200px;
	overflow:hidden;
	position:relative;
	margin:30px 0 30px 0;
}
.proj .proj-desc {
	position:absolute;
	background:url(../img/trans-4.png) repeat;
	top:0;
	right:0;
	width:30%;
	height:200px;
	cursor:help;
}
.proj .proj-desc p {
	padding:15px 20px 20px 20px;
	font-size:0.8em;
	color:white;
	line-height:1.5em;
}
.proj .proj-desc h1 {
	padding:20px 0 0 20px;
	color:white;
	font-size:1.3em
}
.proj .proj-desc .small {
	padding:0 0 0 20px
}
.small {
	color: #CCCCCC;
	padding:0 0 10px 0;
	font-size:0.9em;
}

			.comment_form { float:left; width:660px; height:540px; margin-top:10px; }
			
			.comment_linecnt { float:left; width:660px; margin-bottom:2px;}
			.comment_label { float:left; width: 115px; }
			.comment_formline { float:left; width: 350px; }
			
			
			
			div.comment_formline input {
				background: #f5f5f5;
				width: 348px;
				padding: 8px;
				font-family: Arial;
				font-size: 13px;
				border: solid 1px #e0e0e0;
				color: #808080;
				margin-bottom: 10px;
			}
			div.comment_comtxt textarea {
				width: 350px;
				float:left;
				height: 220px;
				padding: 6px;
				font-family: Arial;
				font-size: 13px;
				border: solid 1px #e0e0e0;
				color: #808080;
				margin-bottom: 10px;
				background-color: #f5f5f5;
			}
			
			.comment_comtxtline { float:left; width: 660px; height:250px; margin-bottom:8px; }
			
			.comment_linebtn { float:left; width:660px; height:30px;}
			.comment_labelbtn { float:left; width:115px; height:30px; }
			.comment_formbtn { float:left; width: 350px; height:30px;  }
			
			.comment_formbtn input{
				height: 30px;
				width: 120px;
				background-color: #7DBEE2;
				font-family: "Trebuchet MS";
				font-size: 14px;
				font-weight: bold;
				color: #ffffff;
				border: none;
				text-align: center;
			}			
			
			
  div.loading-invisible{
    /*make invisible*/
    display:none;
  }

  /*this is what we want the div to look like
    when it IS showing*/
  div.loading-visible{
    /*make visible*/
    display:block;
    position:absolute;
	margin:0px;
    top:0;
    left:0;
    width:100%;
	height:4500px;
    text-align:center;

    /*in supporting browsers, make it
      a little transparent*/
    background:#fff;
	filter: alpha (opacity=80);
    opacity:.85;
	z-index: 99;

  }

  div.loading-visible p{
    /*make visible*/
    display:block;
    width:100%;
  }  
  
  #loading img {
    /*position it 200px down the screen*/
  	margin-top:250px;
	margin-left:auto; margin-right:auto;
  
    position:absolute;
  }			
  

div.clear {
	clear: both;
}

/* ## CONTACT FORM ========================================================================= */

div.contact-wrap {	clear: both;	width: 660px; }

div.contact-wrap div.boxcontactcontent {
	background-color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #808080;
	line-height: 16px;
}

div.contactbox {	float: left;	width: 660px; }
div.contacttxt {	float: right;	width: 280px; }

div.contactbox input {
	background: #f5f5f5;
	width: 348px;
	padding: 8px;
	font-family: Arial;
	font-size: 13px;
	border: solid 1px #e0e0e0;
	color: #808080;
	margin-bottom: 17px;
	float:left;
}

div.contactbox input.required {
	background: #f5f5f5 url(../img/form_input_required.jpg) no-repeat 345px center;
}
div.contactbox .ctindicates { background: url(../img/form_input_required.jpg) no-repeat 0px center; padding-left:15px; }

div.contacttxt textarea {
	width: 268px;
	float:right;
	height: 336px;
	padding: 6px;
	font-family: Arial;
	font-size: 13px;
	border: solid 1px #e0e0e0;
	color: #808080;
	margin-bottom: 10px;
	background-color: #f5f5f5;
}

div.contact-wrap .button {
	height: 30px;
	width: 120px;
	background-color: #7DBEE2;
	font-family: "Trebuchet MS";
	font-size: 14px;
	font-weight: bold;
	color: #ffffff;
	border: none;
	text-align: center;
}

.ctstuff { float:left; width:348px; }

div.contactbox #note { width:347px; margin:0px;}

div.contactbox .notification_error
{
border: 1px solid #A25965;
height: auto;
width: 100%;
padding: 8px;
background: #F8F0F1;
text-align: left;
-moz-border-radius: 5px;
}

div.contactbox .notification_ok
{
border: 1px #567397 solid;
height: auto;
width: 100%;
padding: 8px;
background: #f5f9fd;
text-align: center;
-moz-border-radius: 5px;
}



/* ## WEBDESIGN FORM ========================================================================= */

div.requestform-wrap {	clear: both;	width: 660px; float:left; }

div.requestformbox h3 { margin-bottom:20px !important; margin-top:20px !important; text-transform:uppercase !important; color: #808080 !important; }

div.boxrequestformcontent {
	background-color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #808080;
	line-height: 16px;
}

div.requestformbox {	float: left;	width: 660px; }

.requestformlabel { height:auto; font-size:1.1em; font-weight:bold; width:660px; display:block; margin-bottom:7px; }

div.requestformbox input {
	background: #f5f5f5;
	width: 640px;
	padding: 8px;
	font-family: Arial;
	font-size: 13px;
	border: solid 1px #e0e0e0;
	color: #808080;
	margin-bottom: 17px;
}

div.requestformbox input.required {
	background: #f5f5f5 url(../img/form_input_required.jpg) no-repeat 635px center;
}
div.requestformbox .ctindicates { background: url(../img/form_input_required.jpg) no-repeat 0px center; padding-left:15px; }

div.requestformbox textarea {
	width: 640px;
	float:left;
	height: 160px;
	padding: 6px;
	font-family: Arial;
	font-size: 13px;
	border: solid 1px #e0e0e0;
	color: #808080;
	margin-bottom: 17px;
	background-color: #f5f5f5;
}



div.requestform-wrap .button {
	height: 30px;
	width: 160px;
	background-color: #7DBEE2;
	font-family: "Trebuchet MS";
	font-size: 14px;
	font-weight: bold;
	color: #ffffff;
	border: none;
	text-align: center;

}

.requestformbox .ctstuff { float:left; width:348px; }

div.requestformbox #note { width:347px; margin:0px;}

div.requestformbox .notification_error
{
border: 1px solid #A25965;
height: auto;
width: 100%;
padding: 8px;
background: #F8F0F1;
text-align: left;
-moz-border-radius: 5px;
}

div.requestformbox .notification_ok
{
border: 1px #567397 solid;
height: auto;
width: 100%;
padding: 8px;
background: #f5f9fd;
text-align: center;
-moz-border-radius: 5px;
}