/* ---------------------------------------------------------------- 
	UNNDUNN.COM 6.0
   ---------------------------------------------------------------- */

/* Import Master Styles */
@import url("../styles.css");

/* ----------------------------------------------------------------
   Body
   ---------------------------------------------------------------- */
   
body {
	background: url(graphics/bg_stripegradient.png) top center no-repeat #003663;
}
a {
    color: #0074d6;
}

/* ----------------------------------------------------------------
   Body Section
   ---------------------------------------------------------------- */

/* Masthead
   -------- */

#masthead {
	height: 120px;
	position: relative;
	left: 0;
	top: 0;
}

/* Web Design Logo */
#masthead h1 
{
    position: absolute;
    left: 110px;
    top: 62px;
    height: 0;
    padding-top: 38px;
    overflow: hidden;
    width: 219px;
    background: url(graphics/h1-webdesign.png) no-repeat left top;
}

/* description */
#masthead div.description 
{
    height: 0;
    width: 0;
    overflow: hidden;
}

/* Current Project
   --------------- */
#current_project {
	position: absolute;
	right: 0;
	top: 0;
	width: 343px;
	height: 168px;
	background: url(graphics/div-latestproject_qree_tran.png) no-repeat;
}

#current_project a {
	display: block;
	width: 343px;
	padding: 168px 0 0;
	height: 0;
	overflow: hidden;
	margin: 0;
}

/* -----------------------------------------------------------------
   Main Content Section
   ----------------------------------------------------------------- */

/* Definition
   ---------- */
#primary-content {
	margin: 0 0 0 239px;
	border-top: 2px white solid;
	border-bottom: 2px white solid;
	background: url(graphics/bg_maincontent.png) repeat;
	padding: 20px;
	width: 691px;
	color: #fff;
	font: small "tahoma ms", tahoma, arial, sans-serif;
}

/* Styles
   ------ */
   
#primary-content h2.getasite {
	border-bottom: 1px gray solid;
	margin: -20px -20px 20px;
	background: url(graphics/h2-getasite.png) no-repeat left bottom;
	width: 731px;
	height: 0;
	padding: 299px 0 0;
	overflow: hidden;
}

#primary-content h2.header {
	border-bottom: 1px gray solid;
	margin: -20px -20px 20px;
	width: 731px;
	height: 0;
	padding: 80px 0 0;
	overflow: hidden;
}

#primary-content h2.portfolio {
	background: url(graphics/h2-portfolio.jpg) no-repeat left bottom;
}

#primary-content h2.services {
	background: url(graphics/h2-services.jpg) no-repeat left bottom;
}

#primary-content h2.contact {
	background: url(graphics/h2-contact.jpg) no-repeat left bottom;
}

#primary-content h2 {
	border-bottom: 1px gray solid;
	margin: -20px -20px 20px;
	width: 691px;
	padding: 10px 20px;
	font: xx-large bold italic arial, sans-serif;
	text-transform: uppercase;
}

#primary-content h3 {
	font: large arial, sans-serif;
	border-top: 1px solid #008bff;
	border-bottom: 1px solid #003f73;
	margin-left: -20px;
	margin-right: -20px;
	padding: 10px 20px;
	text-transform: uppercase;
	clear: both;
	background: url(graphics/bg_h3.png);
}

#primary-content h4 {
	font: medium bold arial, sans-serif;
	text-transform: uppercase;
}

#primary-content .intro {
	font-weight: bold;
}

/* Portfolio styles
   ---------------- */
ul#portfolio_sites {
	background: url(graphics/bg_sidebar.png) repeat-y top right;
	margin-right: -20px;
	margin-left: -20px;
	border-bottom: 1px solid #003f73;
}   

ul#portfolio_sites li.portfolio_site {
    padding-right: 220px;
    padding-left: 20px;
    position: relative;
    left: 0;
    top: 0;
    min-height: 300px;
}

ul#portfolio_sites li.portfolio_site h3 {
    margin-right: -220px;
    background-color: #00284a;
}

ul#portfolio_sites li.portfolio_site div.thumbnail {
    position: absolute;
    right: 0;
    top: 40px;
    margin: 0;
    width: 200px;
}

