/*@import url('nav.css');*/
/* navigation import -- must come first */


/* CSS main document for JGE */

/*------------------------ start tag redefinition ------------------------*/

body {
	background: Black;
	color: White;
	font-size: 75%; /* sets <p> tags to a 12px default and allows layout in em using the wonderful tool @ http://riddle.pl/emcalc/ */
	font-family: Arial, Verdana, Helvetica, sans-serif;
}

a:link, a:active {
	color: White;
	text-decoration: none;
}

a:visited {
	color: #4C4C4C;
	text-decoration: none;
}

a:hover {
	color: #FD0;
}

a img {
	border: none;
}

em {
	font-style: normal;
	font-weight: bold;
}

h4 {
	font-size: 1.3em;
	color: #FD0;
}

ul li {
	list-style: url(../images/ul-li.png);
	list-style-image: url(../images/ul-li.png);
	color: white;
}



/*------------------------ start layout ------------------------*/

/* navigation */

/* end navigation */

div#container {
	width: 79.17em; /* defaults to 950px */
	margin: 0 auto 0 auto;
}

h1#site-title {
	width: 9.55em;
	height: 5.48em;
	position: relative;
	top: 0em;
	left: 28.5em;
	z-index: 1; /* positions logo above menu bar */
	background: url(../images/h1-site-title.png) top left no-repeat !important;
	background: url(../images/h1-site-title.gif) top left no-repeat;
}

	h1#site-title a {
		display: block;
		width: 9.55em;
		height: 5.1em;
	}
	
	h1#site-title a span {
		display: none;
	}

div#content {
	margin: -10em 0 0 0;
	/*overflow:auto;*/
}

h2#motto {
	margin: 0;
}
	body#home h2#motto {
		background: url(../images/main-background.jpg) top left no-repeat;
		height: 16em;
	}
	
	body#about h2#motto, body#products h2#motto, body#work h2#motto, body#contact h2#motto {
		background: url(../images/main-background-small.jpg) top left no-repeat;
		height: 9.1em;
	}

	h2#motto span {
		display: none;
	}

div#main-content {
	width: 39.58em;
	float: left;
	display:inline;
}

	body#products div#main-content {
		width: 39.5em; /* equalises the width of both columns */
	}
	
	body#products div#supplementary-content {
		width: 39.5em; /* equalises the width of both columns */
	}
	
	body#work div#main-content {
		/* to display four columns of images for the gallery */
		width: 50em;
	}

	body#home div#main-content {
		background: url(../images/background-reflection.jpg) top left no-repeat;
	}
	
	body#about div#main-content, body#products div#main-content, body#work div#main-content, body#contact div#main-content {
		background: url(../images/background-reflection-small.jpg) top left no-repeat;
	}
	
	div#main-content p, div#main-content h4 {
		/*margin: 2em 2em 2em 3.5em;*/
		/*line-height: 1.3em;*/
	}
	
	body#home div#main-content h3 {
		margin: 1.1em 0 0 0;
	}
	
	div#main-content h4#specialists {
		background: url(../images/main-content-h4-slogan.png) top left no-repeat;
		height: 4.58em;
		width: 20.66em;
		float: left;
		margin: 1em 0 0 0;
	}
			div#main-content h4#specialists span {
				display: none;
			}
			
	div#main-content p#members {
		height: 4.58em;
		float: left;
		margin: 1em 0 0 0;
	}

