/*
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.6.0
*/
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}del,ins{text-decoration:none;}


html {
  background-color: #000;
} 

.clear {
  clear: both;
}

#page {
  top: 0px;
  left: 0px;
  height: 500px;
  position: relative;
  background: transparent url(../img/shell/top_bar_bg.jpg) 50% 0px repeat-x;
  min-width: 820px;/* Safari */
}

#mast {
  position: relative;
  width: 800px;
  margin: 0px auto;
}
  #mast p {
    position: absolute;
    left: 250px;
    top: 45px;
    color: #fffb81;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-style: italic;
    font-size: 110%;
    line-height: 100%;
    text-indent: -6px;
  }

#home a {
  position: absolute;
  left: 30px;
  width: 140px;
  height: 56px;
  display: block;
  outline: none;
  text-indent: -9999px;
}

#menu {
  height: 140px;
  width: 800px;
  background: transparent url(../img/shell/menu_bg.jpg) 50% 0px no-repeat;
}

  #menu ul {
    list-style: none;
    position: relative;
    top: 90px;
    text-indent: -9999px;/* Hide text */
  	overflow: hidden;/* Safari */
  }
  
  #menu ul li {
    width: 200px;
    height: 70px;
    float: left;
  }
  
    #menu ul li a {
      display: block;
      height: 70px;
      text-indent: -9999px;
      background: transparent 0px 0px no-repeat;
    }
  
  #menu ul.none_selected li a {
    background-image: url(../img/shell/buttons_none.jpg);
  }
  #menu ul.portfolio_selected li a {
    background-image: url(../img/shell/buttons_portfolio.jpg);
  }
  #menu ul.blog_selected li a {
    background-image: url(../img/shell/buttons_blog.jpg);
  }
  #menu ul.about_selected li a {
    background-image: url(../img/shell/buttons_about.jpg);
  }
  #menu ul.contact_selected li a {
    background-image: url(../img/shell/buttons_contact.jpg);
  }
  
  #menu li.portfolio a       { background-position: 0px 0px; }
  #menu li.portfolio a:hover { background-position: 0px -70px; }
  
  #menu li.blog a            { background-position: -200px 0px; }
  #menu li.blog a:hover      { background-position: -200px -70px; }
  
  #menu li.about a           { background-position: -400px 0px; }
  #menu li.about a:hover     { background-position: -400px -70px; }
  
  #menu li.contact a         { background-position: -600px 0px; }
  #menu li.contact a:hover   { background-position: -600px -70px; }

strong {
  font-weight: bold;
}

a {
  outline: none;
}

label {
  font-size: 100%;
  font-weight: bold;
  color: #607110;
}

.meta {
  color: #888;
  font-size: 12px;
  font-weight: normal;
}
  #blog_main .meta a:link {
    color: #888;
    text-decoration: underline;
  }
  #blog_main .meta a:visited {
    color: #888;
    text-decoration: underline;
  }
  #blog_main .meta a:hover {
    color: #607110;
    text-decoration: underline;
  }

span.user.name {
  font-weight: bold;
}
span.user.role {
  font-size: 10px;
  padding: 1px 3px;
  background: #999;
  border: 1px solid #666;
  color: #ddd;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
}

#client_menu {
  top: 55px;
  position: relative;
  margin: 0px auto;
  padding: 0px 10px;
  width: 800px;
  background: #07182e;
}
  #client_menu li {
    display: inline;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 70%;
    color: #999;
  }
    #client_menu li a {
      line-height: 30px;
      margin: 0px 10px;
      color: #fff;
      text-decoration: none;
    }
    #client_menu li a:hover {
      color: #a9c720;
    }

#content {
  top: 70px;
  position: relative;
  margin: 0px auto;
  padding: 20px;
  width: 760px;
  background: #fff;
  border: 10px solid #153e6f;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

#foot {
  position: relative;
  top: 80px;
  margin: 0px auto;
  padding: 20px 0px;
  width: 800px;
}
  #foot p {
    text-align: right;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 70%;
  }
    #foot p a {
      padding: 6px 10px;
      background-color: #153e6f;
      color: #fff;
      text-decoration: none;
    }
    #foot p a:hover {
      color: #a9c720;
      background-color: #07182e;
    }