ul#portfolio_sites li.portfolio_site div.thumbnail img {
	margin: 0 auto;
	display: block;
}

ul#portfolio_sites li.portfolio_site div.thumbnail a {
	margin: 0;
	padding: 10px;
	font-weight: bold;
	color: white;
	display: block;
	text-decoration: none;
	background-color: #084c71;
	text-align: center;
	border-top: 1px solid #008bff;
	border-bottom: 1px solid #008bff;
}

/* -----------------------------------------------------------------
   Additional Content Section
   ----------------------------------------------------------------- */

/* Definition
   ---------- */
   
#additional-content {
	position: absolute;
	left: 0;
	top: 120px;
	width: 229px;
}

#additional-content .section {
	border: 1px solid #999;
	width: 209px;
	padding: 10px;
	margin: 0 0 10px;
	font: small "tahoma ms", tahoma, arial, sans-serif;
	color: #999;
}

/* Web design menu
   --------------- */
#additional-content #web-dev-menu {
	list-style: none;
	padding: 0;
	margin: 0;
}   

#additional-content #web-dev-menu .wdm-item {
	border: 1px solid #999;
	width: 229px;
	padding: 0;
	overflow: hidden;
	margin: 0 0 10px;
	height: 36px;
	overflow: hidden;
	background: bottom center no-repeat;
}

/* Individual menu items */
#additional-content #web-dev-menu #wdm-home {
	background: url(graphics/li-home_trans_off.png);
}

#additional-content #web-dev-menu #wdm-portfolio {
	background: url(graphics/li-portfolio_trans_off.png);
}

#additional-content #web-dev-menu #wdm-services {
	background: url(graphics/li-services_trans_off.png);
}

#additional-content #web-dev-menu #wdm-contact {
	background: url(graphics/li-contact_trans_off.png);
}

#additional-content #web-dev-menu .wdm-item a 
{
    display: block;
    padding: 36px 0 0;
    overflow: hidden;
}

/* More information
   ---------------- */
   
#additional-content #contact-info {
	background: url(graphics/bg_moreinfo.png) repeat;
	color: black;
	border: 1px solid #ffe400;
}

#additional-content #contact-info h2 {
	margin: -10px -10px 10px;
	width: 229px;
	height: 0;
	overflow: hidden;
	padding: 36px 0 0;
	background: url(graphics/h3-moreinfo.png) no-repeat top center;
	border-bottom: 1px solid #b3a000;
}

/* Testimonials
   ------------ */

#additional-content #testimonials h2 {
	margin: -10px -10px 10px;
	width: 229px;
	height: 0;
	overflow: hidden;
	padding: 36px 0 0;
	background: url(graphics/h3-testimonials.png) no-repeat top center;
	border-bottom: 1px solid #2a6399;
}

#additional-content #testimonials blockquote {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

#additional-content #testimonials blockquote cite {
	text-align: right;
	font-weight: bold;
	font-style: normal;
}


/* Forms
   ----- */

div.form .formelement 
{
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

div.form .inline
{
    display: inline;
}

div.form .formelement .left
{
    display: block;
    float: left;
    text-align: right;
    padding-right: 5px;
}

div.form .formelement .top 
{
    display: block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: inherit;
    margin-bottom: 5px;
}

div.form .formelement .center 
{
    margin-left: auto;
    margin-right: auto;
    display: block;
}

div.form .formelement .quarter 
{
    width: 160px;
}

div.form .formelement .half
{
    width: 320px;
}

div.form .formelement .full
{
    width: 640px;
}

div.form .formbuttons 
{
    margin-left: -20px;
    margin-right: -20px;
    border-top: solid 1px #008bff;
    text-align: center;
    display: block;
    padding-top: 10px;
    padding-bottom: 10px;
}

div.form .formbuttons input.submit 
{
    font: bold medium arial, sans-serif;
    color: White;
    background: none;
    border-style: outset;
    border-color: #008bff;
    border-width: thin;
    margin: 0 auto;
    padding: 0.25em 3em;
    display: block;
}