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

ALL CODE, IMAGES & CONTENT COPYRIGHT 2010
BY JOSHUA CAREY, PORTLAND, OREGON
ALL RIGHTS RESERVED

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

/* GLOBAL BROWSER RESET */

* {
padding: 0;
margin: 0;
}

ul, ol {
list-style: none;
}

img {
border: none;
}

a img, :link img, :visited img {
border: none;
}

/* GLOBAL STYLES */

body {
background: #000 url("../images/background.png") repeat-x;
}

p {
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
color: #000;
font-weight: 500;
}

h4 {
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 16px;
color: #000;
font-weight: 900;
margin-bottom: 8px;
}

a {
font-family: Helvetica, Arial, Verdana, sans-serif;
font-weight: 600;
color: #93b648;
text-decoration: underline;
}

#masterpage { /* Sets Height to 600px */
position: relative;
top: 125px;
left: 200px;
width: 750px;
height: 600px;
background-color: #fff;
z-index: 3;
}

#logo {
position: absolute;
top: 3px;
left: 155px;
z-index: 100;
}

#iphone-ad {
position: absolute;
top: 5px;
left: 566px;
width: 404px;
height: 62px;
}

#copyright {
position: relative;
left: 25px;
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 10px;
color: #adadad;
font-weight: 500;
}

/* HOME PAGE */

#home-textbox {
float: left;
margin-top: 79px;
margin-left: 25px;
width: 530px;
font-family: Helvetica, Arial, Verdana, sans-serif;
}

#infobox {
position: relative;
left: 35px;
width: 441px;
height: 149px;
}

#hire-banner {
position: relative;
left: -47px;
width: 564px;
height: 87px;
z-index: 2;
}

#hotsauce {
float: right;
width: 170px;
margin: 20px 20px 0px 0px;
}

#copyright-home { /* Styles Copyright Notice on Home Page */
position: relative;
left: 0px;
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 10px;
color: #adadad;
font-weight: 500;
}

/* Home Page Type Styles */

#home-textbox h1 {
font-size: 40px;
color: #000;
font-weight: 900;
}

.accent-type1 {
font-size: 22px;
color: #000;
font-weight: 500;
}

.accent-type2 {
font-size: 28px;
color: #000;
font-weight: 900;
}

.accent-type3 {
font-size: 32px;
color: #000;
font-weight: 900;
}

.accent-type4 {
font-size: 18px;
color: #000;
font-weight: 500;
line-height: 24px;
}

.accent-type5 {
font-size: 20px;
color: #000;
font-weight: 900;
line-height: 24px;
}

.accent-type6 {
font-size: 13px;
color: #000;
font-weight: 500;
line-height: 16px;
}

/* CONTACT PAGE */

#contactpage {
position: relative;
top: 125px;
left: 200px;
width: 750px;
height: 570px;
background-color: #fff;
z-index: 3;
}

#contact-textbox {
float: left;
margin-top: 79px;
margin-left: 25px;
width: 419px;
}

#contactpage-banner {
position: relative;
left: -32px;
width: 268px;
height: 79px;
z-index: 2;
}

#contact-copyright { /* Positions Copyright Notice */
position: relative;
left: 0px;
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 10px;
color: #adadad;
font-weight: 500;
}

#contact-form {
position: relative;
width: 392px;
height: 432px;
padding: 20px 20px 0px 20px;
background: url("../images/contact-bkgrnd.png") no-repeat;
}

/* Contact Page Sidebar */

#contact-sidebar {
float: right;
margin-top: 85px;
margin-right: 20px;
padding-top: 0px;
width: 195px;
}

#contact-sidebar h4 {
margin-bottom: 10px;
font-family: Helvetica, Arial, Verdana, sans-serif;
color: #678F02;
font-size: 14px;
font-weight: 900;
}

#about h4 {
margin-bottom: 6px;
font-family: Helvetica, Arial, Verdana, sans-serif;
color: #678F02;
font-size: 14px;
font-weight: 900;
}

#sprite-box {
position: relative;
top: 0px;
left: 0px;
width: 195px;
height: 130px;
background: #fff url("../images/contact-sprite.png") no-repeat;
}

