@charset "utf-8";
/* CSS Document */

body {
	margin: 0;
	padding: 0;
	background:#3b4b86;
}
body.index {
	background: #3b4b86 url(images/body-bkgrnd-1.jpg)no-repeat;
	background-position:top center;
}

body.about {
	background: #3b4b86 url(images/body-bkgrnd-9.jpg)no-repeat;
	background-position:top center;
}

body.projects {
	background: #3b4b86 url(images/body-bkgrnd-0.jpg)no-repeat ;
	background-position:top center;
}

body.clients {
	background: #3b4b86 url(images/body-bkgrnd-11.jpg)no-repeat;
	background-position:top center;
}

body.exhibition {
	background: #3b4b86 url(images/body-bkgrnd-7.jpg)no-repeat;
	background-position:top center;
}

body.contact {
	background: #3b4b86 url(images/body-bkgrnd-map.jpg)no-repeat;
	background-position:top center;
}

/*-----------------------a life in art & design----------------------------*/

#galleryHeader {
		float: left;
		width:940px;
		height:80px;
		font-family: Tahoma, verdana, Arial, Helvetica, sans-serif;
		font-size: 16px;
		color: #ffffff;
		text-align:left;
		border-bottom: 1px dotted #ffffff;
		margin: 0 0 20px 0;
		padding: 0;
		background:url(images/gallery-title.gif) no-repeat;
	}
	
	#galleryHeader.gallery2 {
		float: left;
		width:940px;
		height:80px;
		font-family: Tahoma, verdana, Arial, Helvetica, sans-serif;
		font-size: 16px;
		color: #ffffff;
		text-align:left;
		border-bottom: 1px dotted #ffffff;
		margin: 0 0 20px 0;
		padding: 0;
		background:url(images/gallery-title2.gif) no-repeat;
	}
	
	#galleryHeader #aliadTitle {
		position: relative;
		width: 535px;
		height: 80px;
		float: right;
		margin:0;
		background:url(images/aliad-title-left.gif) no-repeat;
	}

	#backBtn {
		position:relative;
		top: left;
	}
	
	#backBtn a {
		display: block;
		width:;
		height:;
		background:url(images/.jpg) no-repeat;
	}
	
	#backBtn a:hover {
		background:url(images/.jpg) no-repeat;
	}
	
	#galleryText {
		float: left;
		width:200px;
		height:auto;
		font-family: Tahoma, verdana, Arial, Helvetica, sans-serif;
		font-size: 11px;
		color: #ffffff;
		text-align:justify;
		margin: 0 30px 8px 0;	
	}
	
	ul.gallery {
		float: left;
		width:700px;
		margin: 10px 0 0 12px;
		padding: 0;
	 	height:auto;
	}
	
	ul.gallery li {
		list-style:none;
		width:112px;
		height:86px;
		margin: 0;
		padding: 0;
		float: left;
	}
	
	ul.gallery li a {
		display: block;
		width:112px;
		height:86px;
		padding: 0;
		margin: 0;
	}
	
	ul.gallery li a img {
		margin: 0;
		outline: none;	 
	}
	
	ul.gallery li a:hover {
		background:url(images/th-hover.gif);
	}
	
	#contentSeparator {
		float: left;
		width: 940px;
		height: 1px;
		border-bottom: 1px dotted #ffffff;
		margin: 10px 0 0 0;
	}
	
	#prevBtn {
		float: left;
		width:56px;
		height:26px;
		margin-top: 16px;
	}
	
	#prevBtn a {
		display: block;
		width:56px;
		height:26px;
		background:url(images/prev-btn.gif) no-repeat;
	}
	
	#prevBtn a:hover {
		background:url(images/prev-btn-active.gif) no-repeat;
	}
	
/*-----------------------------------hacks-------------------------------------*/

a:active {
	outline: none;
	border-style: none;
	}
	
:-moz-any-link:focus {
 		outline: none;
}

#container {
	width:1024px;
	height:768px;
	margin:0 auto;
}
#header {
	width:1024px;
	height:160px;
	padding: 0px;
	margin: 0px;
}
#header .logo {
	position: relative;
	top: 0px;
	left:0px;
	width:300px;
	height:80px;
	margin: 15px 0px 5px 16px;
	padding: 0px;
	float: left;
	background:url(images/jwdlogo.png)no-repeat;
}

#header .logo a {
	display: block;
	top: 0px;
	left:0px;
	width:300px;
	height:80px;
	margin: 0px;
}
#header .details {
	position: relative;
	top: 0px;
	right:0px;
	width:300px;
	height:80px;
	margin: 15px 16px 5px 0px;
	padding: 0px;
	float: right;
}

#header .details a{
	display:block;
	position: relative;
	top: 0px;
	right:0px;
	width:300px;
	height:80px;
	background:url(images/email.png)no-repeat;
}

#header .details a:hover{
	background:url(images/emailactive.png)no-repeat;
}
/*----------------------lava lamp style navigation styles--------------------------*/

