/* 
Copyright: MHunt Design
Author: Matthew Hunt
Date: July 4th, 2008
Last Updated: November 21, 2009
URL: http://mhuntdesign.com
Email: matt@mhuntdesign.com
*/

/*Colors
#ff5a00 mhunt orange
#1a2732 mhunt navy
#716e64 mhunt gray
#1a2732 gray-black
#363636 gray on black
*/

/*Reset CSS*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, em, font, img, small, strong, sub, sup, dd, dl, dt, li,ol, ul, hr, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; line-height: 1; text-align: left;}
a img, :link img, :visited img { border: 0; }
a {outline:none;}
table { border-collapse: collapse; border-spacing: 0; }
ol, ul {list-style: none;}
blockquote:before, blockquote:after,
q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

/*Global Text*/

body {
background:url("images/footer-copyright-repeat.gif") repeat scroll 0 0 transparent;
color:#3B3934;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:75.5%;
font-variant:normal;
font-weight:lighter;
position:relative;
}


p { margin:1em 0 1em 0; line-height:1.5; }
li {margin:1em 0; line-height:1.3; }
p, li {font-size:1.2em;}
em { font-style:normal;  background: url("images/neon_highlighter.png") 5% 5% repeat-x; font-weight:bolder;}
strong {letter-spacing:0.02em;}
big {font-size:1.6em;}
small {font-size:1em;}

img.left {
float: left;
margin:0 0.5em 0.5em 0;
border: 1px solid #363636;
}

/*Links*/
#content_wrapper a:link, 
#footer a:link { color:#ff5a00; outline:none; border-top:1px transparent dotted; border-bottom:1px transparent dotted; text-decoration:none;}

#content_wrapper ul#recent-articles-list li em a:after {
font:12px "Zapf Dingbats";
content: " \279C";
}


#content_wrapper a:visited, 
#footer a:visited { color:#ff5a00; outline:none;  border-bottom:2px transparent dotted; text-decoration:none;}
#content_wrapper a:active, 
#footer a:active {border-bottom:2px #1a2732 dotted; color:#716e64; outline:none; text-decoration:none;}
#content_wrapper a:hover { border-bottom:2px #1a2732 solid; outline:none; text-decoration:none; color: #1a2732;}
#footer a:hover {  border-bottom:2px #fff solid; outline:none; text-decoration:none; color: #fff;}

#content_wrapper a.noborder, 
#content_wrapper a:link.noborder, 
#content_wrapper a:visited.noborder, 
#content_wrapper a:active.noborder, 
#content_wrapper a:hover.noborder {border:none;}

a.footer-arrow {background-image:url("images/orange-arrow-footer.gif"); background-repeat:no-repeat; background-position: right 50%; padding-right:12px;}
a.content-arrow {background-image:url("images/orange-arrow.gif"); background-repeat:no-repeat; background-position: right 50%;  padding-right:12px;}
a.leftside-arrow {background-image:url("images/orange-arrow.gif"); background-repeat:no-repeat; background-position: left 50%;  padding-left:12px;}

/*General Classes*/
.clear {clear:both;}
.hidetext {text-indent:-9999px; overflow:hidden; display:block;}
.left {float:left;}
.right {float:right;}
.right-align {text-align:right;}
.left-align {text-align:left;}
.icon {float:right; padding:10px;}
.center {text-align:center; margin-left:auto; margin-right:auto; }

/*ClearFix*/
.clearfix:after { content: "."; color:#fff; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/*Main Containers*/
div#faux-body {  margin:0; padding:0; position:relative; background:#fff url("images/faux-body.png") repeat-x;}
div#wrapper {width:960px; padding:0 10px; margin:0 auto; text-align:center; position:relative;}
div#content_wrapper {width:940px; padding:0 10px 2em 10px; margin:2em auto 0 auto; text-align:center; position:relative; }
div.full_column { width:940px;}
div.left_column {float:left; width:610px;  padding-right:19px; border-right:1px #ccc solid; vertical-align: top;}
div.right_column {float:right; width:290px; vertical-align: top; }

div.single_column_short {float:left; width:145px; padding-left:10px; padding-right:10px;}
div.double_column { width:610px; }

div.single_column_left {float:left; width:284px; padding:5px 5px 5px 3px;}
div.single_column_right {float:right; width:284px; padding:5px 2px 5px 5px;}



#footer div.single_column_left { border-right:1px #363636 solid;  padding:0 17px; width:280px;}
#footer div.single_column_right { padding:0 15px; width:280px;}

/*Home Page*/
#content_wrapper div.single_column_left a img, #content_wrapper div.single_column_right a img {
border:3px #1a2732 solid; -moz-box-shadow:1px 1px 6px silver;  -webkit-box-shadow:1px 1px 6px silver;}
#content_wrapper div.single_column_left a:hover img, #content_wrapper div.single_column_right a:hover img {border:3px #ff5a00 solid; }
div#welcome-box { width:960px; height:71px; margin-bottom:20px; background:url("images/start-here-realign.png") no-repeat;  }
div#welcome-box p, div#welcome-box h3 {text-indent:-9990px; background:none;}


#featured-project {
padding-bottom: 10px;
}

#featured-project img {
 -moz-box-shadow:1px 1px 6px silver;  -webkit-box-shadow:1px 1px 6px silver;
}

