/*
----------------------------------------------- 
Social media banner | Detroit Media
Author: markupmark | Nivas
Updated: 18/12/2009         
----------------------------------------------- */

/* =Normalize
----------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}

html {
	min-height: 100%;
	height:100%;
}
body {
line-height: 1;
color: black;
background: white;
min-height: 100%;
height:100%;
width:100%;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
h1,
h2,
h3,
h4,
h5 { font-weight: normal; }


a,a:link { text-decoration:underline; color:#333;}



/* =General
----------------------------------------------- */
body {
font:62.5%/1.8 Arial, Helvetica, sans-serif;  /* default 10px */
background:#b6bbbd url(../images/body/bg-body.gif) repeat-x 0 0;
color:#000000;
text-align:center;
}
a,a:link { 
text-decoration: underline; 
}
a:hover { 
text-decoration:none;  
} 
a:visited,
a:focus { 
text-decoration:none; 
} 

div.overlayShow {
	background-image:url(../images/body/lightboxPixel.gif);
	background-repeat:repeat-x, repeat-y;
	z-index: 99;
	top:0;
	bottom:0;
	margin:0 auto;
	clear:both;
	width: 100%;
	min-height: 150%;
	height: 150%;
	position:absolute;
	opacity: 0.6;
	filter:alpha(opacity=60);
}

/* =layout
----------------------------------------------- */ 
.gen_block  { width:100%; float:left; text-align:left; }
.align 		{ width:1155px; margin:0 auto; position:relative; }

#branding		 { background:url(../images/branding/bg-branding.gif) repeat-x 0 0; margin-top:42px; height:117px; position:relative; }
#content_main 	 { background:url(../images/primary/bg-content-main.gif) no-repeat 50% 0; height:344px; }
#content_sec 	 { background:url(../images/primary/bg-content-sec.png) no-repeat 50% 0; height:350px; padding:30px 0; }


/* =branding
----------------------------------------------- */ 
h1#brand { 
text-indent:-9999em;
background: url(../images/branding/brand-social-media.png) no-repeat 0 0;
width:353px;
height:36px;
float:left;
position:relative;
top:42px;
left:-39px;
}  
ul#nav_main {
position:absolute;
right:80px;
top:-22px;
}

ul#lang_nav {
	position:absolute;
	left: 0px;
	top:-20px;
}
li#lang_nl {
	float:left;
}
li#lang_en {
	margin-left: 10px;
	float:left;
}

ul#nav_main li { display:inline; }
ul#nav_main li a {
float:left;
background:url(../images/branding/mir-nav.png) no-repeat 0 0;
width:130px;
height:44px;
text-indent:-9999em;
}
ul#nav_main li#hoe_werkt_het a 			{ background-position: 0 0;}
ul#nav_main li#cases a 					{ background-position: -144px 0;}
ul#nav_main li#contact a 				{ background-position: -288px 0;}
ul#nav_main li#hoe_werkt_het a:hover 	{ background-position: 0 -50px;}
ul#nav_main li#cases a:hover 			{ background-position: -144px -50px;}
ul#nav_main li#contact a:hover	 		{ background-position: -288px -50px;}


/* =content
----------------------------------------------- */ 
h1#mir_social_media_tagline {
background:url(../images/primary/mir-social-media-tagline.png) no-repeat 0 0;
float:left;
width:100%;
height:53px;
text-indent:-9999em;
margin:30px 0 20px 0;
}
h2#mir_testimonial { 
background:url(../images/primary/mir-testimonial.gif) no-repeat 0 0;
float:left;
width:100%;
height:14px;
text-indent:-9999em;
margin-bottom:10px;
}
h2#mir_contact { 
background:url(../images/primary/mir-contact.gif) no-repeat 0 0;
float:left;
width:100%;
height:14px;
text-indent:-9999em;
margin-bottom:10px;
}
h2#mir_cases { 
background:url(../images/primary/mir-cases.gif) no-repeat 0 0;
float:left;
width:100%;
height:14px;
text-indent:-9999em;
margin-bottom:10px;
}
#content_main h2 { font-size:20px; font-weight:bold; padding-left:50px; }
#content_main p  { font-size:17px; padding-left:50px; line-height:1.6em; }
#content_main .split_a  { width:460px; float:left; }
#content_main .split_b  { width:540px; float:right; top:-70px; position:relative;}

#flash				{ background:url(../images/primary/bg-flash-player.png) no-repeat 0 0; width:538px; height:375px; }
#flash .youtubeplayer { padding:35px 28px; }

ul#social { position:absolute; bottom:50px; left:115px;}
ul#social li { display:inline; float:left; margin-right:5px; }
ul#social a#twitter 	{ text-indent:-9999em; background:url(../images/primary/ico-social-share.gif) no-repeat 0 0; width:16px; height:16px; float:left; }
ul#social a#facebook 	{ text-indent:-9999em; background:url(../images/primary/ico-social-share.gif) no-repeat -19px 0; width:16px; height:16px; float:left;}
ul#social a#hyves 		{ text-indent:-9999em; background:url(../images/primary/ico-social-share.gif) no-repeat -38px 0; width:16px; height:16px; float:left;}

#content_sec p  		{ font-size:15px; /*line-height:1.4em;*/ }
#content_sec p.author   { font-style:italic; font-size:12px; color:#f94283; margin-top:1em; }

