/* styles for huwrowlands.id.au May 2010 version 1*/

/*****   RESET STYLES  *****/
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h3, h5, h6, pre, form, label, fieldset, input, 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 }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h3, h5, h6 { font-size:100%; font-weight:normal }
q:before, q:after { content:''}
/* Global reset-RESET */
/* The below restores some sensible defaults */
strong { font-weight:bold }
em { font-style:italic }
a img { border:none } /* Gets rid of IE's blue borders */
/*****************************************************/

body {
	background: url(../img/bg.gif) repeat #e5e3dd;
	margin:0;
	padding:0;
	font-family:Verdana, Geneva, Tahoma, sans-serif;
	color:#373636;
}

a:link, a:visited, a:active{
	color:#373636;
	text-decoration:none;
}

a:hover, a:focus {
	color:#a28d6a;
	text-decoration:none;
	
}		

h2 {
	font-size:30px;
	font-style:italic;
	text-shadow:1px 1px 1px #fff;
	padding:10px;
	margin-top:20px;
}

h3 {
	font-weight:bold;
	display:block;
	height:30px;
}

h4 {
	padding:0 0 10px 0;
	color:#373636;
	text-shadow:1px 1px 1px #fff;
}

p {
	font-size:16px;
	margin-left:25px;
	line-height:24px;
}

.clear {
		clear:both;
	}

hr {
	background:url(../img/hr.gif) no-repeat #f6f2eb;
	height:2px;
	width:100%;
	border:none;
	margin-top:20px;
	margin-bottom:20px;
}

/***  DIV's  ***/

#wrapper {
	width:900px;
	margin:0 auto;
	position:relative;
	top:0px;
	left:0;
}

#header {
	height:320px;
	background:url(../img/uk-header-bg.gif) 90% 80% no-repeat;
}

	#header h2 {
		margin:0;
		padding:0;
	}

#logo {
	position:relative;
	top:82px;
	left:180px;
	height:92px;
	width:415px;
	text-indent:-9999px;
}

#logo a {
	background:url(../img/logo.gif) no-repeat;
	height:92px;
	width:415px;
	position:absolute;
	top:0;
	left:0;
}

#nav {
	position:absolute;
	top:0;
	right:0;
	width:462px;
	height:54px;
	z-index:100;
}

#inner-nav {
	background:url(../img/menu-bg.png) no-repeat;
	position:fixed;
	width:462px;
	height:54px;
	top:0;
	margin-right:262px;
}

	#nav ul {
		margin:8px 15px;
		padding:0;
		font-size:18px;
		text-shadow:1px 1px 1px #fff;
	}
	
	#nav ul li {
		float:left;
		padding:2px 15px;
	}
	
	#nav ul li a {
		display:block;
		padding:0px 0px;
	}
	
	#nav ul li a:hover {
		border-bottom:1px dashed #a28d6a;
	}
	
	.blog {
		text-indent:5px;
	}

#header-icons {
	width:400px;
	position:absolute;
	top:180px;
	left:180px;
}

#header-icons ul{
	text-indent:50px;
	margin:8px 0 0 0;
	padding:0 6px;
}

#header-icons li {
	padding:6px 0 0 0;
}

#header-icons a:hover {
	border-bottom:1px dashed #a28d6a;
}

.email {
	background:url(../img/email-icon.gif) no-repeat;
	height:32px;
	display:block;
}

.skype {
	background:url(../img/skype-icon.gif) no-repeat;
	height:32px;
	display:block;
}

.cv {
	background:url(../img/cv-icon.gif) no-repeat;
	height:32px;
	display:block;
}

/** About Section**/

#about {
	
}

#about li {
	margin-left:25px;
	background:url(../img/star-bullet.gif) no-repeat;
	text-indent:25px;
	margin:2px 0px 0 26px;
}

.first-list {
	float:left;
	width:300px;
	margin:0 0 20px 0;
}

.second-list {
	float:left;
	width:300px;
	margin:0 0 20px 0;
}

#about h2 {
	clear:both;
}

/** Portfolio  **/

#portfolio {
	
}

	.folio-box {
		width:215px;
		height:400px;
		float:left;
		padding:0 0 0 10px;
		margin-top:20px;
	}	
	
	.folio-frame {
		width:178px;
		height:178px;
		background:#fff;
		border:1px solid #b8b9ba;
		margin:20px 0;
	}
	
	.folio-frame img {
		margin:3px;
		border:1px solid #b8b9ba;
		width:170px;
		height:170px;
	}
		
	.view-site a{
		font-size:12px;
		display:block;
		width:85px;
		background:url(../img/arrow.gif) no-repeat center right;
		text-decoration:underline
	}
	
	.view-site a:hover {
		text-decoration:underline;
	}
			
	.folio-box ul {
		margin-top:20px;
	}
	
	.folio-box ul li {
		padding:2px 0;
	}