div#supplementary-content {
	float:left;
	display:inline;
}

	body#home div#supplementary-content p.buttonp {
		display: none; /* h3 tags will show this */
	}
	
	div#main-content h3, div#supplementary-content h3 {
		font-family: Arial, Verdana, Helvetica, sans-serif;
		font-weight: lighter;
		color:#FD0;
		text-transform: uppercase;
		font-size: 30px; /* as an alternative to sIFR */
	}
	
	body#home div#supplementary-content h3 {
		width: 15.3em;
		height: 5.8em;
	}
	
	body#home div#supplementary-content h3 a {
		display: block;
		height: 5.6em;
	}
	
	body#home div#supplementary-content h3 a span {
		display: none;
	}
	
	body#products div#supplementary-content{
		background: url(../images/supplementary-content-composite.jpg) right 10em no-repeat;
	}
	
	body#work div#supplementary-content h3 {
		/*height: 3.35em;*/
	}
	
	body#work div#supplementary-content {
			width: 26em;
			margin: 0 0 0 3em;
			
	}
	
	body#products div#supplementary-content {
			padding: 8.3em 0 0 0;
	}

	div#supplementary-content h3#sup-downloadpdf {
		background: url(../images/supplementary-content-h3-01.jpg) top left no-repeat;
	}
	
		div#supplementary-content h3#sup-downloadpdf a:hover, div#supplementary-content h3#sup-downloadpdf a:focus {
        	background: url(../images/supplementary-content-h3-01.jpg) no-repeat 0px -172px;
    	}	
	
	div#supplementary-content h3#sup-ourwork {
		background: url(../images/supplementary-content-h3-02.jpg) top left no-repeat;
	}
	
			div#supplementary-content h3#sup-ourwork a:hover, div#supplementary-content h3#sup-ourwork a:focus {
     		   background: url(../images/supplementary-content-h3-02.jpg) no-repeat 0px -172px;
    		}
	
	div#supplementary-content h3#sup-special {
		background: url(../images/supplementary-content-h3-03.jpg) top left no-repeat;
	}
	
			div#supplementary-content h3#sup-special a:hover, div#supplementary-content h3#sup-special a:focus {
     		   background: url(../images/supplementary-content-h3-03.jpg) no-repeat 0px -172px;
    		}
	
/* explanation div */

div.explanation {
	height: 5em;
	padding: .4em 1em 2em 0;
	margin: 0;
}

div#main-content div.explanation {
	padding-right: 8em;
}


/* footer */

div#footer {
	letter-spacing: -.04em; /*forgive me, father ... this is not very usable */
	font-size: .7em;
}

	body#home div#footer {
		border-top: #4C4C4C 1px solid;
	}

#footer h4 {
	display: none;
}


#footer ul#supplier-list {
	background: url(../images/footer-suppliers.png) top right no-repeat;
	height: 5em;
	padding: 0 0 1em 0;
	border-bottom: 1px solid #4C4C4C;
	margin-bottom: 0;

}

#footer ul#supplier-list li {
	float: left;
	height: 5em;
	list-style: none;
}
 	#footer ul#supplier-list li#sup00 {
		width: 102px;
	}
 	#footer ul#supplier-list li#sup01 {
 		width: 132px;
	}
	#footer ul#supplier-list li#sup02 {
 		width: 93px;
	}
	#footer ul#supplier-list li#sup03 {
 		width: 88px;
	}
	#footer ul#supplier-list li#sup04 {
 		width: 108px;
	}
	#footer ul#supplier-list li#sup05 {
 		width: 142px;
	}
	#footer ul#supplier-list li#sup06 {
 		width: 103px;
	}
	#footer ul#supplier-list li#sup07 {
 		width: 70px;
	}
	#footer ul#supplier-list li#sup08 {
 		width: 73px;
	}
	
#footer ul#supplier-list li a {
	display: block;
	height: 5em;
	color: #000;
	cursor: hand;
}

#footer ul#supplier-list li a:hover {
	cursor: hand !important;
}




div#footer ul#lower-nav {
	height: 2em;
	width: 280px;
	padding: .4em 0 0 1em;
	margin: 0;
	float: left;
}


div#footer ul#lower-nav li {
	background: url(../images/footer-ul-li-separator.png) bottom right no-repeat;
	margin: 0 0 0 .4em;
	padding: 0 .7em 0 0;
	display: inline;
	float: left;
	color: #FD0;
	list-style: none;
}


div#footer ul#lower-nav li:last-child {
	background: none;
}


div#footer a:link, div#footer a:active {
	text-decoration: none;
	color: #4C4C4C;
}

div#footer a:hover {
	color: #FC0;
}

div#footer p#copyright {
	background: url(../images/koodoz-logo.png) top right no-repeat;
	width: 650px;
	height: 2em;
	float: right;
	margin: 0;
	padding: .4em 0 0 0;
	text-align: right;
	color: #4C4C4C;
	overflow: hidden;
}