div.testimonial {
width:460px;
height:241px;
float:left;
background:url(../images/primary/bg-testimonial.gif) no-repeat 0 0;
margin-right:38px;
display:inline;
line-height:1.7em
} 
div.testimonial .wrap { padding:20px; }
p.volgende_testimonial a {
background:url(../images/primary/bt-volgende.gif) no-repeat 0 0;
width:199px;
height:34px;
float:left;
text-indent:-9999em;
margin:10px 0;

}
p.volgende_testimonial a:hover { background-position:0 -40px; }
div.contact {
width:309px;
height:241px;
float:left;
background:url(../images/primary/bg-contact.gif) no-repeat 0 0;
margin-right:38px;
display:inline;
} 
div.contact .wrap { padding:20px; }
div.detroit_media_info { position: relative; top:25px;}
div.detroit_media_info img { float:left; padding-right:15px; }
div.detroit_media_info ul 		{ font-size:12px; line-height:1; }
div.detroit_media_info strong 	{ font-weight:bold; }
div.detroit_media_info li 		{ margin-bottom:5px; }

div.cases {
width:309px;
height:241px;
float:left;
background:url(../images/primary/bg-contact.gif) no-repeat 0 0;
display:inline;
} 
div.cases .wrap { padding:20px; }
p.bekijk_cases a {
background:url(../images/primary/bt-bekijk-cases.gif) no-repeat 0 0;
width:136px;
height:34px;
float:left;
text-indent:-9999em;
margin:10px 0;
}
p.bekijk_cases a:hover { background-position:0 -40px; }
p#site_info { float:left; width:100%; clear:both; position:relative; top:40px; font-size:9px; color:#5a5d5e; }

/* =dialog
----------------------------------------------- */ 
#dialog_hoe_werkt_het { background:#ffffff; }
#dialog_hoe_werkt_het .head { background:url(../images/body/bg-modal-head.gif) repeat-x 0 0; height:92px; }
#dialog_hoe_werkt_het .head h1.brand_mini {
text-indent:-9999em;
background: url(../images/branding/brand-social-media-dialog.png) no-repeat 0 0;
width:253px;
height:26px;
float:left;
position:relative;
top:33px;
left:25px;	
}
#dialog_hoe_werkt_het .dialog_content { text-align:left; padding:25px;background:#ffffff url(../images/primary/bg-dialog-content.gif) repeat-x 0 0; }
.dialog_content h2 { font-size:15px; font-weight:bold;  }
.dialog_content p  { font-size:13px;  line-height:1.6em; }
a#dialog_hoe_werkt_het_close { position:absolute; right:15px; bottom:15px; text-indent:-9999em; width:132px; height:34px; background:url(../images/primary/bt-dialog-close2.gif) no-repeat 0 0;}
a#dialog_hoe_werkt_het_close:hover { background-position:0 -41px; }

#dialog_cases { background:#ffffff; }
#dialog_cases .head { background:url(../images/body/bg-modal-head.gif) repeat-x 0 0; height:92px; }
#dialog_cases .head h1.brand_mini {
text-indent:-9999em;
background: url(../images/branding/brand-social-media-dialog.png) no-repeat 0 0;
width:253px;
height:26px;
float:left;
position:relative;
top:33px;
left:25px;	
}


a#dialog_cases_next { position:absolute; right:578px; bottom:15px; text-indent:-9999em; width:115px; height:34px; background:url(../images/primary/bt-volgende.gif) no-repeat 0 0;}
a#dialog_cases_next:hover { background-position:0 -40px; }

a#dialog_cases_close { position:absolute; right:15px; bottom:15px; text-indent:-9999em; width:135px; height:34px; background:url(../images/primary/bt-dialog-close2.gif) no-repeat 0 0;}
a#dialog_cases_close:hover { background-position:0 -41px; }

#dialog_contact { background:#ffffff; }
#dialog_contact .head { background:url(../images/body/bg-modal-head.gif) repeat-x 0 0; height:92px; }
#dialog_contact .head h1.brand_mini {
text-indent:-9999em;
background: url(../images/branding/brand-social-media-dialog.png) no-repeat 0 0;
width:253px;
height:26px;
float:left;
position:relative;
top:33px;
left:25px;	
}

#dialog_contact .dialog_content { text-align:left; padding:25px;background:#ffffff url(../images/primary/bg-dialog-content.gif) repeat-x 0 0;  }
#dialog_contact .dialog_content .contactText { font-size: 13px; }
.dialog_content h2 { font-size:15px; font-weight:bold;  }
.dialog_content p  { font-size:13px;  line-height:1.6em; color:#103344;}
.dialog_content h1  {  font-size:10px; line-height:1.6em; color:#103344;}

#smb2				{ position:absolute; right: 115px; bottom: 120px;  }
a#dialog_contact_close { position:absolute; right:15px; bottom:15px; text-indent:-9999em; width:130px; height:34px; background:url(../images/primary/bt-dialog-close2.gif) no-repeat 0 0;}
a#dialog_contact_close:hover { background-position:0 -41px; }

#dialog_cases .dialog_content { text-align:left; padding:25px;background:#ffffff url(../images/primary/bg-dialog-content.gif) repeat-x 0 0;  }

#dialog_cases .dialog_content h2 { font-size:15px; font-weight:bold;  }
#dialog_cases .dialog_content p  { font-size:13px;  line-height:1.6em; }


form.contact_form { font-size:11px; font-family:Arial, Helvetica, sans-serif; }

form.contact_form dl {
	margin-top: -7px;
}

form.contact_form p {
	font-size: 13px;
}

form.contact_form .emailText {
	margin-left: 258px;
	margin-top: -19px;
}

form.contact_form input.text_input {
font-family:Arial, Helvetica, sans-serif;
border:1px solid #748b96;
background:#99b0bb;
height: 15px;
width: 250px;
font-size: 12px;
}
form.contact_form textarea.text_textarea {
font-family:Arial, Helvetica, sans-serif;
border:1px solid #748b96;
background:#99b0bb;
width:508px;
height:140px;
font-size: 12px;
}
form.contact_form dl { margin-bottom:10px; }
form.contact_form dt { font-weight:bold; }