#sprite-phone {
position: absolute;
top: 2px;
left: 40px;
width: 155px;
height: 12px;
padding: 4px 0px 4px 0px;
font-family: Helvetica, Arial, Verdana, sans-serif;
color: #605e5e;
font-size: 12px;
font-weight: 900;
}

#sprite-email {
position: absolute;
top: 34px;
left: 40px;
width: 155px;
height: 12px;
padding: 4px 0px 4px 0px;
font-family: Helvetica, Arial, Verdana, sans-serif;
color: #605e5e;
font-size: 12px;
font-weight: 900;
}

#sprite-chat {
position: absolute;
top: 62px;
left: 40px;
width: 155px;
height: 18px;
padding: 4px 0px 4px 0px;
font-family: Helvetica, Arial, Verdana, sans-serif;
color: #605e5e;
font-size: 12px;
font-weight: 900;
}

#sprite-chat1 {
position: relative;
font-family: Helvetica, Arial, Verdana, sans-serif;
color: #678F02;
font-size: 10px;
font-weight: 900;
line-height: 10px;
}

#sprite-twitter {
position: absolute;
top: 100px;
left: 40px;
width: 155px;
height: 18px;
padding: 4px 0px 4px 0px;
font-family: Helvetica, Arial, Verdana, sans-serif;
color: #678F02;
font-size: 9px;
font-weight: 900;
line-height: 10px;
}

#sprite-twitter1 {
font-family: Helvetica, Arial, Verdana, sans-serif;
color: #605e5e;
font-size: 12px;
font-weight: 900;
line-height: 10px;
}

#about {
position: relative;
font-family: Helvetica, Arial, Verdana, sans-serif;
color: #151b1c;
font-size: 11px;
font-weight: 500;
line-height: 14px;
}

/* Quote Page */

#quote-form tr {
line-height: 20px;
}

#quote-form label {
padding-bottom: 5px;
}

#quotepage {
position: relative;
top: 125px;
left: 200px;
width: 750px;
height: 650px;
background-color: #ffffff;
z-index: 3;
}

#copyright-quote {
position: absolute;
top: 630px;
left: 25px;
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 10px;
color: #adadad;
font-weight: 500;
}

#quote-box {
position: relative;
top: 55px;
left: 25px;
width: 692px;
height: 517px;
background: url("../images/quote-bkgrnd.png") no-repeat;
}

#quote-form {
width: 662px;
height: 517px;
padding: 15px 15px 0px 15px;
}

#quote-form h4 {
font-family: Helvetica, Arial, Verdana, sans-serif;
color: #ffffff;
font-size: 16px;
font-weight: 900;
margin-bottom: 14px;
}

#quote-form p {
font-family: Helvetica, Arial, Verdana, sans-serif;
color: #ffffff;
font-size: 12px;
font-weight: normal;
line-height: 14px;
margin-bottom: 12px;
}

/* Portfolio Pages */

#portfoliopage { /* Sets Height of Page */
position: relative;
top: 125px;
left: 200px;
width: 750px;
height: 750px;
background-color: #fff;
z-index: 3;
}

#content-container {
float: right;
top: 60px;
padding-left: 20px;
width: 525px;
}

#hire-banner1 {
position: relative;
margin-top: 10px;
left: -26px;
width: 207px;
height: 65px;
}

#art-element {
position: relative;
top: 70px;
left: 20px;
width: 500px;
}

#page-bottom {
position: absolute;
top: 650px;
left: 223px;
width: 425px;
height: 75px;
}

#ad-position {
position: absolute;
top: 0px;
left: 15px;
margin-bottom: 10px;
}

#portfolio-copyright p {
position: relative;
top: 65px;
left: 0px;
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 10px;
color: #adadad;
font-weight: 500;
}

/* Sidebar Element & Styles */

#portfolio-sidebar { /* Sets Height of Sidebar */
float: left;
top: 0px;
left: 0px;
width: 199px;
height: 750px;
background-color: #eaf0f0;
border-right: 1px solid #d5e4e6;
z-index: 2;
}

#portfolio-text {
position: relative;
top: 65px;
left: 0px;
padding: 0px 0px 10px 10px;
width: 180px;
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 11px;
color: #000;
font-weight: normal;
line-height: 14px;
}

