/*
     Created by Alexander Hommel
	  
	  Web: www.in-bloom.org
	  E-Mail: design@in-bloom.org
*/

html, body {height: 100%;}

/*body > #wrapper {height: auto; min-height: 98%;}*/


* { padding: 0; margin: 0; }

a img, :link img, :visited img {	border: 0;}

ol, ul {
	list-style: none;
	line-height: 1.5em; 
	margin: 15px 0px 15px 20px; 
   font-size: 1.1em;
}

.floatleft { float: left; }
img.floatleft {margin: 0 20px 10px 0;}
.floatright { float: right; }
img.floatright {margin: 0 0 10px 20px;}
.clear { clear: both; }
.fineline {border-top: 1px dotted #646464; margin: 10px 0;}
.bold {font-weight:bold;}
img.center {text-align: center; margin: 15px}


body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 62.5%;
 background: #fff;
 background: #e6e6e6 url(images/body-bg.png) repeat-x top;
 }

#wrapper { 
 min-height: 100%;
 height: auto !important;
 height: 100%;
 margin: 0 auto -100px;
 width: 1000px;
}

#header {width: 1000px; margin:auto; height:100px;}


#logo {
 float:left;
 width: 300px;
 margin:0;
 padding:0;
}

#logo h1 {
 font-family: Georgia;
 font-size: 5.5em;
 font-weight: lighter;
 font-style:italic;
 color: #fff;
 padding: 15px;
}

#logo h1 a {text-decoration:none; color:#fff;}

.brackets {color:#B10038;}

#navigation {float: right; width: 650px;}

#navlist {
 list-style-type:none;
 margin-top:35px;
 font-family: Arial, Helvetica;
 font-size: 1.8em;
 text-transform:uppercase;
 color:#fff;
}

#navlist li {display: inline; padding: 10px;}
#navlist li a {color:#fff; text-decoration:none;padding: 3px 7px;}
#navlist li a:hover,#navlist li a.active  {background:#B10038; }

#sub-header { width: 1000px; margin:auto; height:300px; background: url(images/header.jpg) no-repeat top;}

#tagline {
 float: right; 
 width: 440px; 
 margin: 40px 30px 40px 20px;
/* padding: 40px 10px; */
 font-family: Georgia;
 font-size: 2.7em;
 font-style:italic;
 color: #fff;
 line-height: 2em;
}

#content {
 width: 100%;
 min-height: 150px;
/* height: 350px !important*/
 padding-bottom: 150px;
 color:#2a2a2a;
}

#content p {margin: 15px 0px 15px 0px;}

#content a, #footer a {text-decoration: none; color:#B10038;}
#content a:hover, #footer a:hover {text-decoration: underline;}

#content h2 {font-family: Georgia; font-size: 2.5em; font-style:italic; color:#2a2a2a; margin: 20px;}
#content h4 {font-family: Arial; font-size: 1.2em; font-weight: bold; color:#2a2a2a; margin: 20px 0 10px 20px;}


.column-left {float:left; width: 300px; margin: 0px 50px 20px 0;}
.column-middle {float:left; width: 300px; margin: 0px auto; margin-bottom: 20px;}
.column-right {float:right; width: 300px; margin: 0px 0 20px 10px;}
.column-contact {float:left; width: 300px; margin: 0px auto; margin-bottom: 20px;}

.inner p{padding:0 20px; font-size:1.1em;line-height: 1.5em;}

/* services page */

.column-left-wide {float:left; width: 100%; margin: 0px 50px 20px 0;}
.column-left-wide p {padding-right: 450px;}

img.web {float: right; margin-right: 170px;}
img.ps {float: right; margin-right: 50px;}
img.wp {float: right; margin-right: 200px;}
/* portfolio page */

.folio-left {float:left; width: 400px;/* height: 180px; */margin: 0px 0px 20px 10px;}
.folio-right {float:left; width: 400px; /* height: 180px; */ margin: 0px 0px 20px 140px;}



#content a.more {color:#fff !important; text-decoration:none; text-transform:uppercase; line-height: 2.5em; padding: 3px 8px; background:#B10038;}

li.services {background: url(images/star.png) no-repeat 0px 0px; padding-left: 20px;}

li.mail {background: url(images/mail.gif) no-repeat 0px 2px; padding-left: 20px;}
li.phone {background: url(images/mobile.gif) no-repeat 0px 1px; padding-left: 20px;}
li.chat {background: url(images/person.gif) no-repeat 0px 2px; padding-left: 20px;}
li.twitter {background: url(images/twitter_icon.gif) no-repeat 0px 2px; padding-left: 20px;}
li.flickr {background: url(images/camera.gif) no-repeat 0px 2px; padding-left: 20px;}

#footer { 
 width: 100%;
 clear: both;
 font-size: 1em;
 line-height: 2em;
 height: 100px;
 background-color: #2a2a2a;
 text-align: center;
 border-top: 1px solid #ccc;  
}

.push {
	height:100px;
}

#inner-footer {width: 1000px;  margin: auto; padding: 10px; color:#e4e4e4; }

#copyright { margin-left: 20px; text-align:center;}

#bottom-nav {float: right; margin-right: 20px;}

/* 
.clearfix:after {content: ".";
	display: block;
   height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
 Hides from IE-mac \
* html .clearfix { height: 1%;}
.clearfix {display: block;}
 End hide from IE-mac */



/* Sliding Boxes with Captions */

.boxgrid{
 width: 400px;
 height: 240px;
 margin:10px;
 float:left;
 background:#161613;
 border: solid 10px #333;
 overflow: hidden;
 position: relative;
}

.boxgrid p{ 
 padding: 0 5px; 
 font-size: 1.2em;
 color:#fff; 
}

.boxgrid h3 {
 padding: 10px 5px 0 5px ; 
 font-family: Arial, Helvetica, sans-serif;
 font-size: 1.5em;
 font-weight: bold;
  color:#fff; 
}

.boxgrid img{
 position: absolute;
 top: 0;
 left: 0;
 border: 0;
}

.boxcaption{
 float: left;
 position: absolute;
 background: #000;
 height: 120px;
 width: 100%;
 opacity: .9;
 /* For IE 5-7 */
 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
 /* For IE 8 */
 -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
}
	
.captionfull .boxcaption {
 top: 240px;
 left: 0;
}

.caption .boxcaption {
 top: 200px;
 left: 0;
}

#content.caption p {
  font-size: 1.2em;
 color:#fff;
}

img.border {border: solid 10px #333;}

#contactform {
	width: 300px;
	padding: 10px;
	line-height: 1.5em;
	margin-top: 50px;
}

/*#naam, #email, #bericht {
	margin-top: 5px;
}*/

label {float: left; margin-top: 10px; font-size:1.1em;}

input {float: right; border:3px solid #333; width: 200px; height: 1.5em; background:transparent;font-size:1.1em; padding: 3px 0 0 3px; margin: 5px;}

textarea {
 float: right; 
 border:3px solid #333; 
 width: 200px; 
 background:transparent;
 font-family: Arial, Helvetica, sans-serif;
 font-size:1.1em; 
 padding: 3px 0 0 3px; 
 margin: 5px;}

input.formbutton{
cursor:pointer;
border:none;
background:#B10038;
color:#fff;
font-weight:bold;
padding: 1px 2px;
height: 2.5em;
width: 100px;
}