/* ------------------------------ *\
 *      YUNA                      *
 *      [w] www.yuna.nl           *
 *      [e] info@yuna.nl          *
 *      [t] +31 010 4255854	    *
\* ------------------------------ */

/*------------------------------ *\
 *     Hemago.com     *
\*------------------------------ */

html,
html,
body
{
	height:100%;
	margin:0 0 0px 0;
	padding:0;
}

body
{
	background-color: gray;
	text-align:center;
	font-family: Arial, Helvetica, sans-serif;
	font-size:75%;
	line-height:170%;
	padding:0px;
	margin:0 0 0px 0;
	color: #177ea4;
}

/* ----- generic styling ----- */
p { margin: 5px 0;}

h1,
h2,
h3,
h4,
h5
{
	margin: 0px 0 0 0;
	padding:0;
}

ul,
li,
ol
{}

li { }

a
{
	color: #71851d; 
	text-decoration: underline;
}


a:hover	{ color: gray; }

h1 {
	color: black;
	width: 100%;
	margin: 0px 0 3px 0;
	font-weight:bold;
	font-size:170%;
	}

h3,
h4,
h5
{
	color: #177ea4;
	font-size:120%;
	margin: 10px 0px 5px 0;
	padding: 0px;
}

h2{
	
	font-size: 140%;
	margin: 0px;
	padding: 0px;
}

h1 span { display: none; }
h2 span { display: none; }

embed { margin: 0px; padding: 0px; }
object{ margin: 0px; padding: 0px;}

em, i { width: 95%; font-size: 100%; }

hr {
	height: 1px;
	border: 0 solid transparent;
	color: #177ea4;
	background-color: #177ea4;;
	margin: 10px 0;
	line-height: 1px;
}

img { margin: 0px; padding: 0px; border: 0px; }

.clear { clear: both;}
.clearright { clear: right;}
.clearleft { clear: left;}

.floatRight	{	float: right;	}
.floatLeft	{	float: left;	}

/*====================================================================================*/
/*	 Structure						  */
/*====================================================================================*/

#outer
{
	background-repeat: no-repeat;
	background-position: top center;
	/*background-color: #492935;*/
	background-color: white;
	background-image: url(../img/bg_body.jpg);
}

#mainContainer
{
	width: 934px;
	margin: 0 auto;
	ackground: red;
}


#wrap
{
	position: relative;
	display: block;
	padding: 0px 0;
	width: 910px;
	margin: 0 14px 0 0;
	text-align: left;
	ackground: teal;
}


#columnLeft
{
	float: left;
	width: 200px;
	ackground: yellow;
}

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


/*---- Header ---- */
#header
{
	position: relative;
	width: 934px;
	height: 130px;
	margin:0 auto;
	text-align: left;
	background: url(../img/bg_header.jpg) no-repeat 0 0;
}

#logo 
{
	position: absolute;
	left: 10px;
	top: 15px;
	background: url(../img/logo.png) no-repeat 0 0;
	display: block;
	width: 210px;
	height: 90px;
}

#tabsBox { width:270px; height: 41px; position: absolute; left: 641px; top: 73px; }
#tabsBox a:hover {background: none;}
#tabsBox a span {display: none;}
#tabsBox #tabHome { float: left; display: block; width:133px; height: 41px; background: url(../img/tab_home_over.jpg) }
	#tabsBox #tabHome a { display: block; width:133px; height: 41px; background: url(../img/tab_home.jpg) }
		#tabsBox #tabHome a:hover {background: none;}
#tabsBox #tabContact { float: left;display: block; width:133px; height: 41px; background: url(../img/tab_contact_over.jpg) }
	#tabsBox #tabContact a { display: block; width:133px; height: 41px; background: url(../img/tab_contact.jpg) }
		#tabsBox #tabContact a:hover {background: none;}
	
div#nav
{
	loat: left;
	position: absolute;
	top: 75px;
	left: 0px;
	height: 28px;
	z-index: 99;
}

/* logo's */
#logoLine
{
	clear: both;
	background: url(../img/bg_logo_line.jpg);
	height: 70px;
}

#logoLine .inner
{
	width: 860px;
	margin: 0 auto;
	padding: 10px 0 0 0;
}