#divider {
width: 180px;
height: 2px;
margin-top: 5px;
padding: 0px 0px 6px 0px;
border-top: 1px solid #b8bcbc;
border-bottom: 1px solid #b8bcbc;
}

#portfolio-text h4 {
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 14px;
color: #000;
font-weight: 900;
margin-bottom: 3px;
}

#sidebarnav li {
display: block;
padding: 9px 0px 9px 6px;
border-bottom: 1px solid #b8bcbc;
}

#sidebarnav a {
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
color: #717374;
font-weight: normal;
text-decoration: none;
}

#currentpage a {
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
font-weight: 700;
color: #93b648;
}

/* Navigation Arrow */

#portfolio-arrow {
position: relative;
top: 50px;
left: 0px;
width: 46px;
height: 32px;
}

#arrow-left {
float: left;
top: 0px;
left: 0px;
width: 16px;
height: 16px;
padding: 8px 0px 8px 0px;
}

#arrow-left img a {
height: 32px;
}

#arrow-right {
float: right;
top: 0px;
right: 0px;
width: 16px;
height: 16px;
padding: 8px 0px 8px 0px;
}

#separator {
position: absolute;
top: 0px;
left: 23px;
right: 23px;
padding-top: 2px;
}

/* Flash Pages Styles */

#flashpage { /* Sets Height of Flash Page */
position: relative;
top: 125px;
left: 200px;
width: 750px;
height: 825px;
background-color: #fff;
z-index: 3;
}

#flashpage-sidebar { /* Sets Height of Flash Sidebar */
float: left;
top: 0px;
left: 0px;
width: 199px;
height: 825px;
background-color: #eaf0f0;
border-right: 1px solid #d5e4e6;
z-index: 2;
}

#flashart-element {
position: relative;
top: 100px;
left: 20px;
width: 500px;
}

#flashpage-bottom {
position: absolute;
top: 725px;
left: 223px;
width: 425px;
height: 75px;
}

/* iPhone Page */

#iphonepage	{
position: relative;
top: 125px;
left: 200px;
width: 750px;
height: 650px;
background-color: #fff;
z-index: 3;
margin-bottom: 30px;
}

#iphonebox {
float: left;
margin: 79px 0px 0px 25px;
width: 260px;
height: 512px;
}

#iphone-textbox {
float: right;
margin: 79px 40px 0px 0px;
width: 410px;
padding: 0px 3px 0px 3px;
}

#iphone-form {
position: relative;
width: 409px;
height: 218px;
margin-top: 15px;
background: url("../images/iphone-bkgrnd.png") no-repeat;
}

.iphone-text1 {
font-family: Helvetica, Arial, Verdana, sans-serif;
color: #000;
font-size: 31px;
font-weight: 500;
line-height: 38px;
}

.iphone-text2 {
font-family: Helvetica, Arial, Verdana, sans-serif;
color: #000;
font-size: 33px;
font-weight: 600;
line-height: 38px;
}

.iphone-text3 {
font-family: Helvetica, Arial, Verdana, sans-serif;
color: #000;
font-size: 13px;
font-weight: 500;
line-height: 18px;
}

/* NAVIGATION SPRITES */

#navcontainer {
position: absolute;
list-style: none;
top: 68px;
left: 480px;
width: 488px;
height: 41px;
}

#navcontainer span {
display: none;
position: absolute;
}

#navcontainer a {
display: inline;
text-indent: -900%;
position: absolute;
outline: none;
}

#navcontainer a:hover {
background-position: top;
}

#navcontainer a:hover span {
display: block;
}

/* Logos Sprite */

#navcontainer .logos {
width: 94px;
height: 41px;
display: block;
background: url("../images/navigation/logos-up.png") no-repeat;
}

#navcontainer .logos span {
top: 0px;
left: 0px;
width: 94px;
height: 41px;
background: url("../images/navigation/logos-over.png") no-repeat;
}

#navcontainer .logos-active {
width: 94px;
height: 41px;
display: block;
background: url("../images/navigation/logos-down.png") no-repeat;
}

