/* Global styles for all pages */

* { margin: 0; padding: 0; }

html { background: url(../images/body-bg.png) repeat 0 0; overflow: scroll; }

body {
	font-size: 62.5%;
	font-family: "Trebuchet MS", sans-serif;	
	color: #9b9b9b;
	background: url(../images/header-overlay.png) no-repeat 50% 0; height: 556px;
}

ul { list-style-type: none; }
a { text-decoration: none; color: #9b9b9b; outline: none; }
img { border: none; }

.clear { clear: both; }

#page-wrap {
	width: 758px;
	margin: 0 auto;
}

/* Header styles */
#header { padding-top: 25px; margin-bottom: 8px; }
#header h1 a { background: url(../images/logo-bg.png) no-repeat; width: 323px; height: 79px; text-indent: -9999px; display: block; }
#header h1 { padding-left: 15px; }

/* navigation style */
#nav { width: 350px; height: 48px; background: url(../images/nav-bg.png) 0 -96px no-repeat; position: relative; top: 13px; right: 10px; float: right; text-indent: -9999px; }
#nav ul li { display: inline; font-size: 1.4em; }
#nav ul li a#home { width: 78px; }
#nav ul li a#about { width: 80px; }
#nav ul li a#contact { width: 88px; }
#nav ul li a#portfolio { width: 104px; }
#nav ul li a { display: block; float: left; height: 48px; }
#nav ul li a#home:hover { background: url(../images/nav-bg.png) 0 0 no-repeat; width: 78px; }
#nav ul li a#about:hover { background: url(../images/nav-bg.png) -78px 0 no-repeat; width: 80px; }
#nav ul li a#contact:hover { background: url(../images/nav-bg.png) -158px 0 no-repeat; width: 88px; }
#nav ul li a#portfolio:hover { background: url(../images/nav-bg.png) -246px 0 no-repeat; width: 104px; }
body#home-page #nav ul li a#home { background: url(../images/nav-bg.png) 0 -48px no-repeat; width: 78px; }
body#about-page #nav ul li a#about { background: url(../images/nav-bg.png) -78px -48px no-repeat; width: 80px; }
body#contact-page #nav ul li a#contact { background: url(../images/nav-bg.png) -158px -48px no-repeat; width: 88px; }
body#portfolio-page #nav ul li a#portfolio { background: url(../images/nav-bg.png) -246px -48px no-repeat; width: 104px; }

/* Main content styles */
#content {
	font-size: 1.4em;
	margin-top: 20px;
}
#home-page #content { background: url(../images/content-bg.png) no-repeat; width: 758px; height: 353px; line-height: 1.3em; margin-top: 0; }
#portfolio-page #content { background: url(../images/v-separator.png) repeat-y; width: 758px; }
#contact-page #content { margin-left: 30px; width: 700px; }
#portfolio-page #content { margin-top: 30px; padding-bottom: 25px; }

#right-col { float: right; width: 351px; position: relative; }
#home-page #right-col { position: relative; top: 35px; }
#right-col h2 { background: url(../images/motto-bg.png) no-repeat; width: 285px; height: 99px; text-indent: -9999px; margin-bottom: 5px;}
#find-out-more { background: url(../images/findoutmore.png) no-repeat bottom center; width: 181px; height: 41px; display: block; text-indent: -9999px; margin-top: 20px; }
#find-out-more:hover { background-position: top center; }

#left-col { width: 351px; }
#home-page #left-col { position: relative; top: 45px; }
#feature { text-indent: -9999px; }
#feature h2 { background: url(../images/fp-bg.png) no-repeat; width: 175px; height: 27px; position: relative; left: 177px; margin-bottom: 10px; }
#feature #visit { background: url(../images/visit-bg.png) no-repeat; display: block; width: 99px; height: 26px; position: relative; left: 250px; margin-top: 10px;}
#project { background: url(../images/rj.png) no-repeat bottom center; width: 351px; height: 147px; margin-bottom: 5px; display: block; text-indent: -9999px;}
#project:hover { background-position: top center; }
#label { background: url(../images/fp-label.png) no-repeat; width: 314px; height: 29px; display: block; position: relative; left: 30px; margin-bottom: 12px; }

.buttons {padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 1;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
}


/* contact style */
#contact-page h2 { text-indent: -9999px; }


/* portfolio style */
.portfolio-row { width: 750px; }
.row-right { float: right; width: 351px; }
.row-left { margin-left: 5px; width: 351px; }
.row-left p, .row-right p { font-style: italic; width: 340px; padding-top: 15px; padding-left: 7px; }

/* about us style */
#about-page #left-col p { margin: 10px 0; }
#about-page #left-col { position: relative; left: 15px; }
#about-page #left-col ul { list-style-type: disc; position: relative; left: 20px; }
#about-page #left-col span { font-style: italic; font-weight: bold; }
#about-page #left-col a { font-weight: bold; text-decoration: underline; }
#about-page #left-col a:hover { text-decoration: none; }
#about-page h2 { background: url(../images/arq.png) no-repeat; text-indent: -9999px; }
#about-page #right-col { position: relative; top: 40px; }
#view-portfolio { position: relative; left: 40px; }

/* social section */
.follow { background: url(../images/follow-bg.png) repeat-y; width: 267px; padding: 10px; margin-bottom: 25px; position: relative; left: 20px; }
.follow-right { float: right; width: 184px; position: relative; right: 13px; }
.follow-left { float: left; width: 63px; }
.follow-links { margin-top: 7px; text-indent: -9999px; width: 58px; }
.follow-links li { float: left; display: inline; margin: 0 5px; position: relative; left: 2px; }
.follow-links a { display: block; }
.twitter { background: url(../images/twitter.png) no-repeat; width: 19px; height: 18px; }
.linkedin { background: url(../images/linkedin.png) no-repeat; width: 19px; height: 18px; }
.follow h4 { margin-bottom: 5px; width: 140px; height: 15px; text-indent: -9999px; }
#donny h4 { background: url(../images/dtop.png) no-repeat; }
#wesley h4 { background: url(../images/wtop.png) no-repeat; }
.contact-info { margin-top: 10px; }
.contact-info span { color: #cecece; }
.contact-info a:hover { text-decoration: underline; }
.contact-info img { position: relative; left: 25px; margin-bottom: 5px; }

/* Footer style */
#footer { margin-top: 20px; margin-bottom: 20px; }
#home-page #footer { margin-top: 8px; }
#footer-content { margin-left: 15px; }
#copyright { font-size: 1.1em; margin-top: 7px; margin-bottom: 10px; }
#footer #h-separator { margin-bottom: 16px; }
#footer-nav { float: right; font-size: 1.5em; position: relative; right: 5px; font-family: "Trebuchet MS"; }
#footer-nav li { padding: 0 10px; display: inline; }
#footer-nav li a:hover { color: #7c7c7c; }