#header .navigationWrapper {
	background:url(images/navigation.png) 0 0 no-repeat;
	position: relative;
	top: 0px;
	right:0px;
	width:990px;
	height:40px;
	margin: 26px 16px 0 0px;
	padding: 0px;
	float: right;
	overflow:hidden;
}

a {
	font-family:Dosis-Book; /* no .ttf */
	font-size:22px;line-height:28px;
	text-decoration:none;
	color: #fff;
}
:-moz-any-link:focus {
 outline: none;
}

/*----------------------------------------------------------------*/
	
#header .navigation {
	position: relative;
	top: 0px;
	right:0px;
	width:990px;
	height:40px;
	margin: 20px 16px 0 0px;
	padding: 0px;
	float: right;
	overflow:hidden;
	border-top-left-radius:6px;
	border-top-right-radius:6px;
}
#header .navigation ul {
	float: left;
	width: 992px;
	height: 40px;
	margin: 0px;
	padding: 0px;
	background: none;
	float: left;
	}
	
#header .navigation li {
	float: left;
	width: 198px;
	height: 40px;
	margin: 0px 0 0;
	background: none;
	list-style:none;
}
#header .navigation a * {
	width: 198px;
	height: 40px;
	display: none;
}
#header .navigation a, #navigation a .hover {
	width: 198px;
	height: 40px;
	position: relative;
	display: block;
	background: url(images/nav.png) 0 0 no-repeat;
	color: #FFFFFF;
}

#header .navigation a.btn1 {
	background-position: 0 0;
	width: 198px;
}
#header .navigation .highlight a.btn1:hover, #navigation a.btn1 .hover {
	background-position: 0 -40px;
	width: 198px;
}
/*btn2*/
		#header .navigation a.btn2 {
	background-position: -198px 0;
	width: 198px;
}
#header .navigation .highlight a.btn2:hover, #navigation a.btn2 .hover {
	background-position: -198px -40px;
	width: 198px;
}
/*btn3*/
		#header .navigation a.btn3 {
	background-position: -396px 0;
	width: 198px;
}
#header .navigation .highlight a.btn3:hover, #navigation a.btn3 .hover {
	background-position: -396px -40px;
	width: 198px;
}
/*btn4*/
#header .navigation a.btn4 {
	background-position: -594px 0;
	width: 198px;
}
#header .navigation .highlight a.btn4:hover, #navigation a.btn4 .hover {
	background-position: -594px -40px;
	width: 198px;
}
/*btn5*/
#header .navigation a.btn5 {
	background-position: -792px 0;
	width: 198px;
}
#header .navigation .highlight a.btn5:hover, #navigation a.btn5 .hover {
	background-position: -792px -40px;
	width: 198px;
}

/*---------------------------------------------------------------------*/

#pagecontent {
	width:992px;
	height:578px;
	margin: 0px 0px 0px 16px;
	padding: 0px;
	color: #fff;
	overflow:hidden;
	border-bottom: 1px solid #81c8ff;
}

#pagecontent.home {
	background:url(images/intro.png)no-repeat;
}

#pagecontent.exhibition {
	background:url(images/exhbn.png)no-repeat bottom right;
}

#pagecontent.contact img {
	position:relative;
	top: 42px;
	left: 20px;
	margin-right: 20px;
}

table#diagram {
		margin-top: 58px;
		margin-left: 20px;
	}
	
/*--------------------design process diagram---------------------*/	

ul.diagram   {
	 float: left;
	 width: 560px;
	 height: 464px;
	 margin: 30px 0 0 0;
	 background:url(images/designprocess.png)no-repeat;
	 background-position:52px 86px;
	 }
ul.diagram li {
	width: 560px;
	list-style:none;
	}	
ul.diagram li.top{
	 width: 560px;
	 height: 76px;
	 background:url(images/diagramJWD_01.png)no-repeat;
	 background-position:0px;
	 }	
ul.diagram li.second{
	 width: 560px;
	 height: 82px;
	 background:url(images/diagramJWD_04.png)no-repeat;
	 background-position: 96px 0px
	 }
ul.diagram li.third{
	 width: 560px;
	 height: 74px;
	 background:url(images/diagramJWD_06.png)no-repeat;
	 background-position: 96px 0px
	 }
ul.diagram li.fourth{
	 width: 560px;
	 height: 75px;
	 background:url(images/diagramJWD_08.png)no-repeat;
	 background-position: 96px 0px
	 }	 	 
ul.diagram li.fifth{
	 width: 560px;
	 height: 75px;
	 background:url(images/diagramJWD_10.png)no-repeat;
	 background-position: 96px 0px
	 }		 
ul.diagram li.sixth{
	 width: 560px;
	 height: 81px;
	 background:url(images/diagramJWD_12.png)no-repeat;
	 background-position: 96px 0px
	 }
 /*-------------------------------------------------------------*/
	
 #leftcol {
	 position: relative;
	 top:0px;
	 left:0px;
	 width:350px;
	 height:578px;
	 margin: 0px;
	 padding:0px;
	 float: left;
	 overflow: hidden;
	 }
	
