/*
----------------------------------------
 THIRTEEN website / MAIN styles
 Developed by Ollie Bettany / Thirteen
 Created: 21/11/08
 Updated: 24/11/08
----------------------------------------
*/

/*---------------------
 GENERAL
---------------------*/

	* {
		margin: 0;
		padding: 0;
	}
	
	a:active, 
	a:focus {
  		outline: none;
	}
	
	body {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 0.75em;
		text-align: left;
		color: #231f20;
	}
	
	img {
		border: 0;
	}
	
	div.hidden {
		position: absolute;
		left: -10000em;
	}
/*---------------------
 INDEX PAGE/LEFT NAV
---------------------*/

	body.nav {
		margin: 35px 0 35px 35px;
	}
	
	body.preview {
		margin-top: 0;
		padding-top: 85px;
		background: url(/_images/admin/preview.gif) repeat-x left top;
	}
		
		body div#wrapper {
			width: 965px;
		}
		
		body div#nav-frame {
			float: left;
			border: 0;
			width: 310px;
		}
		
			body div#nav-frame ul.main-nav {
				display: block;
			}


/* CONTENT IFRAME */

		body div#content-frame {
			float: left;
			width: 655px;
			border: 0;
			display: none;
		}
		
			body div#content-frame iframe#iframe1 {
				width: 655px;
			}
			
			body div#content-frame iframe.high-res {
				min-height: 686px;
			}
			
			body div#content-frame iframe.low-res {
				min-height: 648px;
			}
			
/* CONTENT DIV */

		body div#content-div {
			float: left;
			margin: 0 0 35px 20px;
			display: none;
		}
		
			body div#content-div img {
				width: 635px;
				min-height: 588px;
			}
		

/* MAIN TITLE */	
		
			body.nav #content h1,
			body.nav #content h1 a,
			body.nav #content h1 a span {
				width: 101px;
				height: 20px;
			}
			
			body.nav #content h1 {
				margin: 0 0 95px 0;
			}
			
				body.nav #content h1 a {
					display: block;
					overflow: hidden;
					position: relative;
				}
				
					body.nav #content h1 a span {
						position: absolute;
						background: url(/_images/common/mainlogo.gif) no-repeat left top;
						cursor: pointer;
					}

/* CONTENT DIVS */

				body.nav #content div#welcome-content {
					position: absolute;
					top: 361px;
					width: 180px;
				}

				body.nav #content div#about-content,
				body.nav #content div#contact-content {
					margin: 15px 0 0 0;
				}
				
				body.nav #content div#about-content {
					border-top: 1px dashed #6d6e71;
					border-bottom: 1px dashed #6d6e71;
					padding: 15px 0 0 0;
					margin-bottom: 15px;
				}
				
				body.nav #content div#contact-content {
					border-top: 1px dashed #6d6e71;
					padding: 15px 0 0 0;
				}


/* GENERIC CONTENT CLASSES */
				
			body.nav #content h2 {
				font-size: 1em;
			}
					
			body.nav #content p {
				margin: 0 0 15px 0;
			}
					
				
			body.nav #content ul {
				width: 220px;
				border-top: 1px dashed #6d6e71;
				border-bottom: 1px dashed #6d6e71;
				padding: 15px 0 9px 0;
			}
			
			body.nav #content ul.no-borders {
				border-top: 1px solid #fff;
				border-bottom: 1px solid #fff;
			}
			
			body.nav #content ul.border-top {
				border-bottom: 1px solid #fff;
			}
			
			body.nav #content ul.border-bottom {
				border-top: 1px solid #fff;
				padding-bottom: 0;
			}
			
				body.nav #content ul li {
					list-style: none;
					margin: 0 0 9px 0;
				}	
				
					body.nav #content ul li h2,
					body.nav #content ul li h2 a,
					body.nav #content ul li h2 a span {
						height: 20px;
					}	
					
						body.nav #content ul li h2 a {
							display: block;
							overflow: hidden;
							position: relative;
							text-decoration: none;
						}
						
							body.nav #content ul li h2 a span {
								position: absolute;
								cursor: pointer;
							}


					body.nav #content div.content h2 {
						height: auto;
						width: auto;
					}
					
					body.nav #content div.content a {
						color: #231F20;
					}
					
					body.nav #content div.content a:hover {
						text-decoration: none;
					}
					