#breadcrumbs {
  background: #c0d6f0;
  position: relative;
  top: -20px;
  left: -20px;
  font-size: 11px;
  font-weight: bold;
  padding: 10px 20px;
  width: 760px;
  border-bottom: 1px solid #153e6f;
}
  
  #content ul li {
    list-style: circle outside;
    margin: 4px 0px 4px 30px;
  }
  
  #content h1 {
    font-size: 230%;
    font-weight: bold;
    letter-spacing: -2px;
    color: #153e6f;
    margin: 0px 0px 10px 0px;
  }

  #content h2 {
    font-size: 140%;
    color: #607110;
    margin: 10px 0px;
  }
  #content h2.section {
    border-bottom: 1px solid #a9c720;
  }
  
  #content h3 {
    font-size: 120%;
    color: #999;
    margin: 10px 0px;
  }

  #content p {
    margin: 10px 0px;
    line-height: 20px;
    font-size: 13px;
    color: #000;
  }
  
  #content blockquote {
    padding: 20px;
    margin: 20px;
    color: #444;
    background-color: #eee;
  }

  #content textarea {
    font-family: Monaco, Courier, monospace;
    width: 100%;
  }
  
  #content a:link {
    color: #153e6f;
    text-decoration: none;
  }
  #content a:visited {
    color: #153e6f;
    text-decoration: none;
  }
  #content a:hover {
    color: #a9c720;
    text-decoration: underline;
  }
  
  #content h2 a:link {
    color: #607110;
    text-decoration: none;
  }
  #content h2 a:visited {
    color: #607110;
    text-decoration: none;
  }
  #content h2 a:hover {
    color: #a9c720;
    text-decoration: underline;
  }

/********************************
* Home Page
*/
#portfolio_synopsis {
  float: left;
  width: 364px;
}

#blog_synopsis {
  float: right;
  width: 364px;
}

#portfolio_synopsis p, #blog_synopsis p {
  font-size: 13px;
  text-align: right;
  margin: 5px 10px;
}

.home_project {
  margin: 20px 0px;
}
  .home_project a {
    font-size: 110%;
    text-decoration: none;
  }
  .home_project img {
    float: left;
    margin-top: -5px;
    margin-right: 10px;
  }
  #content div.home_project p {
    line-height: 95%;
  }
  .home_project span {
    font-size: 80%;
    color: #888;
  }

.home_article {
  margin: 20px 0px;
}
  #content div.home_article p {
    line-height: 95%;
  }
  .home_article a {
    font-size: 110%;
    text-decoration: none;
  }
  .home_article span {
    font-size: 80%;
    color: #888;
  }

/******************************
* Portfolio Main Page
*/
/* Portfolio page */
.list_large_project {
  padding: 10px;
}
.list_large_project.alt {
  background: #f3f3f3;
}
  #content .list_large_project p {
    margin: 0px;
    font-size: 13px;
  }
  .list_large_project p a .title {
    font-size: 180%;
    font-weight: bold;
    text-decoration: none;
  }
  .list_large_project p a img.icon {
    float: left;
    margin-right: 15px;
  }

/* Porfolio/Projects Show */
#content.portfolio_projects_show h1 {
  margin-bottom: 0px;
}
#content.portfolio_projects_show p.meta {
  margin: 0px 0px 20px 5px;
  font-size: 12px;
  color: #666;
}
#content.portfolio_projects_show .content {
  margin-top: 20px;
  border-top: 1px solid #a9c720;
  clear: both;
}
#content.portfolio_projects_show .content p {
  margin: 20px 40px;
  font-size: 13px;
}
#content.portfolio_projects_show img.feature {
  background: #f3f3f3;
  border: 1px solid #ddd;
  padding: 5px;
  margin-bottom: 5px;
  float: right;
}
/* Project show meta links */
#content.portfolio_projects_show a.meta {
  font-size: 11px;
  font-weight: bold;
  float: left;
  display: block;
  text-decoration: none;
  padding-left: 22px;
  margin-right: 15px;
  line-height: 20px;
  background-repeat: no-repeat;
  background-color: transparent;
}
  /* Live Example Meta Link */
  #content.portfolio_projects_show a.meta.live_example {
    background-image: url(../img/shell/project_meta_icons.png);
    background-position: 0px 0px;
    background
  }
  #content.portfolio_projects_show a.meta.live_example:hover { background-position: 0px -20px; }
  /* Open Source Meta Link */
  #content.portfolio_projects_show a.meta.open_source {
    background-image: url(../img/shell/project_meta_icons.png);
    background-position: 0px -40px;
  }
  #content.portfolio_projects_show a.meta.open_source:hover { background-position: 0px -60px; }

#content p.synopsis {
  margin: 15px 0px;
}
  #content p.synopsis span {
    display: block;
    color: #666;
    font-style: italic;
    font-size: 80%;
  }

#content h2.portfolio {
  margin-bottom: 30px;
}

#content h2.blog {
  margin-bottom: 30px;
}