ul.gallery1 {
	 position: relative;
	 top:0px;
	 left:0px;
	 width:354px;
	 height:236px;
	 padding:0px;
	 float: left;
	 clear: left;
	 margin: 0px;
	 }
	 
ul.gallery1 li {
	 	width:110px;
		height:110px;
		float: left;
		list-style:none;
		margin: 8px 8px 0px 0px;
		background:url(images/box.png) no-repeat;
	 }
	 
ul.gallery1 li a{
	 	display: block;
		width:110px;
		height:110px;
			 }
			 	
ul.gallery1 li a img{
	 	margin: 5px;
		border-style: none;
	 }
	
ul.gallery1 li a:hover{
	 	background:url(images/box2.png) no-repeat;
	 }

 ul.gallery {
	 position: relative;
	 top:0px;
	 left:0px;
	 width:600px;
	 height:578px;
	 margin: 8px 0px 0px 4px;
	 padding:0px;
	 float: left;
	 }
	 
 ul.gallery li {
	 	width:110px;
		height:110px;
		float: left;
		list-style:none;
		margin: 2px 2px 0px 0px;
		background:url(images/box.png) no-repeat;
	 }
	 	 
ul.gallery li a{
	 	display: block;
		width:110px;
		height:110px;
	 }
			 	
ul.gallery li a img{
	 	margin: 5px;
	 }	
	 
ul.gallery li a img{
	 	border-style: none;
	 } 
	 
ul.gallery li a:hover{
	 	background:url(images/box2.png) no-repeat;
	 }	 
	 
#textCol {
	position: relative;
	width:310px;
	height:578px;
	float: left;
	padding: 20px 0px 0px 0px;
	margin:0px ;
	overflow:hidden;
	margin-right:0px;
}

#textCol2 {
	width:346px;
	height: 244px;
	float: left;
	margin: 0px;
	padding: 20px 0px 0px 0px;
	}

#textCol ul.clients {
	margin-top: 20px ;
}

#textCol ul.clients li.Dosis{
	font-family:Dosis-Book; /* no .ttf */
	font-size:16px;
	line-height: 16px;
	margin-bottom: 10px;
}

@font-face {
	font-family: Dosis-Book;
	src: url('fonts/Dosis-Book.ttf');
}
@font-face {
	font-family: Dosis-Light;
	src: url('fonts/Dosis-Light.ttf');
}
h1.Dosis {
	margin: 8px 0px 0px 0px;
	font-family:Dosis-Light; /* no .ttf */
	font-size:30px;
	line-height: 30px;
}
h2.Dosis {
	font-family:Dosis-Light; /* no .ttf */
	font-size:22px;
}
p.Dosis {
	font-family:Dosis-Book; /* no .ttf */
	font-size:16px;
}

p.Dosis a {
	font-family:Dosis; /* no .ttf */
	font-size:16px;
	color: #fff;
	text-decoration: none;
}

p.Dosis a:hover {
	font-family:Dosis; /* no .ttf */
	font-size:16px;
	border-bottom: 1px dotted #fff;
}

h2.Dosis a {
	font-family:Dosis-Light; /* no .ttf */
	font-size:22px;
	color: #fff;
	text-decoration: none;
}

h2.Dosis a:hover {
	font-family:Dosis-Light; /* no .ttf */
	font-size:22px;
	border-bottom: 1px dotted #fff;
}

#linkGMaps {
		float: left;
		width:252px;
		height:60px;
		margin: 20px 0 20px 0; 
	 }

 #linkGMaps a {
		display: block;
		width:252px;
		height:60px; 
		background:url(images/linkGMaps.png)no-repeat;
	 }
	 
 #linkGMaps a:hover {
		width:252px;
		height:60px; 
		background:url(images/linkGMaps-a.png)no-repeat;
	 }	 
	 
#footer {
	position:relative;
	bottom: 0px;
	left: 0px;
	width:992px;
	height:30px;
	margin: 0px 0px 0px 0px;
	padding: 0px;
}

#footer p.footer {
	
	margin: 0px ;
	padding: 6px 0px 0px 16px;
	font-family:Verdana, Arial, Geneva, sans-serif;
	font-size: 10px;
	color: #9fd5ff;
	line-height:10px;
}

#footer p.footer {
	font-size: 10px;
	color: #9fd5ff;
}

#footer p.footer a{
	
	margin: 0px 0px 0px 0px;
	padding: 0px;
	font-size: 10px;
	text-decoration:none;
	color: #9fd5ff;
}

#footer p.footer a:hover{
	color: #fff;
}

#aliadLink {
		position: relative;
		width:296px;
		height:148px;
		float: left;
		margin: 134px 0 0 18px;
			}
	
#aliadLink a {
		display: block;
		width:296px;
		height:148px;
		background:url(images/aliad-link.png)no-repeat;
		border-radius: 6px;
	}

#aliadLink a:hover {
		background:url(images/aliad-link-a.png)no-repeat;
	}