/* MAIN NAV ITEMS */

						body.nav #content ul li#about h2 a,
						body.nav #content ul li#work h2 a, 
						body.nav #content ul li#contact h2 a {
							color: #9d9fa2;
							font-size: 1.6em;
							font-weight: bolder;
						}
/* about list item */
				
						body.nav #content ul li#about h2,
						body.nav #content ul li#about h2 a,
						body.nav #content ul li#about h2 a span {
							width: 74px;
						}	
						
							body.nav #content ul li#about h2 a span {
								background: transparent url(/_images/common/nav_about_alt.gif) no-repeat left top;
							}
							
							body.nav #content ul li#about h2 a:hover span,
							body.nav #content ul li#about h2 a.current span {
								background-position: left -20px;
							}	
							
						body.nav #content ul li#about div#about-content {
							display: none;
						}


/* work list item */
					
						body.nav #content ul li#work h2,
						body.nav #content ul li#work h2 a,
						body.nav #content ul li#work h2 a span {
							width: 64px;
						}
						
							body.nav #content ul li#work h2 a span {
								background: transparent url(/_images/common/nav_work_alt.gif) no-repeat left top;
							}
							
							body.nav #content ul li#work h2 a:hover span,
							body.nav #content ul li#work h2 a.current span {
								background-position: left -20px;
							}


/* contact list item */
						
						body.nav #content ul li#contact {
							margin-left: 1px;
						}
						
						body.nav #content ul li#contact h2,
						body.nav #content ul li#contact h2 a,
						body.nav #content ul li#contact h2 a span {
							width: 97px;
						}
						
								/* override */
								body.nav #content ul li#contact div.content h2 {
									width: auto;
								}
						
							body.nav #content ul li#contact h2 a span {
								background: transparent url(/_images/common/nav_contact_alt.gif) no-repeat left top;
							}
							
							body.nav #content ul li#contact h2 a:hover span,
							body.nav #content ul li#contact h2 a.current span {
								background-position: left -20px;
							}
						
						body.nav #content ul li#contact div#contact-content {
							display: none;
						}
						
						
/* WORK SUB LIST */						
				
					body.nav #content ul li ul {
						border-top: 1px dashed #6d6e71;
						border-bottom: 1px dashed #6d6e71;
						margin: 15px 0 15px 1px;
						padding: 15px 0 12px 0;
						display: none;
					}
					
						body.nav #content ul li ul li {
							margin: 0 0 3px 0;
							list-style: none;
						}
						
							body.nav #content ul li ul li h3 {
								font-weight: normal;
								font-size: 1em;
							}
						
								body.nav #content ul li ul li a {
									color: #6d6e71;
									text-decoration: none;
								}
								
								body.nav #content ul li ul li a:hover {
									color: #231f20;
								}
								
								body.nav #content ul li ul li.current h3 a {
									color: #231f20;
									font-weight: bolder;
									cursor: default;
								}
							
							body.nav #content ul li ul li ul {
								border: none;
								margin: 3px 0 0 10px;
								padding: 0;
							}
								
							body.nav #content ul li ul li.current ul {
								display: block;
							}
							
								body.nav #content ul li ul li ul li h4 {
									font-weight: normal;
									font-size: 1em;
								}
								
									body.nav #content ul li ul li.current ul li.current h4 a {
										color: #231f20;
										font-weight: bolder;
										cursor: default;
									}
							
							
/*---------------							
 CONTENT IFRAME
---------------*/							
							
	body.content {
		margin: 0;
	}	
	
		body.content div.content {
			float: left;
		}	
		
		body.content div#feature,
		body.content div#portfolio {
			display: none;
		}						

/* TITLE BLOCK */
					
			body.content div.wrapper div#titleblock {
				margin: 0 0 0 20px;
			}
			
				body.content div.wrapper div#titleblock h2 {
					font-size: 1em;
					color: #231f20;
					line-height: 1.4em;
					float: left;
				}					
								

