/*
style sheet voor 
StudioA Mediamelange
Januari 2010
gemaakt door Fabrizio Deidda
Studio A Mediamelange
www.studioa.nl

algemene breedte van de website is: 966px
## kleuren ##
Studio-rood: #f83f3f
grijs: #ECECEC
donker grijs: #313131
*/

body {font-family:Arial, Helvetica, sans-serif; font-size:12px; background:url(../images/bg.jpg) #333333 top center repeat-x;}
a {text-decoration:none;}

.head {background:url(../images/head.jpg) top center no-repeat; width:100%; height:176px; text-align:center;}
	.logo_a {display:block; width:400px; height:150px; margin:0 auto;}
.content {width:100%; background:url(../images/content_repeat.jpg) top center repeat-y; margin:0 auto;}
	.container {width:100%; background:url(../images/content_over.jpg) top center no-repeat; margin:0 auto;}
		.containing {width:850px; padding-top:4px; margin:0 auto; min-height:290px;}
.ribbon {width:966px; min-height:21px; height:21px; overflow:hidden; background:url(../images/line.jpg) bottom center no-repeat; margin:0 auto;}
	.tikker {width:850px!important; background:none!important; height:20px; padding:10px 0; margin:0 auto;}

.footer {width:966px; min-height:12px; height:12px; background:url(../images/footer.jpg) top center no-repeat; margin:0 auto;}
	.bottom_buttons {width:850px; margin:0 auto; font-size:1.1em;}
		.bottom_buttons ul {float:right; padding-bottom:10px;}
			.bottom_buttons li {display:inline; margin:0 5px;}
			.bottom_buttons .right {}
				ul#topnav li{margin: 0;padding: 0;overflow: hidden;height:20px;float:right;}
				ul#topnav a, ul#topnav span {padding: 5px 5px;float: left;text-decoration: none;clear: both;height: 10px;line-height: 10px; color:#CCC;}
				ul#topnav a {color: #999;}
				ul#topnav span {display: none;}
				ul#topnav_ip li{margin: 0;padding: 0;overflow: hidden;height:20px;float:right;}
				ul#topnav_ip a, ul#topnav span {padding: 5px 5px;float: left;text-decoration: none;clear: both;height: 10px;line-height: 10px; color:#CCC;}
				ul#topnav_ip a {color: #fff;}
				ul#topnav_ip span {display: none;}

/****************************************************************************** home*/

.sm {list-style:none; width:850px; height:300px; display:block; overflow:hidden;}
.sm li {float:left; display:inline; overflow:hidden}

.plaatje {float:right;}

.fadeThis {position:relative; display:block; height: 300px;	width: 625px; background:url(../images/2_n.jpg) 0 -300px no-repeat; }	
.fadeThis * {display: none;}

.fadeThis span.hover {position: absolute; top: 0; left: 0; display: block; height: 300px; width: 625px; background:url(../images/2_n.jpg) 0 0 no-repeat; }

.fadeThis2 {position:relative; display:block; height: 300px; width: 625px; background:url(../images/1_n.jpg) 0 -300px no-repeat; float:right;}	
.fadeThis2 * {display: none;}	
.fadeThis2 span.hover {	position: absolute;	top: 0;	left: 0; display: block; height: 300px;	width: 625px; background:url(../images/1_n.jpg) 0 0 no-repeat; float:right;}

/****************************************************************************** thumbails*/

.titel {width:880px; margin:0 auto; height:31px;}
.titel span {background-color:#f83f3f; padding:5px 20px; margin:0 0 0 20px; font-size:2em; color:#FFF; float:left;}
/*.titel span a {color:#fff; font-size:0.5em;}*/
.terugnaarhome {display:block; height:34px; width:55px; background:url(../images/backtohome.jpg) 10px 1px no-repeat; float:left;}
.terugnaarhome:hover {background-position:10px -32px; text-decoration:none!important;}
.titel div {float:right; padding:15px 15px 15px 15px; margin:0 25px 5px 0px; font-size:1.3em; color:#333; width:350px; background:#ECECEC;}
.titel a {color:#F83F3F;}
/*.titel a:hover { text-decoration:underline;}*/
.titel .clear {background-color:#fff; display:block; margin:0; padding:0;}
.zitem {width:198px;height:113px;border:4px solid #fff;	margin:5px 5px 5px 1px;
	/* required to hide the image after resized */
	overflow:hidden;
	/* for child absolute position */
	position:relative;
	/* display div in line */
	float:left;}
.zitem:hover {width:198px;height:113px;border:4px solid #FFF;}

.zitem .caption {width:200px;height:35px;background:#000;color:#fff;font-weight:bold;	
	/* fix it at the bottom */
	position:absolute;
	bottom:-1px; /* fix IE issue */
	left:0;
	/* hide it by default */
	display:none;
	/* opacity setting */
	filter:alpha(opacity=80);    /* ie  */
	-moz-opacity:0.8;    /* old mozilla browser like netscape  */
	-khtml-opacity: 0.8;    /* for really really old safari */  
	opacity: 0.8;    /* css standard, currently it works in most modern browsers like firefox,  */}

.zitem .caption a {text-decoration:none;color:#fff;font-size:12px;/* add spacing and make the whole row clickable*/padding:5px;display:block;}

.zitem img {border:0;width:200px;/* allow javascript moves the img position*/position:absolute;}

.clear {clear:both;}
.social {padding:5px 0 5px 6px;}
.social li {display:inline;}
.socialimage:hover {opacity: 0.5;}

/*contact/medw/facilteit*/
.containing p {display:block; clear:both; padding:20px 25px 10px 25px; font-size:1.3em;}

/****************************************************************************** contact*/

.contact {display:block; clear:both; margin:0 10px; margin-top:20px;}
.inv, textarea {border:#DCDADA solid 2px; margin-bottom:2px;}
.verplichtveld {font-size:0.8em; color:#CCC;}
.error {font-size:0.8em; color:#F83F3F; font-weight:bold;}
.knop {border:#999 solid 2px; color:#000; cursor:pointer; margin:20px 0 20px 0px;}
.knop:hover {border-color:#F83F3F;}

/****************************************************************************** google&route*/
.route {width:305px; margin-bottom:20px; background:#ECECEC; padding:10px;}
	.route h1 {font-weight:normal; margin-bottom:5px; font-size:1.2em;}
	.route .fill1, .route .fill2  {display:block; border:#FFF; margin-bottom:5px; color:#333; width:250px;}
	.route .fill2 {border:#DCDADA; background:#DCDADA;}
	.route .buttom {border:0px none; background:url(../images/go.jpg) top left no-repeat; height:29px; width:29px; color:#000; cursor:pointer; position:absolute; margin:4px 0 0 270px;}
	.route .buttom:hover {background-position:bottom;}
.google {position:absolute; margin-left:500px;}
#map_canvas {width: 325px; height: 348px}

/****************************************************************************** medewerkers*/
.medw {padding:15px 5px 0px 20px;}
.functie {display:block; font-size:0.8em;}
.person {float:left; margin:0 25px 25px 0;}
.title_med, .title_med_ddh {position:absolute; z-index:10; display:block; padding:10px; color:#fff; font-size:1.2em; margin:5px 0 0 5px}
.title_med {background-color:#f83f3f;}
.title_med_ddh {background-color:#1A462B;}
.mail, .mail_ddh {position:absolute; z-index:10; display:block; padding:10px; color:#fff; font-size:1.2em; margin:160px 0 0 200px}
.mail {background-color:#f83f3f; }
.mail_ddh {background-color:#1A462B; }
.mail:hover {background-color:#fff; color:#000; }
.mail_ddh:hover {background-color:#fff; color:#000; }
/****************************************************************************** blog*/
#blog {width:834px; height:525px; display:block; margin:20px 0 0 8px;}