/*
Theme Name: Forest Deer
Theme URI: http://www.hopkingdesign.com
Description: Forest Deer is a simple theme designed by Mez Hopking
Version: v1.0
Author: Mez Hopking
Author URI: http://www.hopkingdesign.com
*/

* {font-size: 1em; margin: 0 auto;	padding: 0; line-height: 1.4em; font-family: Helvetica, Arial, sans-serif;}
	
body {position: relative; margin: 0 auto; background: url(../images/layout/bg.png) top center repeat-x #FFF; color: #699ac8;}


#container {background: url(../images/layout/clouds.png) top center no-repeat; width: 100%; position: relative; margin: 0 auto;}
#page {position: relative; margin: 0 auto; width: 820px; background: transparent url(../images/layout/masthead.png) top center no-repeat; min-height: 302px;}

#nav {position: relative; float: right; padding: 0 20px 0 0;}

#page-content {position: relative; float: left; width: 820px; padding: 140px 0 0 0;}

#col-1 {position: relative; float: left; width: 440px; padding: 0 0 0 20px;}
#col-1_wide {position: relative; float: left; width: 780px; padding: 0 20px 20px 20px;}
#col-2 {position: relative; float: right; width: 320px;}
#work-right {position: relative; float: left; width: 300px;}
#work-left {position: relative; float: left; width: 480px}

#welcome {position: relative; width: 440px;}
#journal-home {position: relative; width: 440px; padding: 20px 0 0 0; clear: both}
#journal {position: relative; width: 440px; padding: 20px 0 0 0; clear: both}
#flickr {position: relative; width: 440px; padding: 50px 0 0 0; clear: both;}
#work {position: relative; float: left; width: 320px; padding: 50px 0 0 0;}
#delicious {position: relative; float: left; width: 320px; padding: 20px 0 0 0;}

/* Journal Related */

#journal-side {position: relative; float: left; width: 320px; padding: 50px 0 0 0;}
#journal-side_box {position: relative; float: left; width: 298px; background: url(../images/layout/box_work-bg.png) repeat; border: 1px solid #72a0cb; padding: 0 0 10px 0;}
#journal-side_box h5 {position: relative; float: right; width: 290px; padding: 8px 8px 8px 0; background-color: #d4e4f2; text-align: right; font-size: 80%; color: #699ac8;}
.journal-side_box2 {position: relative; float: left; width: 270px; border: 1px solid #d4e4f2; padding: 5px; margin: 8px; background-color: #fafbfd;}
* html .journal-side_box2 {position: relative; float: left; width: 252px; border: 1px solid #d4e4f2; padding: 5px; margin: 8px; background-color: #fafbfd;}

.journal-side_box2 li {list-style: none; font-size: 80%; border-bottom: 1px solid #72a0cb; padding: 2px 0 0 0; position: relative;}
.journal-side_box2 li a {text-decoration: none; color: #ff70a2}
.journal-side_box2 li:hover {border-bottom: 1px solid #ff0000; display: block;}
.journal-side_box2 li a:hover {color: #000;}

#journal-search {position: relative; float: left; width: 300px; margin: 0 0 5px 0;}
.search-box {background: #f2ffce; border: 1px solid #699ac8;font-size: 0.65em; color: #666666; width: 298px;}

#posts p, #col-1_wide p {color: #699ac8;}
#posts p a, #col-1_wide p a {color: #699ac8; text-decoration: none; border-bottom: 1px dotted #ff70a2}
#posts p a:hover, #col-1_wide p a:hover {color: #ff70a2; border-bottom: 1px dotted #699ac8;}

.details {margin: 5px 0 30px 0; padding: 0; border-top: 2px solid #e3ecf4; border-bottom: 4px solid #e3ecf4; color: #666666 !important; font-size: 80%;}
.details p a {border-bottom: none !important;}

.story p {color: #699ac8 !important; margin-bottom: -3px; line-height: 1.35em;}
.details p {color: #666 !important; text-decoration: none; padding-bottom: 5px !important; padding-top: 1px;}
.details p a {text-decoration: none; color: #7ca7cf;}
.posted {color: #aad92b;}
.comments {color: #ff70a2;}
.category {color: #7ca7cf !important;}
.readon {color: #ff70a2 !important; padding: 0 18px 0 0; background: url(../images/layout/arrow-readon.png) 98% 4px no-repeat;}
#journal .post p {color: #666 !important;}
#journal .post a {color: #666; text-decoration: none;}

#journal li {font-size: 80%; color: #888 }
#journal img {padding: 10px 0 10px 0;}
#journal ul {padding: 0 0 10px 0;}

.ardates li {padding: 3px 0 3px 0; border-bottom: 1px solid #d4e4f2; font-size: 100% !important; color: #699ac8 !important;}
.ardates-posted a {color: #888 !important}

/* Comments */

#comments {position: relative; width: 418px; border: 1px solid #e3ecf4; background-color: #fafbfd; padding: 10px; margin: 0 0 20px 0;}
#comments p {color: #699ac8 !important;}
#comments p a {color: #ff70a2; text-decoration: none;}
#comments p a:hover {color: #aad92b;}

.archive {position: relative; width: 396px; border: 1px solid #e3ecf4; padding: 10px; margin: 0 0 10px 0; background-color: #fbfcfe; clear: both;}

.entry p a {text-decoration: none; color: #ff70a2; position: relative;} 

li {list-style: none;}

textarea {padding: 2px; width: 438px; background: #f2ffce; border: 1px solid #b6d954;}

.comment-box {width: 436px; background: #f2ffce; border: 1px solid #b6d954;}

label {color: #699ac8; font-size: 90%; font-weight: bold;}
.req {color: #ff0000 !important;}

small {color: #666; font-size: 75%;}

/* Archive */

.ardates {font-size: 80%;}
.ardates a {color: #ff70a2; text-decoration: none;}
.ardates a:hover {border-bottom: 1px dotted #ff70a2;}

/* Contact and About */
.textarea {padding: 2px; width: 780px; background: #f2ffce; border: 1px solid #b6d954;}
.photo_of_me {position: relative; float: right; margin: 0 0 0 20px; border: 3px solid #699ac8}
#photo_of_me {position: relative; float: right; background: url(../images/layout/photo_of_mez.jpg) no-repeat 0 0; border: 4px solid #699ac8; margin: 0 0 20px 0; width: 325px; height: 433px;}


/* Portfolio Work */
 

.work-item {position: relative; float: left; padding: 10px 0 0 0;}
.work-img {position: relative; float: left; padding: 0;}
.work-info {position: relative; float: left; background: url(../images/layout/work_info-bg.png) 0 0 repeat-y; width: 339px; height: 103px; border-top: 1px solid #cbdaeb; border-right: 1px solid #cbdaeb; border-bottom: 1px solid #cbdaeb;}
.work-info_text {width: 290px; padding: 10px 10px 10px 39px;}

.work_bg_img {border: none; background: url(../images/layout/work_img-bg.png) no-repeat; padding: 12px 14px 12px 14px;}

.work-tab_web {float: right; height: 20px; width: 65px; background: url(../images/layout/work-tab_web.png) bottom right no-repeat; margin: 0 0 20px 0; display: block;}
.work-tab_brand {float: right; height: 20px; width: 65px; background: url(../images/layout/work-tab_brand.png) bottom right no-repeat; margin: 0 0 20px 0; display: block;}
.work-tab_identity {float: right; height: 20px; width: 65px; background: url(../images/layout/work-tab_identity.png) bottom right no-repeat; margin: 0 0 20px 0; display: block;}
.work-tab_personal {float: right; height: 20px; width: 65px; background: url(../images/layout/work-tab_personal.png) bottom right no-repeat; margin: 0 0 20px 0; display: block;}
.work-tab_print {float: right; height: 20px; width: 65px; background: url(../images/layout/work-tab_print.png) bottom right no-repeat; margin: 0 0 20px 0; display: block;}
 

/* Footer */

#footer {position: relative; float: left; width: 100%; height: 163px; background: url(../images/layout/footer-bg.png) repeat-x 0 0; margin: 60px 0 0 0; clear: both;}
#footer-bg {position: relative; float: left; margin: 0 auto; background: url(../images/layout/clouds-footer.png) no-repeat top center; height: 163px; width: 100%;}
#footer-content {position: relative; width: 780px; padding: 10px 0 0 0;}
#footer-info {position: relative; width: 440px; float: left;}
#footer-contact {position: relative; width: 300px; float: right;}

.footer-box {position: relative; float: left; padding: 0 40px 0 0;}
.footer-box2 {position: relative; float: right; padding: 0;}
.footer-box-contact {position: relative; float: left; padding: 0;}

.w3c {border: none !important; padding: 0 3px 0 3px;}
.mezhop {border: none !important;}

/* Boxes */

div.div-button_horiz a {display: block; width: 100px; height: 20px; float: right}
div.div-button_vert a {display: block; width: 19px; height: 80px; float: right}

#box_journal {position: relative; float: right; width: 440px; background: url(../images/layout/box_journal-bg.png) 0 0 repeat-y; border-top: 1px solid #72a0cb; margin: 10px 0 0 0; padding: 0px;}
#box_journal-bot {display: block; position: relative; float: left; width: 440px; height: 20px; background: url(../images/layout/box_journal-bot.png) 0 0 no-repeat; margin: 0 0 -4px 0;}
#box_journal-text {position: relative; float: left; padding: 2px 0 0 6px; margin: 0 0 -4px 0;}


#box_journal-text li {color: #fff; font-size: 90%; padding: 0 0 4px 0}
#box_journal-text li a {color: #fff; text-decoration: none;}

#box_journal-text span {padding: 0 25px 0 5px}


#box_flickr {position: relative; float: left; width: 438px; border: 1px solid #72a0cb; background: url(../images/layout/box_flickr-bg.png) repeat; overflow: hidden; padding: 10px 0 10px 0}
#box_flickr-bot {display: block; position: relative; float: left; width: 440px; height: 20px; background: url(../images/layout/box_flickr-bot.png) 0 0 no-repeat;}


#box_work {position: relative; float: left; width: 298px; background: url(../images/layout/box_work-bg.png) repeat; border: 1px solid #72a0cb;}
#box_work-more {position: relative; float: right; width: 20px; height: 78px; background: url(../images/layout/work-more.png) top left no-repeat;}
#box_delicious-more {position: relative; float: right; width: 20px; height: 78px; background: url(../images/layout/delicious-more.png) top left no-repeat;}


/* Index work list */

.worklist {position: relative; float: left; list-style: none; padding: 7px 0 7px 6px;}

.worklist li {float: left; text-decoration: none; color: #fff; text-decoration: none; padding: 0 0 10px 0;}
.worklist li a {text-decoration: none;  background: url(../images/layout/box_work-bg2.png) repeat; color: #fff; float: left; position: relative; width: 284px; padding: 0 0 5px 0; display: block; border: 1px solid #fff;}
.worklist li a:hover {background: url(../images/layout/box_work-bg2-hover.png) repeat;}

#work img {position: relative; float: left; margin: 0 4px 4px 4px;}
.border-blue {border: 1px solid #4373af;}
.border-wht {border: 1px solid #fff;}

.border-blue a:hover, .border-wht a:hover {border: 1px solid #ff71a3;}


.worklist span {position: relative;}
.work-title {font-size: 80%; font-weight: bold; color: #4373af; padding: 5px 0 5px 5px;}
.work-title_work {font-size: 80%; font-weight: bold; color: #4373af; padding: 0 5px 5px 0;}
.work-title_work span {border-left: 1px solid #4373af; color: #ff3983; padding: 0 8px 0 5px; font-size: 85%; font-weight: normal; letter-spacing: 2px; background: url(../images/layout/work_title-arrow.png) 98% 2px no-repeat;}
.work-desc {font-size: 80%; line-height: 1.1em; padding: 0 5px 5px 0;}


/* Menu */

#nav ul {display: inline; list-style: none;}
#nav li span {display: none;}
#nav li {display: inline;}

#nav1 a {background: url(../images/layout/nav-home.gif) top left no-repeat; width: 22px; height: 186px; margin: 0 5px 0 0; float: left;}
#nav1 a:hover {background: url(../images/layout/nav-home_hover.gif);}

#nav2 a {background: url(../images/layout/nav-work.gif) top left no-repeat; width: 22px; height: 186px; margin: 0 5px 0 0; float: left;}
#nav2 a:hover {background: url(../images/layout/nav-work_hover.gif);}

#nav3 a {background: url(../images/layout/nav-journal.gif) top left no-repeat; width: 22px; height: 186px; margin: 0 5px 0 0; float: left;}
#nav3 a:hover {background: url(../images/layout/nav-journal_hover.gif);}

#nav4 a {background: url(../images/layout/nav-about.gif) top left no-repeat; width: 22px; height: 186px; margin: 0 5px 0 0; float: left;}
#nav4 a:hover {background: url(../images/layout/nav-about_hover.gif);}

#nav5 a {background: url(../images/layout/nav-contact.gif) top left no-repeat; width: 22px; height: 186px; margin: 0; float: left;}
#nav5 a:hover {background: url(../images/layout/nav-contact_hover.gif);}


/* Typeography */

p {text-align: justify; font-size: 80%; padding: 0 0 10px 0;}
p a {text-decoration: none; color: #ff3983}
p a:hover {background: #cfdbe9; color: #507699;}
.client {color: #8db3d6;}

#journal-home p {color: #FFF; margin-bottom: -3px; line-height: 1.35em;}

#footer p {font-size: 70%;;color: #507699;}
#footer p a {color: #507699; text-decoration: none;}
#footer p a:hover {background: #cfdbe9}

.client-arrow {font-weight: bold; color: #8db3d6; background: url(../images/layout/arrow.png) left no-repeat; padding: 0 0 0 10px;}

.silkscreen {font-size: 1px; color: #ff71a3;}

.recent-projects {float: right; color: #ba3e86; padding: 5px 5px 0 0; font-size: 90%;}

.recent {padding: 7px 7px 0 0; float: right !important}

h1 {font-size: 140%; padding: 0 0 5px 0; color: #bfff14}
h2 {font-size: 80%; padding: 0 0 5px 0; color: #8fb3d6}
h3 {font-size: 60%; padding: 0 0 5px 0; color: #ff3983}
h4 {font-size: 70%; padding: 0 0 0 0; color: #ff3983;}
h5 {font-size: 70%; padding: 0 0 0 0; color: #507699;}

.worklist span {position: relative;}
.work-title {font-size: 80%; font-weight: bold; color: #4373af; padding: 5px 0 5px 5px;}
.work-title_work {font-size: 80%; font-weight: bold; color: #4373af; padding: 0 5px 5px 0;}
.work-title_work span {border-left: 1px solid #4373af; font-size: 85%; font-weight: normal; letter-spacing: 2px; background: none;}
.work-title_work span a {border-bottom: 0 !important; color: #ff3983 !important; background: url(../images/layout/work_title-arrow.png) 98% 2px no-repeat; padding: 0 8px 0 5px; }
.work-title_work a {text-decoration: none; color: #ff3983;} 
.work-desc {font-size: 80%;  padding: 0 5px 5px 0;}

em {font-style: normal;}

.work-info_text p {font-size: 70%;}

/* Microformat stuff */

.vcard p {padding: 0px}
.hidden {display: none}

/* Form */

.name, .e-mail {padding: 2px 0px 2px 5px; color: #507699; border: 1px solid #507699; background: #fff;}

/* Flickr */

#flickr img {border: 1px solid #fff;}

.flickr_badge_image a {float: left; display: block; margin: 0 .2em 0 .2em; overflow: hidden; border: 1px solid #fff;}
.flickr_badge_image a img {float: left; overflow: hidden; margin: -1px;}

.flickr_badge_image a:hover {border: 4px solid #fff;}
.flickr_badge_image a:hover img {margin: -4px;}

#flickr_badge_image1 {padding: 0 0 0 10px;}

/* Delicious */

#box_delicious li {list-style: none;}
.delicious-posts {border-left: 1px solid #72a0cb; border-right: 1px solid #72a0cb; border-bottom: 1px solid #72a0cb; padding-bottom: 3px; width: 298px; float: left;}
.delicious-post {border-top: 1px solid #72a0cb; padding: 5px 6px 6px 30px; margin: 0 0 -3px 0; font-size: 75%; width: 262px; background: url(../images/layout/delicious-even.png) no-repeat bottom left #cfdbe9;}
.delicious-odd {background: url(../images/layout/delicious-odd.png) no-repeat bottom left #efffc3; }
.delicious-posts a:hover {text-decoration: none; color: #ff3983; }
.delicious-posts a {text-decoration: none; color: #54677f; display: block;}
.delicious-post a {color: #54677f }



/* These are standard sIFR styles... do not modify */

.sIFR-flash {visibility: visible !important; margin: 0;}

.sIFR-replaced {visibility: visible !important;}

span.sIFR-alternate {position: absolute; left: 0; top: 0; width: 0; height: 0; display: block; overflow: hidden;}

/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
.sIFR-flash + div[adblocktab=true] {
  display: none !important;
}

.sIFR-hasFlash h3 {
}