/**  Contact **/

#contact {
	position:relative;
	top:0;
	left:0;
}

.webform {            /*To style the whole form*/
	width:450px;
}

.webform label {
	display:block; 	/*puts all label elements onto a new line*/
	width:150px;
	padding:18px 0 0 20px;
	float:left;
	text-align:left;
	color:#494848;
	font-size:14px;
	font-family:verdana;
}

.webform  .inputbox{     /*style the inputbox class elements*/
	height:18px;
	width:250px;
	padding:6px 4px;
	margin:5px 0 0 20px;
    border:1px solid #ccc;
	background:#fff url(../images/form-grad.gif) repeat-x;
	float:right;
	font-family:arial;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	
}

.webform .inputbox:hover, .webform .inputbox:focus, .webform textarea:hover, .webform textarea:focus, .submit:focus {
	border:1px solid #8d8d8d;
}

.webform textarea {    /*style the textarea blocks*/
	height:100px;
	width:250px;
	padding:6px 4px;
	margin:5px 0 0 20px;
	border:1px solid #ccc;
	background:#fff url(../images/form-grad.gif) repeat-x;
	float:right;
	font-family:arial;
	font-size:14px;
	font-weight:normal;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}

.submit {     /*style submit button*/
	display:block;
	border:1px solid #ccc;
	margin:15px 0 15px 20px;
	padding:5px;
	background:#fff url(../images/form-grad.gif) repeat-x;
	float:right;
	clear:both;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}

.submit:hover {
	display:block;
	border:1px solid #8d8d8d;
	margin:15px 0 15px 20px;
	padding:5px;
}

.webform fieldset {
	border:none;
}

/* Error styles */

.message {
	border:1px dashed #a28d6a;
	font-size:12px;
	color:#ff0000;
	display:none;
	width:400px;
	padding:10px;
	left:460px;
	position:absolute;
	top:150px;
	width:400px;
}

#alert {
	
}

.special {
	display:none;
}

/**  Social **/

#social {
	position:absolute;
	top:55px;
	right:0;
	width:250px;
}

#social p { 
	text-align:center;
}

#social ul {
	display:block;
	padding-left:30px;
}

#social li {
	float:left;
	margin: 0 10px;
}

.fb {
	background:url(../img/fb-icon.gif) no-repeat;
	height:48px;
	width:48px;
	text-indent:-9999px;
}

.fb a, .twitter a, .linkedin a {
	display:block;
	height:48px;
	width:48px;
}

.twitter {
	background:url(../img/twitter-icon.gif) no-repeat;
	height:48px;
	width:48px;
	text-indent:-9999px;
}

.linkedin {
	background:url(../img/linkedin-icon.gif) no-repeat;
	height:48px;
	width:48px;
	text-indent:-9999px;
}

/** Footer **/

#footer {
	height:60px;
	background:url(../img/footer-bg-twitter.png) no-repeat left bottom;
	height:200px;
	color:#373636;
}

	#footer p {
		padding-top:65px;
		text-indent:-10px;
	}
	
	#footer li {
		font-size:14px;
		line-height:20px;
	}
	
	.footer-left {
		width:300px;
		float:left;
	}
	
	.footer-tweet {
		width:550px;
		float:left;
	}
				
	#tweet {
		padding:8px;
		border:1px dashed #a28d6a;
		width:550px;
		margin-top:25px;
	}
	
	#tweet a {
		color:#a28d6a;
		font-style:italic;
		font-size:12px;
	}
	
	#tweet a:hover {
		text-decoration:none;
		border-bottom:none;
	}
	
	#tweet p {
		padding-top:0px;
	}
	
	.loading {
		background: url(../img/loader.gif) center no-repeat;
		height: 30px;
	}

	
	.footer-left a:hover {
		border-bottom:1px dashed #a28d6a;
	}
	
	#footer li.h4 {
		padding:0 0 10px 0;
		color:#373636;
		text-shadow:1px 1px 1px #fff;
		font-weight:bold;
		font-size:16px
	}
	
	/** OTHER **/
	
.top {
	width:95px;
	height:30px;
	position:relative;
	top:22px;
	left:800px;
	text-indent:-9999px;
}

.top a {
	background-image:url(../img/top.png);
	background-repeat:no-repeat;
	background-position:0px 0px;
	position:absolute;
	top:0;
	left:0;
	width:95px;
	height:30px;
}

.top a:hover {
	background-image:url(../img/top.png);
	background-repeat:no-repeat;
	background-position:0 -31px;
}