body, html {
	background: #fafafa;
	background: #363e43;;
	font-family: “Helvetica Neue Light”, “HelveticaNeue-Light”, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #999;
	color: #7d7d7d;
	line-height: 20px;
}

/* header */
#header {
	background: #363e43 url(../img/headerbg.png) repeat-x;
	height: 58px;
}

#logo {
	margin-top: 17px;
	float: left;
}

#logo a {
	background: url(../img/ademaweb-logo.png) no-repeat;
	display: block;
	width: 150px;
	height: 30px;
	background-position: 0 0;
}

#logo a:hover { background-position: 0 -30px; }

.container {
	width: 960px;
	margin: auto;
}

#menu {
	float: right; 
	padding-top: 10px;
}

#menu ul li { float: left; }
#menu ul li a {
	display: block;
	color: #FFF;
	padding: 10px 28px;
	min-width: 60px;
	text-align: center;
	text-decoration: none;
	font-size: 14px;
	font-weight: bold;
	text-transform: capitalize;
	text-shadow: #000 1px 1px 2px; /* rechts, onder, blur */
}

#menu ul li a:hover, #menu ul li a.actief {
	background: url(../img/menubg-hover.png) no-repeat center center;
}

#menu ul li a.offerte {
	background: url(../img/offerte.png) no-repeat;
	padding: 10px 20px;
	min-width: 40px;	
}

#menu ul li a.offerte:hover {
	background: url(../img/offerte-hover.png) no-repeat;
}
#searchbox {
	float: right; 
	padding-top: 10px;
	margin-left: 20px;
}

#search {
	background: url(../img/searchbg.png) no-repeat;
	border: 0;
	padding-left: 20px;
	height: 30px;
	width: 180px;
	color: #fff;
	padding-top: 1px;
	font-style: italic;
}

#search:focus {
	border: 0;
	outline: none;
}
/* /header */
/* subheader */
#subheader {
	background: url(../img/subheader-bg.png) repeat-x;
	height: 279px;
	color: #898989;
	padding: 20px;
}

h1, h2, h3, h4 {
	padding-bottom: 10px;
	line-height: 30px;
}

h1 {
	font-family: “Myriad Pro”, Arial, Helvetica, Tahoma, sans-serif;
	font-size: 20px;
	font-weight: normal;
	padding-bottom: 10px;
	line-height: 30px;
}

h1 span {
	color: #89b3c5;
	font-style: italic;
}

h2 {
	color: #313030;
	font-size: 18px;
	padding-bottom: 10px;
	line-height: 30px;
}


h3 {
	font-size: 24px;
	color: #90b7c8;
	font-weight: bold;
	font-style: italic;
	text-shadow: #fff 2px 2px 2px; /* rechts, onder, blur */
}

h4 {
	color: #313030;
	font-size: 14px;
	padding-bottom: 10px;
	line-height: 30px;
}



.twocolumn {
	width: 47%;
	float: left;
	margin-right: 5%;
}

.macbookside {
	width: 55%;
	float: left;
	margin-right: 5%;
}

.textside {
	width: 40%;
	float: left;
	margin-right: 5%;
	padding-top: 15px;
}

.threecolumn {
	width: 30%;
	margin-right: 5%;
	float: left;
}

.twothird {
	width: 60%;
}

.fourcolumn {
	width: 22%;
	margin-right: 4%;
	float: left;

}

.lastcolumn { float: right; margin: 0; }
/* /subheader */
/* content */
.content {
	background: #fafafa;
}
.lijn {
	background: #fafafa url(../img/line.png) repeat-x;
	height: 10px;
}
.btn {
	background: url(../img/btn.png) no-repeat;
	width: 146px;
	height: 28px;
	text-decoration: none;
	display: inline-block;
	padding: 10px 0px 0px 0px;
	font-size: 13px;
	text-align: center;
	font-weight: bold;
	color: #555960;
}


.bekijkmeer { 
	width: 133px; 
	height: 26px; 
	background: url(../img/btn-bekijkmeer.png) no-repeat; 
}
.bekijkmeer:hover { background: url(../img/btn-bekijkmeer-hover.png) no-repeat; }
/* /content */
#portfoliobg {
	background: url(../img/portfoliobg.png) repeat-x;
	height: 244px;
	padding-top: 30px;
}

.pagedivider {
	background: url(../img/page-divider.png) repeat-x;
	height: 87px;
}

.macbookscreen {
	position: relative;
	width: 354px;
	height: 223px;
	overflow: hidden;
	margin-left: 80px;
	margin-top: -277px;
	z-index: 1;
}

.ribbon-home {
	position: relative;
	z-index: 2;
	margin-left: 60px;
	margin-top: -245px;
	background: url(../img/ribbon-nieuw.png)  no-repeat;
	height: 111px;
	width: 111px;
}

.ribbon-portfolio {
	position: absolute;
	z-index: 2;
	margin-left: -12px;
	margin-top: -12px;
	background: url(../img/ribbon-nieuw.png)  no-repeat;
	height: 111px;
	width: 111px;
}