div#footer p#copyright span {
	padding: 0 2.5em 0 0;
}

div#footer p#copyright span a img {
	margin: 0 0 0 1.2em;
}

div#footer p#copyright span a, div#footer p#copyright span a:active, div#footer p#copyright span a:visited {
	text-decoration: none;
}
div#footer p#copyright span a#kood:hover {
	color: #D50A27;
}



/* photo gallery */

body#work div#main-content p#gallery, body#work div#supplementary-content {
	margin: 0;
	padding: 0;
}

body#work div#supplementary-content p.beforeafter {
	border-bottom: 1px #999 dotted;
	padding: 0 0 1em 0;
	margin: 0 0 1em 0;
	overflow: auto;
}

body#work div#main-content p#gallery a {
	display: block;
	float: left;
	margin: .5em;
}

body#work div#supplementary-content p.beforeafter a {
	float: left;
	margin: .5em 0 .5em 1.5em;
}

body#work div#supplementary-content p.beforeafter span {
	display: block;
	clear: both;
}

body#work div#main-content p#gallery a img, body#work div#supplementary-content p.beforeafter a img {
	border: 5px solid #222;
}

body#work div#main-content p#pages {
	clear: both;
	text-align: right;
	padding: 1.5em 2em 0 0;
}

body#work div#main-content p#pages a {
	margin: 0 1em 0 0;
}

body#work div#main-content p#pages a:visited { /* no use marking visited link pages */
	color: #FFF;
}

/* end layout */

/*------------------------ contact form stuff ------------------------*/

body#contact div#main-content dl {
	padding: 1.5em;
	border: 1px dotted #222;
}

body#contact div#main-content dd {
	position: relative;
	top: -1.2em;
	left: 12em;
	width: 12em;
}

body#contact div#main-content dd img {
	position: relative;
	top: -1.3em;
	left: 6em;
}

body#contact div#main-content dt {
	color: #FD0;
	font-weigth: bolder;

}

body#contact div#main-content form fieldset {
	padding: 0 1.2em;
	border: 1px dotted #222;
}

body#contact div#main-content form legend {
	font-size: 1em;
	padding: 0 .5em;
	color: #FFF;
}

body#contact div#main-content form label {
	color: #FD0;
	display: block;
}

body#contact div#main-content form input {
	color: #FFF;
	background: #222;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.5em;
	font-weight: normal;
	width: 20em;
	height: 1.7em;
	border: none;
}

body#contact div#main-content form textarea {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.5em;
	font-weight: normal;
	color: #FFF;
	background: #222;
	width: 20em;
	height: 8em;
	border: none;
}

body#contact div#main-content form input#submit {
	color: #000;
	background: #FD0;
	width: 10em;
	height: 3em;
	margin: 0 0 0 20em;
	border-right: 2px solid #F2CA02;
	border-bottom: 2px solid #F2CA02;
	border-top: 2px solid #FF0;
	border-left: 2px solid #FF0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight: bold;
}

/* error handling */

body#contact div#main-content p.error {
	border: 1px dotted red;
	padding: 1em;
	background: #F00;
	color: #FFF;
	font-weight: bold;
	width: 27em;
}

body#contact div#main-content p.formerror input {

}

body#contact div#main-content p.formerror span {
	display: block;
	color: #F00;
	font-size: .7em;
}

/* the google map! */

div#supplementary-content div#map { 
	width: 32.5em;
	height: 63.8em;
	margin: 5.3em 0 0 3em;
    border: solid #222 5px;
}


/*--------------------- minor style adjustments ---------------------*/


div#content ul {
	margin: 0 0 3.5em 0;
}

div#main-content p {
	padding-right: 4em;
}

div#supplementary-content ul li {
	width: 30em;
}

p#skip-content {
	display:none;
}

.defloat {
	display: block;
	clear: both;
}

div#main-content h3, div#supplementary-content h3 {
	margin: .3em 0 .3em 0; /* fix weirdness and inconsistency in the way H3s take margins */
}