/* Contact */
#content.pages_contact {
  background: #fff url(../img/shell/contact_page_bg.jpg) no-repeat 100% 30%;
}

#content.pages_contact ul#contact_social {
  width: 400px;
}
#content.pages_contact ul#contact_social li {
  display: block;
  float: left;
  margin: 0px;
  width: 20%;
  text-align: center;
}

#contact_form {
  width: 350px;
}
#contact_form .error {
  background-color: #f99;
}
#contact_form input.user {
  font-size: 140%;
  padding: 5px;
  width: 340px;
}
#contact_form textarea {
  font-size: 140%;
  padding: 5px;
  width: 340px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
#contact_form p.form_control {
  text-align: right;
}
#contact_form p.form_control input.submit {
  font-size: 80%;
}

#contact_thanks {
  margin: 30px 0px;
}

/* Blog */
#blog_main {
  float: left;
  width: 580px;
}
  #blog_main h3 {
    font-weight: bold;
    font-size: 105%;
  }
  #blog_main a:link {
    text-decoration: underline;
  }

.list_article {
  background: transparent url(../img/shell/list_article_icon.png) no-repeat 1% 50%;
  padding: 10px 0px 10px 46px;
}
.list_article.alt {
  background-color: #f9f9f9;
}
  #content .list_article p.date {
    font-size: 12px;
    line-height: 14px;
    color: #666;
    margin: 0px;
  }
  .list_article h3 {
    margin: 0px;
  }

#blog_side {
  float: right;
  margin-top: 50px;
  width: 140px;
  color: #153e6f;
  font-size: 12px;
}
  #blog_side h4 {
    font-weight: bold;
    font-size: 110%;
    color: #326eb6;
  }
  #blog_side p {
    line-height: 120%;
  }
  #blog_side div {
    margin: 10px 0px;
  }
  #blog_side a:hover {
    color: #000;
  }

#content.blog_index, #content.blog_article, #content.blog_index, #content.blog_archive, #content.blog_tag, #content.blog_tag_list {
  background: #fff url(../img/shell/blog_bg.png) 100% 0% repeat-y;
}

#content #blog_main .article_contents p {
  line-height: 170%;
  font-size: 13px;
  margin: 20px 0px;
}

#content #blog_main .article_contents li {
  line-height: 170%;
  font-size: 13px;
}

#blog_main .article_contents img {
  display: block;
  margin: 20px auto;
}

#blog_main .article_contents ol li {
  list-style-type: decimal;
  margin: 8px 5px 8px 45px;
  line-height: 170%;
}

#blog_main .article_contents code {
  font-family: Monaco, Courier, monospace;
}

#blog_main .article_contents pre.blackboard {
  font-family: Monaco, Courier, monospace;
  font-size: 11px;
  line-height: 18px;
  padding: 5px 10px;
  margin: 0px -3px 0px -3px;
  overflow: auto;
}

#blog_main .details {
  padding: 10px;
  background: #f3f3f3;
}
  #blog_main .details p {
    margin: 0px;
    color: #999;
  }

/* Blog Figures */
#blog_main .figure {
  display: block;
  padding: 10px;
  margin-left: -10px;
  margin-right: -10px;
  border: 1px solid #ccc;
}
  #blog_main .figure .caption {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    font-style: italic;
    color: #444;
    text-align: center;
  }

#blog_main p.tags {
  font-size: 12px;
  line-height: 16px;
  padding: 0px;
  color: #999;
}
  #blog_main .tags .tag {
    padding: 3px 5px;
    display: block;
    float: left;
  }
  #blog_main .tags .tag:hover {
    background-color: #153e6f;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    text-shadow: #000 0px -1px 0px;
  }
    #blog_main .tags .tag a {
      font-size: 12px;
      font-weight: bold;
      text-decoration: none;
      padding-left: 18px;
      background: transparent url(../img/shell/tag_icon.png) 0px 0px no-repeat;
    }
    #blog_main .tags .tag:hover a {
      background-position: 0px -16px;
      color: #a9c720;
    }