/* Print Sprite */

#navcontainer .print {
top: 0px;
left: 98px;
width: 97px;
height: 41px;
display: block;
background: url("../images/navigation/print-up.png") no-repeat;
}

#navcontainer .print span {
top: 0px;
left: 0px;
width: 97px;
height: 41px;
background: url("../images/navigation/print-over.png") no-repeat;
}

#navcontainer .print-active {
top: 0px;
left: 98px;
width: 97px;
height: 41px;
display: block;
background: url("../images/navigation/print-down.png") no-repeat;
}

/* Flash Sprite */

#navcontainer .flash {
top: 0px;
left: 194px;
width: 96px;
height: 41px;
display: block;
background: url("../images/navigation/flash-up.png") no-repeat;
}

#navcontainer .flash span {
top: 0px;
left: 0px;
width: 96px;
height: 41px;
background: url("../images/navigation/flash-over.png") no-repeat;
}

#navcontainer .flash-active {
top: 0px;
left: 194px;
width: 96px;
height: 41px;
display: block;
background: url("../images/navigation/flash-down.png") no-repeat;
}

/* Websites Sprite */

#navcontainer .websites {
top: 0px;
left: 290px;
width: 103px;
height: 41px;
display: block;
background: url("../images/navigation/websites-up.png") no-repeat;
}

#navcontainer .websites span {
top: 0px;
left: 0px;
width: 103px;
height: 41px;
background: url("../images/navigation/websites-over.png") no-repeat;
}

#navcontainer .websites-active {
top: 0px;
left: 290px;
width: 103px;
height: 41px;
display: block;
background: url("../images/navigation/websites-down.png") no-repeat;
}

/* Contact Sprite */

#navcontainer .contact {
top: 0px;
left: 393px;
width: 98px;
height: 41px;
display: block;
background: url("../images/navigation/contact-up.png") no-repeat;
}

#navcontainer .contact span {
top: 0px;
left: 0px;
width: 98px;
height: 41px;
background: url("../images/navigation/contact-over.png") no-repeat;
}

#navcontainer .contact-active {
top: 0px;
left: 393px;
width: 98px;
height: 41px;
background: url("../images/navigation/contact-down.png") no-repeat;
}

/* MISC ELEMENTS */

/* Form Styles For All Pages */

#contact-form h4 {
font-family: Helvetica, Arial, Verdana, sans-serif;
color: #fff;
font-size: 16px;
font-weight: 900;
margin-bottom: 14px;
}

#contact-form p {
font-family: Helvetica, Arial, Verdana, sans-serif;
color: #fff;
font-size: 12px;
font-weight: normal;
line-height: 14px;
margin-bottom: 12px;
}

.formcontent {
font-family: Helvetica, Arial, Verdana, sans-serif;
color: #fff;
font-size: 10px;
font-weight: normal;
line-height: 14px;
}

/* Styles Contact Page */

.inputText {
width: 185px;
height: 15px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;	
font-size: 12px;
line-height: normal;
color: #000;
}

.inputTextArea {
width: 389px;
height: 100px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;	
font-size: 12px;
color: #000;
}

/* Styles iPhone Page */

.inputText2 {
width: 180px;
height: 15px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;	
font-size: 12px;
line-height: normal;
color: #000;
}

.inputTextArea2 {
width: 369px;
height: 65px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;	
font-size: 12px;
line-height: normal;
color: #000;
}

/* Styles Quote Page */

.inputText3 {
width: 90px;
height: 15px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;	
font-size: 12px;
line-height: normal;
color: #000;
}
.inputTextArea3 {
width: 590px;
height: 120px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;	
font-size: 12px;
line-height: normal;
color: #000;
}

.checkbox {
height: 12px;
padding-right: 3px;
}

.selectlist {
width: 65px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;	
font-size: 11px;
line-height: normal;
color: #000;
}

/* Vertical Spacers */

.spacer {
height: 10px;
clear: both;
}

.spacer1 {
height: 6px;
clear: both;
}

.spacer2 {
height: 20px;
clear: both;
}

.spacer3 {
height: 28px;
clear: both;
}

.spacer4 {
height: 15px;
clear: both;
}