/*########################################### 99Designs Style Sheet ###########################################*/
/*----------------------------------------------------------------/
/ styles.css - This is the main stylesheet for 99designs.		  /
/ Copyright: Rhys Mitchell								  		  /
/ Email: info@99designs.co.nz									  /
/ Year: 2008													  /
/ Version: 1.0													  /
/ Date: 01/12/2008												  /
/----------------------------------------------------------------*/

/*########################### Overall #############################*/
body {
	margin:0;
	padding:0;
	background-color: #dee7f1;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

/*########################### Positions #############################*/

img {border: 0;}
.left {float: left;}
.center {text-align: center;}
.right {float: right;}

/*########################### Banner ###########################*/

#banner-stretch {
	width: 100%;
	height: 150px;
	background: url(../images/banner-stretch.png) repeat-x;
}

#banner-navigation {
	width: 900px;
	height: 150px;
	margin: auto auto;
}

#logo {
	width: 379px;
	height: 150px;
	background: url(../images/logo.png) no-repeat;
	float: left;
}

/*######################### Navigation #########################*/

#navigation {
	width: 521px;
	height: 150px;
	float: left;
}

#navigation ul{
	font-size: 14px;
	color: #FFF;
	list-style-type: none;
	text-align: center;
	margin: 0;
	padding: 116px 0 0 0px;
}

#navigation ul li{
	display: inline;
	float:left;	
	padding-right: 10px;
}

#navigation li, #navigation a{
	width: 113px;
	height: 34px;
	display:block;
}

#navigation ul li a, #navigation a:visited{
	width: 113px;
	height: 34px;
	color: #bfc6ce;
	line-height: 250%;
	text-decoration: none;
	background: url(../images/navigation-link.png) 0 0 no-repeat;
}

#navigation ul li a:hover{
	width: 113px;
	height: 34px;
	color: #FFF;
	text-decoration: none;
	background: url(../images/navigation-hover.png) no-repeat;
}

#navigation li.current {
	width: 113px;
	height: 34px;
	color: #FFF;
	line-height: 250%;
	text-decoration: none;
	background: url(../images/navigation-active.png) 0 0 no-repeat;
}

/*######################### Index Tab #########################*/

#indextab-stretch {
	width: 100%;
	height: 265px;
	background: url(../images/frontpage-stretch.png) repeat-x;
}

#indextab-center {
	width: 900px;
	height: 265px;
	margin: auto auto;
	background: url(../images/topgfx.jpg) no-repeat;
}

#indextab-content1 {
	width: 305px;
	float: left;
}

#indextab-content2 {
	width: 595px;
	float: left;
}

.indextab-example {
	margin: 10px 0 0 40px;
}

/*######################### BreadCrumb #########################*/

#breadcrumb-stretch {
	width: 100%;
	height: 50px;
	background: url(../images/frontpage-small.png) repeat-x;
}

#breadcrumb-content {
	width: 900px;
	height: 50px;
	margin: auto auto;
}

/*######################### Container #########################*/

#container {
	width: 900px;
	margin: auto auto;
	height: auto;
}

/*######################### Content #########################*/

#center {
	width: 900px;
	height: auto;
	margin-top: 5px;
	float: left;
}

#content-aboutus {
	width: 450px;
	height: auto;
	float: left;
}

#content-quote {
	width: 450px;
	height: auto;
	float: left;
}

#content-featured {
	width: 900px;
	height: auto;
	float: left;
}

#content-featured table{
	width: 900px;
	height: auto;
	margin: 5px 0 5px 0;
	text-align: center;
}

.ulclass ul {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	padding: 10px 0 0 60px;
	margin: 0;
}

.ulclass li {padding-bottom: 10px;}
.ulclass li a{color: #2f4b6c; text-decoration: underline; font-weight: bold;}
.ulclass li a:hover{color: #0099cc; text-decoration: none;}

.blue {color: #2f4b6c;}

/*######################### Status Message #########################*/

.sucesss {
	width: 600px;
	height: 27px;
	font-size: 12px;
	color: #FFF;
	background: url(../images/success.png) no-repeat;
	margin: 10px auto 10px auto;
	padding: 12px 0 0 0;
	text-align: center;
}

.fail {
	width: 600px;
	height: 27px;
	font-size: 12px;
	color: #FFF;
	background: url(../images/fail.png) no-repeat;
	margin: 10px auto 10px auto;
	padding: 12px 0 0 0;
	text-align: center;
}

/*######################### Portfolio #########################*/

#portfolio-left {
	width: 450px;
	float: left;
	margin-top: 20px;
}

#portfolio-right {
	width: 450px;
	float: left;
	margin-top: 20px;
}

.portfolio-1 {
	width: 350px;
	margin-left: 60px;
	margin-bottom: 20px;
	background: #9aacc0;
}

.portfolio-1 p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color: #FFF;
	padding: 0px 14px 5px 8px;
	line-height: 16px;
}

.portfolio-1 p a{color: #2f4b6c; text-decoration: none;}
.portfolio-1 p a:hover{text-decoration: underline;}

/*######################### Portfolio #########################*/

.websitepackges {width: 900px;}
.packagestd {width: 300px; vertical-align:top;}

/*######################### Contact Form #########################*/
#contactform-div {
	width: 510px;
	margin: 10px auto 0 auto;
}

.contactform {width: 600px;}

.contactform p{
	font-size: 12px;
	margin: 0;
	font-weight: bold;
}

.sendbutton {
	float: right;
	margin-right: 90px;
}

.formfield {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	width: 250px;
	border: 1px solid #999;
}

.fieldarea {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	width: 500px;
	height: 200px;
	border: 1px solid #999;
}

input.formfield:focus, textarea.fieldarea:focus {background-color : #eef4fa;}

#privacypolicy {
	width: 600px;
	margin: -10px auto  30px auto;
}

/*######################### Text/Headers #########################*/
h1 {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 20px;
	color: #FFF;
	margin: 0;
	padding: 20px 0 0 20px;
}

h2 {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 20px;
	color: #0099cc;
	margin: 0;
	padding: 10px 0 0 20px;
}

h3 {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 20px;
	color: #FFF;
	margin: 0;
	padding: 10px 0 0 20px;	
}

.headertext {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #FFF;
	margin: 0;
	padding: 60px 10px 0 0;
	line-height: 250%;
}

.bodytext {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 150%;
	margin: 0;
	padding: 5px 10px 0 25px;
}

.bodytext a{color: #2f4b6c; text-decoration: underline; font-weight: bold;}
.bodytext a:hover{color: #0099cc; text-decoration: none;}

/*######################### Footer ###############################*/
#footer-stretch {
	width: 100%;
	height: 50px;
	background: url(../images/footer-stretch.png) #1e3146 repeat-x;
	margin: 10px auto 0 auto;
	float: left;
	position: fixed;
	bottom: 0;
}

#footer {
	width: 900px;
	height: 100px;
	margin: auto auto;
}

#footercontent {
	width: 900px;
	height: 40px;
	float: left;
	margin-top: 10px;
}

#footercontent p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFF;
	padding: 0px 0 0 20px;
}

/*######################### Height ###############################*/
.height {
	height: 60px;
	float:left;
}