/*Header and Logo*/
#header {height:84px; width:960px; position:relative; top:0; }
#header h1 {position:absolute; overflow:hidden; height:51px; width:219px; top:12px; left:10px;}
#header h1 span { background:url("images/mhuntdesign-logo.gif") no-repeat; position: absolute; height:51px;  width:219px; }
div#header h1 a {display:block; height:51px; width:219px; color:#fff; font-size:1px;}
div#header h2 {text-indent:-9999px;}
div#client-login {position:absolute; z-index:3; top:24px; left:812px; width:122px; height:26px;}

/*Headers - Content Areas*/
h1, h2, h3, h4, h5, h6 {color:#1a2732; }
h3 {font-size:2em; font-weight:600;  letter-spacing:.042em;}
h3.serif {font-family:Georgia, "Times New Roman", Times, serif; padding-top:10px; margin-bottom:15px; padding-left:12px; background: url("images/orange-arrow.gif") 0 0.75em no-repeat;}
h4 {font-size:1.6em; letter-spacing:.042em; padding-top:10px; font-weight:normal; margin-bottom:0.5em;}
h5 {font-size:16px; letter-spacing:.042em; padding-top:10px; font-weight:normal; margin-bottom:5px;}

h2.page-title {font-family:Georgia, "Times New Roman", Times, serif; font-size:4em; color:#222; font-weight:normal; letter-spacing:0.05em; margin-bottom:.5em;}

h3.sidebar-header {width:290px; height:40px; background-repeat:no-repeat; padding-left:0; margin-left:-5px;}
h3.services-available {background-image:url("images/services-available.png");}
h3.need-site {background-image:url("images/need-site.png");}
h3.redesign-site {background-image:url("images/redesign-site.png");}
h3.free-quote {background-image:url("images/free-quote.png");}
h3.extra-help {background-image:url("images/extra-help.png");}
h3.logo-design-small {background-image:url("images/logo-design-small.png");} 
h3.skills-expertise {background-image:url("images/skills-expertise.png");}
h3.about-project {background-image:url("images/about-project.png");}
h3.before {background-image:url("images/before.png");}
h3.pages { background-image:url("images/pages.png");}
h3.archives {background-image:url("images/archives.png"); }
h3.categories { background-image:url("images/categories.png");}
h3.recent-articles { background-image:url("images/recent-articles.png");}

h3.featured-work {background:url("images/featured-work.png") no-repeat; height:41px; width:610px; position:relative; margin-bottom:1em; margin-top: 0;}
h3.recent-blog-articles {background:url("images/recent-blog-articles.png") no-repeat; height:41px; width:610px; position:relative; margin-bottom:0; margin-top:1em;}
h3.web-design-view-more {background:url("images/web-design-view-more.png") no-repeat; height:41px; width:610px; position:relative; margin-bottom:1em; margin-top:1em;}
h3.website-design {background:url("images/website-design.png") no-repeat; height:41px; width:610px; margin-bottom:0; margin-top:1em; }
h3.web-design-dev {background:url("images/web-design-development.png") no-repeat; height:41px; width:610px; margin-bottom:0; margin-top:1em; }
h3.web-design-resources {background:url("images/web-design-resources.png") no-repeat; height:41px; width:610px; margin-bottom:0; margin-top:1em; }
h3.recommended-books-h3 {background:url("images/recommended-books-h3.png") no-repeat; height:41px; width:610px; margin-bottom:0; margin-top:1em; }

h3.web-design-view-more span a,
h3.header span a, h3.recent-blog-articles span a, h3.featured-work span a { height:24px; position:absolute; right:14px; top:5px;}
h3.web-design-view-more span a {width:168px;}
h3.featured-work span a {width:168px;}
h3.recent-blog-articles span a {width:98px;}

h4.footer-header { width:280px; height:30px; margin-top:0.5em; margin-bottom:0.5em; background-repeat:no-repeat;}
h4.for-web-designers { background-image:url("images/for-web-designers.png");}
h4.availability-meter { background-image:url("images/availability-meter.png");}
h4.about-mhunt { background-image:url("images/about-mhunt.png");}

#footer h5 {padding-top:0;}
#footer h5.link-header a { margin:0.0675em 0; background-repeat:no-repeat; background-position:0 0; display:block; height:53px; width:280px;  border:none;}
#footer h5.link-header a:hover {background-position:0 -53px;}
h5.latest-blog-posts a { background-image:url("images/latest-blog-posts.png");}
h5.recommended-books a {background-image:url("images/recommended-books.png");}
h5.web-resources a {background-image:url("images/web-resources.png");}

/*Lists*/
ul.services-list li { font-weight:bold; padding:0 10px 0 18px; height: 1%; background-image: url("images/orange-check.png"); background-position: 0 0.1em; background-repeat:no-repeat; }
#recent-articles { height:140px; padding-left:2em;}
#recent-articles em, #recent-articles-list em {background:none;}
#recent-articles a {background-image:url("images/orange-arrow.gif"); background-repeat:no-repeat; background-position:left 0.1em; padding-left:12px;}

/*Top Navigation*/
div#navigation {background:url("images/navigation-background.png") 0 0 no-repeat; position:relative; top:0px; height:54px; width:940px;}
ul#top_navigation li a { color:#1a2732; font-family:"Futura Medium","helvetica", "Futura","Trebuchet MS","bitstream vera sans", "Century Gothic", "AppleGothic", sans-serif; }
ul#top_navigation {height:54px; width:551px; left:395px; top:0; display:block; position:absolute; z-index:5; background: url("images/navigationBG.png") left bottom no-repeat; margin:0; padding:0;}
ul#top_navigation li {display:block; height:32px; float:left; width:87px; padding:0; margin:0.2em 1.2em 0 0;}
ul#top_navigation li a { letter-spacing:0.04em; line-height:32px; text-align:center; margin:0; text-decoration:none; font-size:1em; font-weight:600; color:#fff; height:32px;  display:block; width:87px;}
ul#top_navigation li a:hover {color:#ff5a00; }
ul#top_navigation li.home {margin-left:1.5em;}
body#home ul#top_navigation li.home a,
body#services ul#top_navigation li.services a,
body#portfolio ul#top_navigation li.portfolio a,
body#blog ul#top_navigation li.blog a,
body#contact ul#top_navigation li.contact a {background:url("images/selected.png") no-repeat; color:#000;}
body#home ul#top_navigation li.home a:hover,
body#services ul#top_navigation li.services a:hover,
body#portfolio ul#top_navigation li.portfolio a:hover,
body#blog ul#top_navigation li.blog a:hover,
body#contact ul#top_navigation li.contact a:hover {color:#000;}

/*Footer*/
div#footer { background:url("images/footer-repeat.gif"); margin:0 auto; text-align:center;}
div#footer-wrapper {margin:0 auto; text-align:center; width:960px;}
div#footer_content {width:940px; padding:0 10px; position:relative; margin:0 auto; text-align:center; }
div#footer div#footer_content p {color:#fff; line-height:1.8; }
div#footer_content, div#copyright {clear:both;}

#footer #copyright { background:url("images/footer-copyright-repeat.gif"); border-top:1px #363636 solid; height:50px; margin:0 auto; text-align:center;}
#footer #copyright p {color:#c1c1c1; font-family:Helvetica, Arial, Verdana, sans-serif; letter-spacing:0.08em; font-size:14px; text-align:center; }
#footer_content div.single_column_right p, #footer_content div.single_column_left p {margin-top:0; color:#fff; line-height:1.8; }

div#my-meter {margin-bottom:1em; position:relative;}
div#bar {width:280px; background:#fff; height:19px; position:relative;}
span.meter {display:none; width:0%; height:19px;}
span.meter-green {background:url("images/meter-green.png") repeat-x; width:20%;}
span.meter-lime {background:url("images/meter-lime.png") repeat-x; width:40%;}
span.meter-yellow {background:url("images/meter-yellow.png") repeat-x; width:60%;}
span.meter-orange {background:url("images/meter-orange.png") repeat-x; width:80%;}
span.meter-red {background:url("images/meter-red.png") repeat-x; width:100%;}

div.scale {margin-top:0.5em; position:relative; width:280px;}
div.scale span {position:absolute; color:#FFFFFF; font-size:1.2em; font-weight:bold;}
div.scale span.zero {left:-1%; }
div.scale span.one {left:19%; }
div.scale span.two {left:39%;}
div.scale span.three {left:59%;}
div.scale span.four  {left:79%;}
div.scale span.five {left:99%;}
div.scale span.free {float:left; position:static; margin-top:1.25em; background:url("images/free.png") no-repeat; height:10px; width:27px;}
div.scale span.booked {float:right; position:static; margin-top:1.25em; height:10px; width:46px; background:url("images/booked.png") no-repeat;}

a.social {
display:block;
font-size:19px;
font-weight:normal;
height:48px;
padding-left:54px;
padding-top:16px;
border:none 0 !important;
text-decoration: none !important;
}

a#twitter {
background:transparent url(images/mhuntdesign-website-twitter.png) no-repeat 0 0;
}

a#dellicious {
background:transparent url(images/dellicious.png) no-repeat 0 0;
}


a.social:hover {
border:none 0 !important;
text-decoration: none !important;
}

/*Forms*/
small.formcopyright {display:none;}

/*Client Quotes*/
blockquote, cite, blockquote p {line-height:1.4; color:#aaa; font-family:"Times New Roman", Times, serif; font-style:italic; font-size:14px;}
cite {display:block; margin-bottom:1em; color:#999; }
.rest-quote {display:none;}

/*Portfolio*/
ul.portfolio-projects li {border-bottom:1px solid #ccc; padding-bottom:0.5em;}
ul.portfolio-projects li p {font-size:1em;}
ul.portfolio-projects li a img {border:5px #716e64 solid;}
ul.portfolio-projects li a:hover img {border:5px #ff5a00 solid;}

#content_wrapper ul.portfolio-projects li a {border:none;} 
#content_wrapper ul.thumbnails a img {
border:2px solid #1a2732; 
text-align:center;
-moz-box-shadow: 1px 1px 6px silver;
}
#content_wrapper ul.thumbnails a:hover img {border:2px #ff5a00 solid;}

#portfolio h4+a,
#portfolio h4+a:hover {
border: 0 none !important;
}


#content_wrapper ul.thumbnails {margin-top:2em;}

#portfolio img.large {
border:5px solid #1a2732;
-moz-box-shadow: 1px 1px 6px silver;
}


#portfolio a:hover img.large {border:5px solid #ff5a00; }

#content_wrapper ul.thumbnails a {
  margin-right: 20px;
  margin-bottom:20px;
  display: block;
  float: left;
  width:100px;
  height:100px;
  text-align: center;
}
#content_wrapper ul.thumbnails li { width: 102px; height:102px; }

#content_wrapper ul.thumbnails {
  padding: 0;
  float: left;
  text-align: center;
  background-color: #fff;
  list-style: none;
  margin-bottom: 2em;
}

#content_wrapper ul.thumbnails li { 
display:block;
float:left;
height:100px;
margin:5px;
padding:5px;
width:100px;
}

/*Services*/
img.icons {float:right; margin:0 0.5em 0.5em 0; }
h4.service  {clear:both; font-family:Georgia, "Times New Roman", Times, serif; font-size:2em; color:#222; font-weight:normal; color:#1a2732; padding-top:0.5em; border-top:1px #ccc solid;}
h4.service.first {border:none;}
body#blog h2.article-title a:hover{border-bottom:2px #ff5a00 dotted;}


/*Contact*/

input.button {
padding:10px 40px !important;
font-size: 14px;
-moz-box-shadow:0 0 5px silver;
-webkit-box-shadow: 0 0 5px silver;
}
input.button:hover {
border: 1px solid #999;
}

input[type="text"], textarea, select {
-moz-box-shadow:0 0 3px silver;
-webkit-box-shadow: 0 0 3px silver;
}

textarea {
font-family: arial;
padding: 2px;
color: #575757;
}

p.specialmessage {
font-family:georgia;
font-size:16px;
line-height:2;
font-weight:normal;
color:#666;
}

p.specialmessage em {
background: #ddd;
text-decoration: none;
font-weight: normal;
}