/* IMAGE BLOCK */
								
			body.content div.wrapper div.imageblock,
			body.content div.wrapper div.flashblock {
				background-repeat: no-repeat;
				background-position: left 94px;
				display: none;
				float: left;
				clear: left;
			}
			
			body.content div.wrapper div#feature-img {
				display: block;
			}
			
			/*
			body.content div#content div.flashblock {
				margin: 0 0 21px 19px;
			}
			*/
			
				body.content div.wrapper div.imageblock h3,
				body.content div.wrapper div.flashblock h3 {
					font-size: 1em;
					font-weight: normal;
					color: #6d6e71;
					line-height: 1.4em;
					width: 280px;
					float: left;
					clear: left;
					margin: 0 0 0 20px;
					min-height: 94px;
				}
				
				body.content div.wrapper div.imageblock h3 span,
				body.content div.wrapper div.flashblock h3 span {
					float: left;
					clear: both;
					width: 280px;
				}
				
					body.content div.wrapper div.imageblock h3 a.portlink,
					body.content div.wrapper div.flashblock h3 a.portlink {
						float: left;
						clear: left;
						margin: 8px 0 0 0;
						color: #6D6E71;
						text-decoration: none;
					}
					
					body.content div.wrapper div.imageblock h3 a.portlink:hover,
					body.content div.wrapper div.flashblock h3 a.portlink:hover {
						text-decoration: underline;
					}
			
				body.content div.wrapper div.imageblock img {
					width: 655px;
					height: 499px;
					float: left;
					border: 0;
				}


/* NAV BLOCK */		
		
	body.content div.wrapper div.navblock {
		display: none;
	}
	
	body.content div.wrapper div#navblock1 {
		margin: 23px 0 0 20px;
		float: left;
	}
			
	body.content div.wrapper div#navblock2 {
		margin: 4px 20px 0 20px;
		float: right;
	}


/* Select nav */
						
		body.content div.wrapper div.navblock ul {
			float: left;
		}
		
			body.content div.wrapper div.navblock ul li,
			body.content div.wrapper div.navblock ul li a {
				width: 9px;
				height: 9px;
				background: #fff;
			}
			
			body.content div.wrapper div.navblock ul li {
				float: left;
				margin: 0 0 0 7px;
				list-style: none;
			}
			
				body.content div.wrapper div.navblock ul li a {
					display: block;
					overflow: hidden;
					position: relative;
					text-decoration: none;
					color: #fff;
				}
		
					body.content div.wrapper div.navblock ul li a span {
						background-color: #9e9ea0;
						position: absolute;
						display: block;
						cursor: pointer;
						width: 9px;
						height: 1px;
						margin: 8px 0 0 0;
					}
					
					body.content div.wrapper div.navblock ul li a:hover span {
						background-color: #000;
						height: 2px;
						margin: 7px 0 0 0;
					}
					
					body.content div.wrapper div.navblock ul li.current a span,
					body.content div.wrapper div.navblock ul li.current a:hover span {
						background-color: #000;
						cursor: default;
						height: 2px;
						margin: 0 0 7px 0;
					}
				
				
/* Prev/Next Nav */												
					
					body.content div.wrapper div.navblock ul.prevnext {
						margin: 0; 
					}
					
						body.content div.wrapper div.navblock ul.prevnext li {
							margin: 0 10px 0 0;
						}
					
						body.content div.wrapper div.navblock ul.prevnext li,
						body.content div.wrapper div.navblock ul.prevnext li a,
						body.content div.wrapper div.navblock ul.prevnext li a span {
							width: 6px;
							height: 9px;
						}
						
						body.content div.wrapper div.navblock ul.prevnext li a span {
							margin: 0;
						}
					
					body.content div.wrapper div.navblock ul.prevnext li.prev a span {
						background: transparent url(/_images/common/portnav4_back.gif) no-repeat -6px 0px;
					}
					
					body.content div.wrapper div.navblock ul.prevnext li.prev a:hover span {
						background-position: 0px 0px;
						margin: 0;
					}
					
					body.content div.wrapper div.navblock ul.prevnext li.prev a.inactive span,
					body.content div.wrapper div.navblock ul.prevnext li.prev a.inactive:hover span {
						background-position: -12px 0px;
						margin: 0;
					}
					
					body.content div.wrapper div.navblock ul.prevnext li.next a span {
						background: transparent url(/_images/common/portnav4_fwd.gif) no-repeat -6px 0px;
						margin: 0;
					}
					
					body.content div.wrapper div.navblock ul.prevnext li.next a:hover span {
						background-position: 0px 0px;
						margin: 0;
					}
					
					body.content div.wrapper div.navblock ul.prevnext li.next a.inactive span,
					body.content div.wrapper div.navblock ul.prevnext li.next a.inactive:hover span {
						background-position: -12px 0px;
						margin: 0;
					}
					
					body.content div.wrapper div.navblock ul.prevnext li a.inactive span {
						cursor: default;
					}