/*
	Basticom - www.basticom.nl - info@basticom.nl - 06 389 19 473 - Oenkerk
*/

/* fraaicommunicatie.nl */

/* reset */
body{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup,sub{line-height:-1px;vertical-align:text-top;}sub{vertical-align:text-bottom;}input, textarea, select{font-family:inherit;font-size:inherit;font-weight:inherit;}

/* fonts reset */
body {font:13px/1.22 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}table {font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:99%;}


body {
	margin: 0;
	padding: 0;
	color: #261c02;
	background: url("../images/bg_body.gif") 50% 0 repeat-y fixed;
	height: 100%;
}

body,td,th,input,select,textarea {
	font: 12px/20px tahoma, arial, sans-serif;
}

input,textarea { line-height: normal; margin: 0; padding: 0; }
form { margin: 0; padding: 0; }
fieldset { border: none; padding: 0; margin: 0; }

p { margin: 0 0 22px 0; }

a { color: #ec008c; text-decoration: none; outline: none; }
a:hover { color: #ec008c; text-decoration: underline; }

img { border: none; }
caption { display: none; }

ul { margin: 0 0 20px 25px; padding: 0;	}
ul li { list-style-type: disc; }
ol { margin: 0 0 20px 25px; padding: 0; }
ol li { list-style-type: decimal; }

table { border-collapse: collapse; }
th, td {}
th {}
thead th {}
tbody th {}
tfoot th {}
tfoot td {}

dl dt {}
dl dd {}

strong { font-weight: bold; }
em { font-style: italic; }

hr { height: 0px; border: 0px; border-bottom: 1px solid #efefef; }

.error { color: red; font-weight: bold; }
.margin { margin: 0; }

.hidden { display: none; }
.clear { clear:  both; }
.left { float: left; }
.right { float: right; }

.black { color: #261c02; }
.magenta { color: #ec008c; }



/*** HEADINGS ***/

h1,h2,h3,h4,h5 {
	margin-bottom: 10px;
	padding: 0;
	color: #ec008c;
	font-weight: normal;
}

h1 a,h2 a,h3 a,h4 a,h5 a { text-decoration: none; color: #261c02; }
h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover { color: #261c02; }

h1 { font-size: 22px; }
h2 { font-size: 20px; text-transform: lowercase; }
h3 { font-size: 17px; color: #261c02; text-transform: lowercase; }
h4 { font-size: 14px; }
h5 { font-size: 12px; }


/*** CONTAINER ***/

#container {
	position: relative;
	margin: 0 auto;
	width: 900px;
	text-align: left;
	height: 100%;
}


/*** LOGO ***/

#logo h1 {
	position: absolute;
	width: 300px;
	height: 33px;
	overflow: hidden;
	z-index: 10;
	text-indent: -9999px;
	background-image: url("../images/logo.gif");
	top: 60px;
	left: 15px;
	margin: 0;
}

#logo h1 a {
	display: block;
	height: 33px;
}


/*** MAIN CONTENT ***/

#main {
	width: 550px;
	margin: 153px 0 0 10px;
	float: left;
	/*background-color: lightgreen;*/
}


.content {
	padding: 0 40px 0 85px;
	/*background-color: grey;*/
}

.content p { text-align: justify; }


#payoff {
	width: 260px;
	height: 20px;
	margin-top: 60px;
}


/*** PROJECTEN ***/

#portfolio { }

#portfolio .row {
	overflow: hidden;
	margin-bottom: 13px;
}

.image-box {
	width: 133px;
	height: 133px;
	overflow: hidden;
	float: left;
	margin-right: 13px;
}

.image-box.right { margin-right: 0; }

.image-box a {
	display: block;
	width: 131px;
	height: 131px;
	overflow: hidden;
	padding: 1px;
	background-color: #ec008c;
}

.image-box a:hover {
	background-color: #261c02;
}


/*** RIGHT CONTENT ***/

#rightcontent {
	float: right;
	width: 325px;
	/*background-color: yellow;*/
}


/*** MENU ***/

#menu {
	margin-top: 210px;
}

#menu ul { margin: 0; }

#menu li {
	padding: 0;
	list-style-type: none;
	padding-bottom: 50px;
	width: 170px;
	height: 24px;
}

#menu li a {
	display: block;
	text-transform: lowercase;
	font-size: 24px;
	text-decoration: none;
	color: #fff;
	text-indent: -1234em;
	width: 170px;
	height: 24px;
}

#menu li a:hover, #menu li a.active {
	text-decoration: none;
	color: #fff;
}

#menu ul li.over_fraai a {
	background-image: url("../images/menu/over_fraai.png");
	_background-image: none;
	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/menu/over_fraai.png', sizingMethod='fixed');
}

#menu ul li.wat_doet_fraai a {
	background-image: url("../images/menu/wat_doet_fraai.png");
	_background-image: none;
	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/menu/wat_doet_fraai.png', sizingMethod='fixed');
}

#menu ul li.fraai_werk a {
	background-image: url("../images/menu/fraai_werk.png");
	_background-image: none;
	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/menu/fraai_werk.png', sizingMethod='fixed');
}

#menu ul li.contact a {
	background-image: url("../images/menu/contact.png");
	_background-image: none;
	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/menu/contact.png', sizingMethod='fixed');
}


/*** CSS FORM TEMPLATE ***/

.black { color: #261c02; }
.magenta { color: #ec008c; }

div.form-container {
	overflow: hidden;
	margin: 0 0 20px 0;
}

p.legend {
	/*background-color: #FFC; border: 2px dotted #FC6;
	padding: 10px;*/
	font-style: italic;
}

p.legend strong { font-style: italic; }

p.legend em {
	color: #ec008c;
	font-style: normal;
}

div.errors { margin: 0 0 10px 0; padding: 5px 10px; border: #FC6 1px solid; background-color: #FFC; }
div.errors p { margin: 0; }
div.errors p em { color: #ec008c; font-style: normal; font-weight: bold; }

div.form-container form p { margin: 0; }
div.form-container form p.note { margin-left: 170px; font-size: 90%; color: #333; }
div.form-container form fieldset { margin: 10px 0; /*padding: 10px; border: 1px solid #eee;*/ }
div.form-container form legend { display: none; font-weight: bold; color: #ec008c; }
div.form-container form fieldset div { padding: 0.25em 0; }
div.form-container label, 
div.form-container span.label {
	margin-right: 10px;
	padding-right: 10px;
	width: 150px;
	display: block;
	/*float: left;
	text-align: right;*/
	position: relative;
	cursor: pointer;
}

div.form-container label:hover,
div.form-container span.label:hover { color: #ec008c;}

div.form-container label em, 
div.form-container span.label em { /*position: absolute; right: 0;*/ font-size: 120%; font-style: normal; color: #ec008c; }

div.form-container input,
div.form-container textarea { padding: 1px 0 1px 4px; border: 1px solid #bbb; }

div.form-container input.inputerror { border: 1px solid #ec008c; background-color: #FEF; }

div.form-container input:focus,
div.form-container input.inputerror:focus, 
div.form-container textarea.inputerror{	background-color: #fff; border-color: #ec008c; }

div.form-container textarea:focus {	background-color: #fff; border-color: #ec008c; }

div.form-container div.controlset label, 
div.form-container div.controlset input { display: inline; float: none; }

div.form-container div.controlset div { margin-left: 170px; }

div.form-container div.buttonrow { margin: 0 0 0 136px; }

div.form-container textarea, div.form-container input { width: 250px; }
div.form-container .buttonrow input { width: 120px; height: 22px; background-color: #ec008c; color: #fff; border: none; font-weight: bold; }