#logoLine .inner img {float: right; margin: 0 35px; }

/* footer */
#footer
{
	background: #707070 url(../img/bg_footer.jpg) repeat-x 0 0;
	height: 250px;
	min-height: 250px;
}

*> html #footer
{
	height: auto;
}

/*====================================================================================*/
/*	 NavBox left Column 						  */
/*====================================================================================*/

#navBox
{
	width: 255px;
	background: url(../img/bg_mainnav.jpg) repeat-y left top;
}

#navBox .navBoxTop
{
	width: 255px;
	height: 20px;
	background: url(../img/bg_mainnav_top.jpg) no-repeat left top;
}

#navBox .navBoxBottom
{
	width: 255px;
	height: 47px;
	background: url(../img/bg_mainnav_bottom.jpg) no-repeat left top;
}


/*====================================================================================*/
/*	 Homepage 						  */
/*====================================================================================*/
#gallery
{
	width:647px;
	height: 255px;
	background: url(../img/bg_temp_gallery.jpg);
}

/*====================================================================================*/
/*	 pages						  */
/*====================================================================================*/

.content
{
	width: 647px;
	background: url(../img/bg_content.jpg) no-repeat left top;
	min-height: 250px;
	height: 250px;
}

*> .content {height: auto;}

.content .padding
{
	padding: 30px 45px;
	height: 400px;
	min-height: 400px;
}

*>.content .padding {
	height: auto;
}

/*tekst */
.content h2{}
.content ul {margin: 8px 0; padding: 0px 0 0 30px;}
.content ul li {
	list-style-position: outside;
	list-style: none;
	list-style-image: url(../img/bg_li_content.gif);
	margin:0 0 0 0;
}

.content .padding img
{
	margin: 10px;
}
/* img */
div.imgBoxOuter
{
	float: right;
	clear: right;
	position: relative;
	display: block;
	width: 202px;
	border: 1px solid gray;
	margin: 10px 0 0px  10px;
	text-decoration: none;
}

div.imgBoxInner
{
	width: 200px;
	border: 1px solid white;
	overflow: hidden;
	position: relative;
}

div.imgBoxInner a {}
.content div.imgBoxInner a img {position: relative; margin:0px; padding: 0px;}
.content div.imgBoxInner img {position: relative; margin:0px; padding: 0px;}

div.imgBoxInner div.zoomButton 
{ 
	display: block; 
	position: absolute; 
	width: 20px; 
	height: 20px; 
	bottom: 3px; 
	right: 3px; 
	background: url(../img/bg_a_img_zoomicon.gif);
}

/* pdf */


div.pdfBox
{
	margin-top: 15px;
	padding: 0px 220px 0px 0px;
}

div.pdfBox .pdfItem
{
	padding: 5px ;
	argin-left: 50px;
	padding-left: 35px;
	background: #F1F1F1 url(../img/bg_pdf_item.jpg) no-repeat 10px 10px;
}

div.pdfBox a
{
	display: block;
}

div.pdfBox span
{
	display: block;
	font-size: 90%;
	color: #2E61A7;
	line-height: 1.4em;
}


/*----- Client login -----*/

div.clientLoginLink{
	margin: 10px 20px 0px 0px;
	padding: 0px;
	position: absolute;
	right:10px;
	top: 0px;
	ackground: url(../img/bg_logout.gif) no-repeat top right;
}

div.clientLoginLink a { 
	color: #90a538;
	text-decoration: none;
	font-weight: bold;
	display: block;
	padding: 0px 25px 0px 0px;
	background: url(../img/bg_logout.gif) no-repeat top right;
}

div.clientLoginLink a:hover { 
	text-decoration: underline;
}

form#clientLogin {
	margin: 30px 0px 0px 0px;
}

form#clientLogin .label {
	position: relative;
	float: left;
	width: 150px;
	font-weight: bold;
	ackground: red;
}

form#clientLogin input {
	position: relative;
	width: 230px;
	eight: 20px;
	padding: 3px;
	background: url(../img/bg_input_login.gif) top left no-repeat;
	border: 1px solid #bcbaba;
}