/* Blog Comments */
#blog_main .comment {
  padding: 10px;
}
#blog_main .comment a:link,
#blog_main .comment a:visited {
  text-decoration: underline;
}
#blog_main .comment.alt {
  background: #f9f9f9;
  border-top: 1px solid #ddd;
}
  #blog_main .comment .header {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px;
    margin: 3px 0px 0px 0px;
  }
    #blog_main .comment .header li {
      list-style: none;
      display: block;
      margin: 0px;
      padding: 4px;
      line-height: 13px;
    }
  #blog_main .comment .header .label {
    display: block;
    float: left;
    width: 40px;
    margin-right: 10px;
    text-align: right;
    color: #666;
    font-weight: bold;
  }
  #blog_main .comment blockquote {
    margin: 5px;
    padding: 0px 10px;
    background: transparent;
    border-left: 1px solid #999;
  }
  #blog_main .comment blockquote p {
    font-style: italic;
    color: #666;
  }
  #blog_main .comment .comment_body code {
    font-family: Monaco, Courier, monospace;
    font-size: 11px;
  }
  #blog_main .comment .gravatar {
    float: left;
  }
  #blog_main .comment .comment_body {
    margin-top: 10px;
    margin-left: 58px;
    border-top: 1px solid #ccc;
  }
  #blog_main .notices {
    border: 1px solid #0d0;
    background: #cfc;
    padding: 10px;
    margin-bottom: 10px;
  }
  
  /* Comment posting form */
  #new_comment_form {
    border-top: 1px solid #ccc;
    padding: 10px;
    background: #f3f3f3;
    margin-top: 20px;
  }
  #new_comment_form h3 {
    margin-top: 0px;
  }
  #new_comment_form label.oneline {
    display: block;
    width: 55px;
    float: left;
    line-height: 30px;
  }
  #new_comment_form .fieldWithErrors label {
    font-size: 12px;
  }
  #new_comment_form .field_details {
    display: block;
    font-size: 11px;
  }
    #new_comment_form .field_details.oneline {
      margin-left: 55px;
    }
  #new_comment_form .fieldWithErrors input,
  #new_comment_form .fieldWithErrors textarea {
    border: 1px solid #f00;
  }
  #new_comment_form .control {
    margin-top: 15px;
    text-align: right;
  }
  #new_comment_form input[type=text] {
    padding: 5px;
  }
  #new_comment_form .errors {
    border: 1px solid #d00;
    background: #fcc;
    padding: 10px;
    margin-bottom: 10px;
  }
  #new_comment_form .errors p {
    margin: 0px;
  }
  #new_comment_form .errors ul {
    font-size: 12px;
  }

.project_image {
  float: left;
  text-align: center;
  padding: 5px;
  margin: 5px;
  background: #f3f3f3;
  border: 1px solid #ddd;
}
  .project_image a {
    font-size: 11px;
  }

#content.admin_articles_index .article {
  margin-bottom: 10px;
  padding: 3px 2px;
}
#content.admin_articles_index .article.alt {
  background: #f6f6f6;
}
#content.admin_articles_index .article p {
  margin: 0px;
}
#content.admin_articles_index .article p.controls {
  font-size: 11px;
}

/* reCAPTCHA */
.recaptchatable .recaptcha_image_cell, #recaptcha_table {
  background-color: #eee;
}
#recaptcha_table {
  width: 100%;
  border-color: #999;
}
#recaptcha_response_field {
  border-color: #ddd;
  background-color:#fff;
}

/*
  ColorBox Core Style
  The following rules are the styles that are consistant between all ColorBox themes
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative; overflow:visible;}
#cboxLoadedContent{overflow:auto;}
#cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}

/* 
  Custom styles.
*/
#cboxOverlay{
  background: #000;
}
#cboxContent {
  padding: 24px 20px 24px 20px;
  font-family: 'Helvetica Neue';
  font-size: 12px;
  color: #fff;
}
  #cboxLoadedContent {
    padding: 20px;
    background-color: #07172e;
  }
  #cboxTitle {
    position: absolute;
    top: 0px;
    left: 40px;
    font-size: 15px;
    font-weight: bold;
  }
  #cboxCurrent {
    position: absolute;
    text-align: center;
    bottom: 0px;
    left: -10px;
    width: 100%;
    padding: 5px;
    color: #999;
  }
  #cboxPrevious {
    bottom: 0px;
    left: 20px;
    padding: 5px 5px 5px 20px;
  }
  #cboxNext {
    bottom: 0px;
    right: 20px;
    padding: 5px 20px 5px 5px;
  }
  #cboxClose {
    right: 20px;
    top: 0px;
    padding: 5px 20px 5px 5px;
  }
  #cboxPrevious, #cboxNext, #cboxClose {
    position: absolute;
    color: #153e6f;
  }
  #cboxPrevious:hover, #cboxNext:hover, #cboxClose:hover {
    color: #a9c720;
    background: #07172e url(../img/colorbox/controls.png) no-repeat 0 0;
  }
  #cboxNext:hover {
    background-position: 100% -48px;
  }
  #cboxClose:hover {
    background-position: 100% -96px;
  }