/* ---------------- GLOBAL RESET ---------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, button {
margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;}
ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
blockquote:before, blockquote:after,
q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
/* End Reset */


/* ---------------- BASIC STRUCTURE ---------------- */

body { border-top: solid 60px #13A5A2; background: #FFFEEA; font: 14px Helvetica, Arial, Sans-Serif; color: #192633;}
#wrap { margin: 0 auto; margin-top: -60px; width: 940px;  }
#content { padding-top: 140px;  }

.float-left { float: left; }
.float-right { float: right; }
.img-right { float: right; padding: 0 0 20px 20px; }
.img-left { float: left; padding: 0 20px 20px 0; }
.clearfix { display:inline-block;}

.section { width: 620px; display: inline-block; text-align: left; margin-left: 20px;}
.side-section { width: 300px; float: left; margin-top: 25px; }

.force-height {min-height: 500px;}

#footer { margin: 0 auto; background: #13A5A2 url(images/footer-point.png) top repeat-x; width: 950px; height: 100px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomleft: 0px; -moz-border-radius-bottomright: 0px; display: block; margin-top: 70px;}

/* ---------------- TYPOGRAPHY ---------------- */

@font-face { font-family:'Megalopolis'; src: url('images/MEgalopolisExtra.otf') format('opentype'); }

.tagline { width: 540px; float: left; display: block; font-family: "Megalopolis", Helvetica, Arial, Sans-Serif; font-size: 68px; letter-spacing: -.06em; color: #13A5A2; margin-bottom: 25px; }
.red {color: #F26363; }

h1 { font-family: "Megalopolis", Helvetica, Arial, Sans-Serif; font-size: 60px; letter-spacing: -.06em; color: #F26363; margin-bottom: 20px; background:url( images/line-break.png) bottom left no-repeat;  }
h2 { font-family: "Megalopolis", Helvetica, Arial, Sans-Serif; font-size: 30px; letter-spacing: -.06em; padding-bottom: 10px; margin-bottom: 20px; background:url( images/line-break2.png) left bottom no-repeat;}

.blog-item h2 {background: none; position: relative; }
.blog-item h2 a {border-bottom: dashed 2px #F26363; color: #13A5A2; text-decoration: none; display: block; width: 620px;}
.blog-item h2 a:hover {border-bottom: dashed 2px #13A5A2; color: #F26363; text-decoration: none;}
.blog-item h2 span { font-size:14px; font-family: Helvetica, Arial, Sans-Serif; font-weight: bolder;  letter-spacing: .1em; color: #D2D1C0; background: none; position: absolute; bottom: 15px; right: 0px;  }

#default h2 { font-family: "Megalopolis", Helvetica, Arial, Sans-Serif; font-size: 30px; letter-spacing: -.06em; margin: 20px 0px; background: none;}


h4 { line-height: 25px; letter-spacing: .01em; color: #192633; font-weight: bolder; }

p a, .bullets a { line-height: 25px; letter-spacing: .01em;  color: #13A5A2; border-bottom: dashed 1px #F26363; text-decoration: none;  }
p a:hover, .bullets a:hover { line-height: 25px; letter-spacing: .01em;  color: #F26363; border-bottom: dashed 1px #13A5A2; text-decoration: none;  }

p { line-height: 25px; letter-spacing: .01em; color: #192633; }
.profile p{ line-height: 25px; letter-spacing: .01em; color: #FFFEEA; padding: 35px 100px 35px 60px; }

#footer ul, #footer p {font: 11px Helvetica, Arial, Sans-Serif; color: #FFFEEA; display: block; }

/* ---------------- NAVIGATION ---------------- */

.main-nav { float: right; margin-top: 15px; position: relative; }
.main-nav li { float: left; }
.main-nav li a { display: block; text-align: center; width: 80px; padding: 11px 0px; color: #FFFEEA; font-weight: bold; float: left; text-decoration: none; z-index: 10; position: relative; overflow: hidden; }


body#default ul.main-nav li a.home,
body#about ul.main-nav li a.about,
body#portfolio ul.main-nav li a.portfolio,
body#contact ul.main-nav li a.contact,
body#blog ul.main-nav li a.blog,
.main-nav li a:hover,
.main-nav li a:active  { color: #F26363;}
.main-nav li.back { background: url( images/nav-highlight.png) no-repeat center; height: 35px; z-index: 8; position: absolute; }

.branding { width: 300px; height: 110px; background: url( images/branding.png); text-indent: -9999px; position: absolute; }

#footer ul, #footer p { margin: 0 auto; width: 400px; padding-top: 80px; text-align: center; }
#footer ul li { float: left; width: 80px; display: block;  text-align: center; }
#footer ul li a {  text-decoration: none;  color: #FFFEEA; border-bottom: dashed 1px #FFFEEA; }
#footer ul li a:hover {  text-decoration: none;  color: #FFFEEA; border-bottom:none; }

/* ---------------- INDIVIDUAL PAGE ELEMENTS ---------------- */

.error-elephant { width: 396px; height: 509px; display: block; background: url(images/error-elephant.png); margin-top: -50px;}

.elephant { width: 365px; height: 509px; display: block; background: url( images/elephant.png); margin-top: -50px;  }
.home-section { width: 505px; }

.profile {background: url( images/profile.png) no-repeat; height: 210px; margin-top: 50px; }

#content-bottom { width: 940px;clear:both; margin-bottom: 30px; margin-top: 20px;}
.col1 { width: 300px; float: left; margin: 0 20px 0 0;position: relative; z-index: 10001;}
.col2, .col3 { width: 300px; float: left;}
.col2 { margin-right: 20px;}

li.facebook { background:url( images/facebook-elephant.png) center left no-repeat; padding: 45px 0px 45px 120px; }
li.delicious { background:url( images/delicious-elephant.png) center left no-repeat; padding: 45px 0px 45px 120px; }
li.twitter { background:url( images/twitter-elephant.png) center left no-repeat; padding: 45px 0px 45px 120px; }
.facebook a, .delicious a, .twitter a { color: #13A5A2; border-bottom: dashed 1px #F26363; text-decoration: none; }
.facebook a:hover, .delicious a:hover, .twitter a:hover { color: #F26363; border-bottom: dashed 1px #13A5A2; text-decoration: none;}

.bullets li { background:url( images/bullet.png) center left no-repeat; padding: 5px 0px 5px 20px; margin-top: -5px;  }

.portfolio-item {width:200px; float: left; display: block; margin: 0 10px 17px 0; text-align: center;}
.last { margin: 0;}

.project-info {width: 220px; display: inline-block;}
.project-image { width: 380px; float: left; margin: 0px 20px 20px 0px;}

.blog-item { display: block; width: 620px;}


.contact-form li input { width: 440px; padding: 20px 0px 20px 15px; background: #ffffff; border: none; display: block; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; margin: 15px 0px; vertical-align: middle; }
.contact-form li textarea { width: 420px; height: 160px; padding: 20px 20px 20px 20px; background: #ffffff; border: none; display: block; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; margin: 15px 0px;  vertical-align: middle;}
input, textarea { color:#13A5A2; font-size: 14px; font-family: Helvetica, Arial, sans-serif; }
.contact-form { margin-top: 20px;}
button { background: url( images/send.png); height: 58px; width: 460px; display: block; text-indent: -9999px; cursor:pointer;}