form#clientLogin .contents{

	position: relative;
	display: inline;
	ackground: blue;
	argin: 0px 0px 0px 155px;
	padding: 0px;
	
}

form#clientLogin input.image {
	position: absolute;
	width: auto;
	background: none;
	border: none;
	margin: 0px 0px 0px 145px;
	*margin: 0px;
}


form#clientLogin ul {
	margin: 0px;
	padding: 0px;	
}

.content form#clientLogin .section ul li {
	list-style: none;
	list-style-image: none;
	margin: 0px 0px 15px 0px;
}

div.loginInfoBox {
	display: block;
	height: 25px;
	background: #e1e1e1;
	-moz-border-radius-bottomleft:3px;
	-moz-border-radius-bottomright:3px;
	-moz-border-radius-topleft:3px;
	-moz-border-radius-topright:3px;
}

div.loginInfoBox .floatLeft{
	margin: 3px 0px 0px 10px;
	font-size: 90%;
}

div.loginInfoBox .floatRight{
	margin: 3px 10px 0px 0px;
	text-align: right;
	font-size: 90%;
}

div.loginInfoBox .floatRight a {
		color: #177EA4;
		padding: 0px 25px 0px 0px;
		background: url(../img/bg_uitloggen.gif) no-repeat  top right;
		height: 20px;
		display: block;
		
}



div#fileBox a{
	display: block;
	padding: 8px 10px 10px 70px;
	margin: 10px 0px 0px 0px;
	background-color: #e1e1e1;
	background-image:  url(../img/bg_file.gif);
	background-repeat: no-repeat;
	background-position: 8px 8px;
	
	eight: 50px;
	text-decoration: none;
	color: #198fbb;
		-moz-border-radius-bottomleft:3px;
	-moz-border-radius-bottomright:3px;
	-moz-border-radius-topleft:3px;
	-moz-border-radius-topright:3px;
}

div#fileBox a span {
	display: block;
	font-size: 90%;
	line-height: 130%;
	font-weight: normal;
}

div#fileBox a span.title {
	text-decoration: underline;
	margin: 0px 0px 5px 0px;
	font-weight: bold;
}


div#fileBox a.pdf	{	background-image:url(../img/bg_file_pdf.gif); }
div#fileBox a.doc	{	background-image:url(../img/bg_file_doc.gif); }
div#fileBox a.zip	{	background-image:url(../img/bg_file_zip.gif); }
div#fileBox a.xls	{	background-image:url(../img/bg_file_xls.gif); }
div#fileBox a.rar	{	background-image:url(../img/bg_file_rar.gif); }
div#fileBox a.ppt	{	background-image:url(../img/bg_file_ppt.gif); }


/*====================================================================================*/
/*	 NAV						  */
/*====================================================================================*/

/* menu */
ul#mainMenu {
	margin: 0px 8px 30px 8px;
	padding: 0px 0px 0px 0px;
	list-style: none;
	list-style-position: outside;
	cursor: pointer;
}

	ul#mainMenu li
	{
	margin: 0;
	padding: 0 20px 0 20px;
	display: block;
	list-style: none;
	list-style-position: outside;
}

	ul#mainMenu li span
	{
	display: block;
	width: 100%;
	height: 100%;
}

	ul#mainMenu li.level0 {}
	ul#mainMenu li.level0.first {}

	ul#mainMenu li a,
	ul#mainMenu li.level0 /* eerste laag menu categorie-titel */
	{
	display: block;
	line-height: 25px;
	text-decoration: none;
	color: white;
	background: #198fbb url(../img/bg_li_level_0.jpg) repeat-x left bottom;
}

	ul#mainMenu li.level0.item { font-weight: bold; }
	ul#mainMenu li.item_hover { text-decoration: underline; color: white;}/* eerste laag achtergrond instellen indien deze niet in cat zit) */
	
	ul#mainMenu li.level0.item a { padding: 0; }
	ul#mainMenu li.item.selected { border-left: 4px solid white !important;}

	 ul#mainMenu li.level0.cat { font-weight: bold;}  /* eerste laag menu categorie-titel IE + moz */
	

	ul#mainMenu li.level0.cat.hover { text-decoration: underline; color: white; }
	ul#mainMenu li.level0.cat.visible { }

	ul#mainMenu li.level1 { /* eerste laag menu categorie-items  IE + moz*/ 
	 font-weight: normal!important; 
	 padding: 0px 0 0 5px;
	 margin: 0px; 
	 background: none; 
	 border-left: 1px solid white; 
	 }

	ul#mainMenu li.level1 a { 	background: none;	 line-height: 20px !important;}
	
	ul#mainMenu li li.item_hover 	{ text-decoration: underline; color: white; }

	ul#mainMenu li a:hover,
	ul#mainMenu li.cat.hover { text-decoration: underline; color: white; }

	ul#mainMenu li.hover,
	ul#mainMenu li.cat.level0.hover { text-decoration: underline; color: white; }/* hover state all eerste laag IE + Moz */
	
	ul#mainMenu li a:hover,
	ul#mainMenu li.hover	{text-decoration: underline; color: white;  }	/* hover colors all <li> eerste laag IE + Moz */
	