.quotebg {
	background: url(../img/quotebg.png) no-repeat;
	width: 418px;
	height: 100px;
	font-style: italic;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 9px;
	line-height: 220%;
	color: #444;
}

.quoteauthor {
	color: #555960;
	margin-left: 320px;
		
}

.quotecircles {
	float: left;
	margin-left: 205px;
}

.contactlabel {
	width: 70px;
	font-weight: bold;
	float: left;
}

#subtitle {
	background: url(../img/subheader-bg.png) repeat-x;
	height: 60px;
	padding-top: 27px;
}

.counttitle {
	color: #313030;
	font-size: 18px;
	padding-bottom: 10px;
	

}
.number {
	color: #4890c2;
	display: block;
	float: left;
	width: 45px;
}

.counttitle .title {
	display: block;
	margin: 0;
}

.counttitle .sub {
	font-size: 12px;
	font-style: italic;
	color: #999;
	font-weight: normal;
}


.red { color: #c24851; }
.green { color: #76c248; }
.yellow { color: #f4bf07; }
.purple { color: #c248b8; }
.orange { color: #f49207; }

#footer {
	border-top: 1px solid #fff;
	background: #363e43;
	padding-top: 20px;
	color: #999;
}

#footer a { color: #999; }

#copyright {
	margin: 20px;
	text-align: center;
	padding-bottom: 10px;
}

#footer h2 {
	color: #fff;
}

.foto {
	padding: 8px;
	margin-left: 20px;
	background: #fff;
	border: 1px solid #eaeaea;
	display: block;
	float: right;
	margin-bottom: 20px;
}

.fotosub, .foto span {
	text-align: center;
	font-style: italic;
	position: absolute;
	width: 290px;
	display: block;
	margin-top: 10px;
}

input {
	border: 0;
	color: #fff;
	font-weight: bold;
	font-size: 14px;
	height: 27px;
	padding-top: 10px;
	padding-left: 20px;	
	margin-bottom: 15px;
	font-family: “Helvetica Neue Light”, “HelveticaNeue-Light”, Arial, Helvetica, sans-serif;
}

input.small {
	background: url(../img/input-small.png) no-repeat;
	width: 250px;
}

input.long {
	background: url(../img/input-long.png) no-repeat;
	width: 555px;	/* -35px */
}

textarea.textarea {
	background: transparent url(../img/input-textarea.png) no-repeat;
	width: 555px;
	height: 155px;
	padding-left: 20px;
	padding-top: 10px;
	border: 0;
	font-size: 14px;	
	color: #fff;
	font-weight: bold;

}

.portfoliolist {
	height: 220px;
}
.portfoliolist li {
	float: left;
	background: url(../img/portfolio-item-bg.png) no-repeat;
	padding: 12px 8px 15px 13px; /*top, right, bottom, left*/
	margin-left: 4px;
}

.portfoliolist li.first {margin: 0;}

.portfoliolist ul li img {
	
}

/* fadebox css */
/* Boxholder met fade */
.fadebox {
	width: 216px;
	height: 170px;
	overflow:hidden;
	position:relative;
	float:left;
}

.fadebox img {
	width: 216px;
	height: 170px;

}

.fadebox .caption {
	width:  100%;
	height: 100%;
	background:gray;
	color:#fff;
	font-weight:bold;
	position:absolute;
	left: 0;
	display:none;
}


.fadebox h2 {
	color: #fff;
	font-size: 16px;
	margin-bottom: 0; padding-bottom: 0;
	padding-top: 15px;
	padding-left: 15px;
}

.fadebox .caption a {
	text-decoration: none;
}
.fadebox .caption .text {
	text-decoration:none;
	color:#FFF;
	padding:15px 15px 0;
	background: red;
	display:block;
}

.fadebox .caption p {
	padding:10px 15px 15px;
	margin:0;
	font-weight:normal;
	font-style: normal;
	color:#FFF;
}

.fadebox .caption a {
	color:#FFF;
	padding:0;
	padding-top:10px;
}

.fadebox .caption a.url { 	font-style:italic; }

.fadebox img {
	border:0;
	position:absolute;
}

.orange .caption { background:#ff6600; }
.green .caption { background: #6a922f; }
.red .caption { background: #c24851; }
.yellow .caption { background: #f4bf07; }
.pink .caption { background: #F82790; }
.blue .caption { background: #467798;}

.spacer {
	float: left;
	display: block;
}

.social li {
	float: left;
	margin-right: 20px;
}

.social a {
	display: block;
	background: url(../img/social/social.png) no-repeat top center;
	width: 50px;
	height: 30px;
	text-align: center;
	padding-top: 35px;
	text-decoration: none;
}

.social .twitter { background: url(../img/social/social-twitter.png) no-repeat top center; }
.social .twitter:hover { background: url(../img/social/social-twitter-hover.png) no-repeat top center; }
.social .flickr { background: url(../img/social/social-flickr.png) no-repeat top center; }
.social .flickr:hover { background: url(../img/social/social-flickr-hover.png) no-repeat top center; }
.social .linkedin { background: url(../img/social/social-linkedin.png) no-repeat top center; }
.social .linkedin:hover { background: url(../img/social/social-linkedin-hover.png) no-repeat top center; }
.social .facebook { background: url(../img/social/social-facebook.png) no-repeat top center; }
.social .facebook:hover { background: url(../img/social/social-facebook-hover.png) no-repeat top center; }

label {
	position: absolute;
	border: 0;
	color: #fff;
	font-weight: bold;
	font-size: 14px;
	height: 27px;
	padding-top: 10px;
	padding-left: 20px;	
	margin-bottom: 15px;
	cursor: text;
}

.sidebar {
	width: 32%;
}

.telefoongroot {
	display: block;
	font-size: 18px;
	font-weight: bold;
	padding: 10px;
	text-align: center;
}

/* Easy Slider */

#slider ul, #slider li{
	margin:0;
	padding:0;
	list-style:none;
	}
#slider li{ 
	/* 
		define width and height of list item (slide)
		entire slider area will adjust according to the parameters provided here
	*/ 
	width: 980px;
	height: 290px;
	overflow:hidden; 
}
.sliderholder {
	height: 290px;
	width: 960px;
	overflow: hidden;
}
span#prevBtn{}
span#nextBtn{}					

/* // Easy Slider */

.iconleft {
	float: left;
	margin: 0px 20px 40px 0px;
}

#loopedslider {
	margin-left: 20px;
}

.loopedsliderbox {
	width:460px;
	height:155px;
	overflow:hidden;
	position:relative;
	cursor:pointer;
}
.slides {
	position:absolute;
}
.slides > div {
	position:absolute;
	top:0;
	width:500px;
	display:none;
}

#quotepager {
	margin-left: 220px;	
}
#quotepager a {
	background: url(../img/circle.png) no-repeat;
	text-indent:-9999px;
	display: block;
	float: left;
	height: 15px;
	width: 13px;
}

#quotepager a.activeSlide {
	background: url(../img/circle-select.png) no-repeat;

}

.diensten {
	width: 210px;
	float: left;
}

.first {
	padding-right: 25px;
}
.diensten li a {
	text-decoration: none;					
	display: block;
	height: 60px;
}

.diensten li a img {
	margin-top: 0px;
	margin-bottom: 5px;
	float: left;
}

.diensten li a span.titel {
	margin: 0; padding: 0;	
	font-size: 14px;
	padding-left: 45px;
	display: block;
	padding-top: 0px;
	font-weight: bold;
}

.diensten li a span {
	margin: 0; padding: 0;	
	font-size: 12px;
	padding-left: 45px;
	font-weight: normal;
	display: block;
}
				

.tweet {
	background: url(../img/icons/quotestop.png) no-repeat right bottom;
}				
.tweet .txt a {
	text-decoration: none;
	color: #7D7D7D;
	font-style: italic;
	line-height: 30px;
}

.tweet .txt a:hover { text-decoration: underline; }
.tweet .txt .quote { 
	margin-right: 15px; float: left; 
	margin-bottom: 30px;
}

.focuscolumn {
}

.info, .success, .warning, .error, .validation {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.info {
color: #00529B;
background-color: #BDE5F8;
background-image: url('info.png');
}
.success {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('success.png');
}
.warning {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('warning.png');
}
.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url('error.png');
}

.slideshow {
	height: 150px;
	width: 460px;
	overflow: hidden;
}

.photoleft {
	float: left;
	margin: 0 30px 10px 0; /*top, right, bottom, left*/
}

.photoright {
	float: right;
	margin: 0 0 10px 30px; /*top, right, bottom, left*/
}

.more {
	padding: 30px;
    box-shadow: 0 0 5px #a3d6ff;
    -webkit-box-shadow: 0 0 5px #a3d6ff; 
    -moz-box-shadow: 0 0 5px #a3d6ff;
    border:1px solid #a3d6ff;
}

.promo {
	text-align: center;
	z-index: 11;
	position: relative;
}

.promo .fulllogo {
	margin-top: 30px;
	margin-bottom: 15px;
}

#fullscreen {
	bsackground: url(../img/subheader-bg.png) repeat-x;
	background: #e5e5e5;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
}

#promowebdesign {
	position: absolute;
	margin-left: 280px;
}

#promoontwikkeling {
	position: absolute;
	margin-left: 420px;
}

#promohosting {
	position: absolute;
	margin-left: 550px;
}

.ie8 .fadebox .caption {
}

.ie8 .fadebox .caption a {
}

.logobox {
	background: url(../img/ademaweb-logo.png) no-repeat;
	height: 30px;
	width: 200px;
}

.logofade {
	background: url(../img/ademaweb-logo.png) no-repeat 0px -30px;
	height: 30px;
	width: 200px;
	display: none;
	position: absolute;
	margin-top: -30px;
}
.beschikbaar {
	background: url(../img/beschikbaar.png) no-repeat;
	width: 122px;
	height: 127px;
	position: absolute;
	margin-top: -27px;
	margin-left: 810px;
	z-index: 12;
	text-decoration: none;
	display: none;
}