/*
Theme Name: Klugebox
Theme URI: http://klugexl.com
Description: KlugeXL design platform for websites, based on the Starkers theme.
Version: 1.0
Author: Alan Gomes
Author URI: http://alangf.com
Tags: klugexl, alangf, template, starkers
*/

/* styling info:
H1: Josefin Sans Std, 72px, #000
H1: Josefin Sans Std, 36px, #000
a: Droid Sans, 14px, #d67d0d orange
a:hover: #83bdd3 blue
text: Droid Sans, 14px, #666
*/

/* main containers */
html, body { height: 100%; }
body { background: #FFF url(images/bg.jpg) center top no-repeat; height: 100%;}
body, textarea { font-family: 'Droid Sans', Arial; font-size: 14px; color: #666; }
.canvas { border-left: solid 3px #000; border-right: solid 3px #000; padding: 0 20px 0 20px;  width: 949px; margin: 0 auto; background: #fff; }
.container { height: 100%; }
.main { border-top: solid 1px #ddd;  }
.content { padding: 10px 0 10px 0; }

/* fonts & general styling*/
h1 { font-family: 'Josefin Sans', Arial, serif; font-size: 72px; color: #000;  }
h2, h2 a { font-family: 'Josefin Sans', Arial, serif; font-size: 36px; color: #000; margin: 0 0 5px; }
h3 { font-family: 'Josefin Sans', Arial, serif; font-size: 28px; margin: 0px 0 10px; font-weight: bold;}
a { color: #d67d0d; text-decoration: none; }
a:hover { color: #83bdd3; text-decoration: underline; }
input[type=submit] { cursor: pointer; color: #FFF; background: #FFF; height: 31px; border: 0; font-size: 18px; font-weight: bold; }
input[type=submit]:hover { color: #fff; background: #000;  }
ul { list-style: none; margin: 0; padding: 0; }
p { margin: 0 0 10px; }

.uppercase { text-transform: uppercase; }
.f_left { float: left; }
.f_right { float: right; }
.clear { clear: both; }
.important_clear { clear: both !important; }
.align_right { text-align: right; }
.clean_list { list-style: none; margin: 0; padding: 0; }
.black { color: #000; }
hr { border-bottom: solid 1px #ddd; height: 0; }
.short_hr { margin-bottom: 10px; }

/* header */
.header { margin: 78px 0 0; }
.header_logo_container { border-bottom: solid 1px #ddd; height: 266px; }
#header_logo { display: block; margin: 53px 0 0; text-indent: -9999px; width: 396px; height: 121px; background: url(images/logo.png); }
#header_title { margin: 34px 0 0; line-height: 0; }

/* menu header */
.menu_header { border-top: solid 1px #ddd; border-bottom: solid 1px #ddd; height: 266px; }
.menu_header .menu { margin: 30px 0 25px; }
.menu_header .menu li a { font-family: 'Josefin Sans', Arial, serif; color: #999; font-size: 24px; line-height: 21px; }
.menu_header .menu li a:hover, .menu_header .menu li.current-menu-item a { color: #d67d0d; text-decoration: none; }

/* content */
.post { border-bottom: solid 1px #ddd; margin: 0 0 20px; padding: 0 0 40px; }
.post:last-child { border: none; }
.post_meta, .post_meta a { color: #999; margin: 0 0 10px; }
.post_picture { width: 590px;  }
.post p:last-child a:last-child { display: none; }
.post h3:first-child { margin: 30px 0 20px; }

/* about */
.about_year { font-weight: bold; color: #83bdd3; }
.about_cell_1 { width: 212px; float: left; }
.about_cell_full { width: 555px; display: block; float: left; }

/* gallery */
h3.gallery_sidebar_title { line-height: 0; margin-bottom: 30px;  }
h3.gallery_title { margin-bottom: 20px;  }
#sidebar_gallery { margin: 20px 0; }
.gallery_main a img { width: 590px; border: solid 1px #ddd; }
.gallery_picture { width: 128px; height: 128px; border: solid 1px #ddd; overflow: hidden; margin: 0 18px 18px 0; float: left; }
.gallery_picture img { display: none;  }
.gallery_picture_last { margin: 0 0 18px 0 !important; }
.gallery_current { border: solid 2px #d67d0d; }
.gallery_list { margin: 10px 0 20px; }

/* contact form */
#text-name-contact, #email-contact-us, #text-area-contact { width:572px; background:#fff; color:#83bdd3; padding: 10px; font-family: 'Droid Sans', Arial;border: solid 1px #83bdd3; font-size: 14px; MARGIN: 0;}
#text-name-contact , #email-contact-us { height: 20px; margin-bottom: 5px; }
#submit-contact-us { cursor: pointer; text-indent: -9999px; background: #fff url(images/send.jpg) no-repeat 0px 0px; border: 0; width: 50px; height: 27px; margin-top: 10px; }
#submit-contact-us:hover { background-position: 0 -28px; }

/* sidebar */
.sidebar { padding-top: 20px; }
.sidebar_quote { text-align: center; margin-bottom: 20px; height: 100px; background: url(images/bg_text.jpg); padding: 48px 0px 0px 0px; }
.sidebar_quote_open { width: 310px; height: 36px; background: url(images/quote_open.png) left top no-repeat; margin: 0 0 10px; border: none; }
.sidebar_quote_close { width: 310px; height: 36px; background: url(images/quote_close.png) right top no-repeat; margin: 10px 0 0; border: none; }
#sidebar_gallery { margin: 20px 0; }
.sidebar_gallery_main a img { width: 310px; border: solid 1px #ddd; }
.sidebar_gallery_picture { width: 74px; height: 74px; overflow: hidden; margin: 0 4px 4px 0; float: left; }
.sidebar_gallery_picture img { display: none;  }
.sidebar_gallery_picture_last { margin: 0 0 4px 0 !important; }
.facebook_like { margin: 0 0 10px; }
#twitter_update_list { margin-bottom: 20px; }
#twitter_update_list li { margin: 0 0 20px;  background: url(images/tweetbox.png) no-repeat left bottom; border: none !important; width: 309px; height: 91px; }
#twitter_update_list li a { font-size: 100% !important; color: #F36D00; margin: 10px 0 5px 45px;}
#twitter_update_list li a:hover { color: #0e4d70; }
#twitter_update_list li span a { color: #666; display: inline; width: 100%; }
.tweet_container { margin: 5px; height: 65px; }
.tweet_container span { margin: 0 10px 10px 10px; display: block; padding-top: 5px; line-height: 18px; }
.tweet_container span a { margin: 0 !important; }

/* footer */ 
.footer { margin-bottom: 20px; border-top: solid 1px #ddd; }
.footer_kluge { text-align: left; width: 200px; height: 40px;  display: block; text-indent: -9999px; background: url(images/kluge_dark.png) 0px 0px; margin: 15px 0 0 30px; }

/* menu footer */
.menu_footer {  }
.menu_footer .menu { margin: 25px 0 25px; }
.menu_footer .menu li { float: left; padding: 0 20px 0 0; margin: 0 10px; border-right: solid 1px #666; line-height: 12px; }
.menu_footer .menu li:first-child { margin: 0 10px 0 0; }
.menu_footer .menu li a { text-decoration: none; font-family: 'Droid Sans', Arial, serif; color: #666; font-size: 13px;  }
.menu_footer .menu li a:hover, .menu_footer .menu li.current-menu-item a { text-decoration: underline; }