/*	second level cats */
	 ul#mainMenu li ul li.level2, ul#mainMenu li ul li.level1.cat   /* tweede laag menu categorie-titel IE + moz */
	{
	font-weight: bold!important;
	padding: 0 0 0 10px;
	color: ##2e61a7;
	padding-left: 15px;
}

	ul#mainMenu li ul li/* eerste laag menu categorie-items  IE + moz*/
	{
	font-weight: normal;
	padding: 0 10px 0 10px;	
}

/* hover state all tweede laag IE + Moz  */
	ul#mainMenu ul.level1 li.cat_hover 	{ text-decoration: underline; color: white; }

	ul#mainMenu ul.level1 ul.level2 li.item
	{
	font-weight: normal!important;
	border: none;
	background: none;
	padding: 0px;
}

	ul#mainMenu ul
	{
	list-style: none;
	margin: 5px 0 0 0;
	padding: 0 0 5px 0;
}


/*====================================================================================*/
/*	 Footer						  */
/*====================================================================================*/

#footer .inner
{
	width: 940px;
	padding: 10px 0;
	margin: 0 auto;
	text-align: left;
	color: #bdbdbd;
	font-size: 95%;
}

div.column1
{
	float: left;
	width: 250px;
	margin-right: 30px;
}

div.column2
{
	float: left;
	width: 180px;
	margin-right: 30px;
	padding-top: 28px;
}

div.column2 div {padding-left: 30px; margin-bottom: 5px;}
div.column2 div#adress {background: url(../img/bg_adress.png) no-repeat 0% 0% ; ;}
div.column2 div#contact {background: url(../img/bg_direct_contact.png) no-repeat 0% 0% ;}
div.column2 div#web {background: url(../img/bg_web.png) no-repeat 0% 0% ;}

div.column3
{
	padding-top: 28px;
	float: left;
	width: 420px;
}

/* form */
/* Common form styling */
form#contact
{
	display: block;
	float:right;
	clear: right;
	margin:0 0 0px 0px;
	width:420px;
}

form#contact div.section
{
	width:210px;
	margin:0 0 0px 0;
	position:relative;
	float: left;
}

form#contact ul
{
	width:190px;
	margin:0;
	padding:0;
	list-style:none;
	position:relative;
}

form#contact li
{
	padding:0;
	margin:0px 0 10px 0;
	position:relative;
}

form#contact div.contents input.text
{
	
	width:190px;
	padding:1px 2px;
	border:1px solid #5a5a5a;
	background: url(../img/bg_input_foot.gif) no-repeat 0 0;
	color: white;
}

form#contact div.contents textarea
{
	width:190px;
	height: 60px;
	padding:1px 2px;
	border:1px solid #5a5a5a;
	background: url(../img/bg_input_foot.gif) no-repeat 0 0;
	color: white;
}

form#contact div.contents label
{
	font-weight:normal;
	line-height:20px;
	padding:0 0 0 5px;
	position:relative;
	top:-2px;
	
}

form#contact div.contents span.caption
{
	font-style:italic;
	font-size:90%;
}

form#contact div.label label {color: #bdbdbd}

form#contact li.required label
{
	padding-left: 7px;
	background: url(../img/bg_li_required.gif) no-repeat left top;
}