/*   
Theme Name: Ben Herbertson Web Design
Description: This is a wordpress theme for Ben Herbertson Web Design - Based on the BLANK theme by Chris Coyier
Author: Ben Herbertson
Author URI: http://www.benherbertson.co.uk
Version: 1
*/


* { margin: 0; padding: 0; }
body { background: white;  background-image: url("images/background2.jpg"); font: 14px/1.4 Arial, Sans; background-position:top center; background-repeat:no-repeat; background-color: #e7e7e7;}
.screen-reader-text { position: absolute; left: -9999px; top: -9999px; }
.clear { clear: both; }
.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
div { position: relative; }

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

#page-wrap { width: 960px; min-height:100%; margin: 0px auto;  }

h1, h2, h3 { font-weight: normal; margin: 0 0 10px 0; font: 14px/1.4 Arial, Sans; }
h1 { }
h2 { }
h3 { }

p { margin: 0 0 10px 0;  font: 14px/1.4 Arial, Sans; }
a { color: #333333; font: 14px/1.4 Arial, Sans; outline:none; }
a:hover { } 

ul, ol { margin: 0 0 10px 0; }

/* Header */
#header { top:0px; left:0px; position:absolute; width:100%; height:100px; background-image: url('images/header-back.png'); background-repeat:repeat-x; background-position:bottom center;} 
#header-content { width: 940px; height:150px; margin: 0px auto; }
h1#logo { width: 390px; height: 55px;  margin: 25px 0px 0px 0px; background: url('images/logo.png'); text-indent: -9999px; }


/* Portfolio */
#topbox { width:950px; height:480px; margin: 120px 0px 0px 4px; background-image: url('images/box-backs.png'); background-repeat:no-repeat; }
#topbox-head { height: 35px; width:780px; margin:0px auto; }
#folio-title { float:left; }
#roft { float:right; margin: 15px 10px 0px 0px; } 

/* Slidehow */

#loopslider { list-style:none; width:860px;	height:405px; overflow:hidden; margin:0px auto; padding:0; }
.previous { float:left; margin: 180px 0px 0px 25px; width: 38px; height:38px; display:block;  background: url('images/arrow-buttons.png');  background-position: 0px 0px ; text-indent: -9999px;}
.previous:hover { float:left; margin: 180px 0px 0px 25px; width: 38px; height:38px; display:block;  background: url('images/arrow-buttons.png');  background-position: -38px 0px ; text-indent: -9999px;}
.next { float:right;  margin: 180px 25px 0px 0px; width: 38px; height:38px;  display:block;  background: url('images/arrow-buttons.png');  background-position: -114px 0px ; text-indent: -9999px;}
.next:hover { float:right;  margin: 180px 25px 0px 0px; width: 38px; height:38px;  display:block; background: url('images/arrow-buttons.png');  background-position: -76px 0px ; text-indent: -9999px; }
.pagination li a {display:block; width: 19px; height:19px; background: url('images/arrow-buttons.png');  background-position: 0px -38px ; text-indent: -9999px; }
.pagination li.active a {display:block; width: 19px; height:19px; background: url('images/arrow-buttons.png');  background-position: -19px -38px ; text-indent: -9999px; }
.pagination { list-style:none; clear:both; margin:5px auto 0px auto; width:100px; }
.pagination li { float:left; margin: 0px 5px; }
.container { width:780px; height:405px; overflow:hidden; margin:0px auto;  cursor:pointer; }
.slides { position:absolute; top:0; left:0; }
.slides .slide { position:absolute; top:0; width:780px; display:none; }
.slides .slide img { border: 0px; }
.slides .slide .slide-content { position:absolute; top:0px;  width:780px; height: 0px; z-index:100; }
.slide-title { position: absolute; top:10px; right:10px; display:block;  width:368px;  height: 75px; background: #ffffff; border: 1px solid #e7e7e7; }
.caption-title { margin: 10px 0px 0px 20px; font: 20px/1.4 Arial, Sans; }
.slides .slide .slide-content .the-content  {  position:absolute; top:85px; right: 10px; width:368px; height:300px; margin: 10px 0px 0px 0px; background: #ffffff; border: 1px solid #e7e7e7;  }
.slides .slide .slide-content .the-content .scroll-content  { width:330px;  margin: 5px 0px 5px 20px; }
.slides .slide .slide-content p  { color: #333;  opacity: .7; text-shadow: 0px 1px 0px #fff; text-align:justify; }
.slides .slide .slide-content a  { float:left; margin: 0px 0px 5px 20px; color: #333;  opacity: .7;  text-shadow: 0px 1px 0px #fff;  }
.tiny-text { font-size:12px; clear:both; margin: 0px 0px 0px 20px }


/* Profile */
#profile { float: left; width:230px; height:245px; margin: 15px 0px 0px 4px;  }
#profile { float: left;  height:245px; margin: 10px 0px 0px 4px;  }
#profile-top {width:230px; height:18px;  background-image: url('images/about-top.png'); background-position: 0px -8px; background-repeat:no-repeat; }
#profile-content { overflow:hidden;  width:230px; height:487px; margin: -8px 0px 0px 0px;   background-image: url('images/about-content.png'); background-position: 0px 0px; background-repeat:repeat-y; }
#profile-content p { margin: 0px 0px 0px 12px; }
#profile-bottom {width:230px; height:18px;  background-image: url('images/about-bottom.png'); background-position: 0px -8px; background-repeat:no-repeat; }
#profile-pic { width: 200px; height: 220px; border: 3px solid white; overflow:hidden; margin: 0px 0px 5px 10px;  }
#social { list-style:none; margin: 10px auto 0 auto; width:200px; }
#social li { float:left; }
#social li img { border:0px; }


/* About */
#about { float:right; width:710px; margin: 10px 5px 0px 0px; }
#about-top {width:710px; height:18px;  background-image: url('images/about-top.png'); background-position: -240px -8px; background-repeat:no-repeat; }
#about-content{ width:710px; height:487px; overflow:hidden;  margin: -8px 0px 0px 0px;  background-image: url('images/about-content.png'); background-position: -240px 0px ; background-repeat:repeat-y; }
#about-bottom {width:710px; height:18px;  background-image: url('images/about-bottom.png'); background-position: -240px -8px; background-repeat:no-repeat; }
#short-about {width:330px; height: 230px; float:left;}
#about-title { clear:both; margin: 0px 0px 0px 10px;}
#about-p {clear:both; width:680px; margin: 0px 0px 0px 15px;}
#about-small-text { width:310px; margin: 15px 0px 0px 15px; }
#about .big-text { font-size:25px; color: #333333; margin: 0px 0px 0px 15px; }
a.slide-button { position:absolute; color: #777777;  text-shadow: 0px 1px 0px #fff; width: 19px; height:19px; bottom:5px; right:20px;   display:block;  background: url('images/arrow-buttons.png');  background-position: -38px -38px ; text-indent: -100px;  }
a.slide-button:hover { position:absolute; color: #777777;  text-shadow: 0px 1px 0px #fff; width: 19px; height: 19px; bottom:5px; right:20px;  display:block;  background: url('images/arrow-buttons.png');  background-position: -57px -38px ; text-indent: -100px; }

/* Skillset */
#skillset { float:right; width:350px; height:195px; margin:5px 20px 0px 0px;  background: #ffffff; }
#skillset .big-text { font-size:25px; color: #333333; margin: 0px 0px 0px 0px; }
#skill-header {padding: 5px 5px; clear:both;  float: left; width:350px; height:30px; margin: 0px 0px 10px 5px; ; }
#skill-header h3 {margin:0px; }
.skill_c1 { padding: 5px 5px; clear:both; float: left; width:160px; height:20px; margin: 0px 0px 0px 5px;  }
.skill_c2 { padding: 5px 5px; float: right; width:155px; height:20px; margin: 0px 5px 0px 0px;  }


/* What I Do */
#wid { float:left; width:470px; height:310px; margin: 5px 0px 0px 4px; background-image: url('images/box-backs.png'); background-position: -0px -745px; background-repeat:no-repeat;}
#wid  .big-text	{ margin: 10px 0px 0px 20px; }
#wid-list { list-style:none; margin: 10px 0px 0px 11px; }
#wid-list li { height: 80px; width:445px;  margin: 4px 0px 0px 0px;}
#wid-list li h2.wid-title { margin: 0px 0px 0px 10px; font-weight:bold; }
#wid-list li p.wid-text { margin: 0px 0px 0px 10px; width: 420px;}
.wid-icon { float:left; margin: 5px 10px 0px 10px; }


/* Contact */
#contact { float:right; width:470px; height:310px; margin: 5px 5px 0px 0px; background-image: url('images/box-backs.png'); background-position: -480px -745px; background-repeat:no-repeat;}
.contact-p	{width:410px;  margin: 10px 0px 0px 20px; }
#contact .big-text	{ margin: 10px 0px 0px 20px; }
#contact-info { width:410px; margin: 10px 0px 0px 20px; list-style:none;  }
#contact-info li { margin: 10px 0px 0px 0px; }
#contact-info li .contact-title { display:inline; }
.contact-icon { float:left; margin: 10px 10px 0px 15px; }
#email-address { margin: 20px 0px 0px 0px; }

/* Footer */
#footer { height:auto; width:940px; margin:0px auto; clear:both; }
#flickr { width: 240px; float:left; }
#flickr ul { list-style: none; margin: 10px 0px 0px 0px; }
#flickr img	{ border: 3px solid white; }
#footer-info {float:right; width: 240px; margin:40px 0px 4px 0px; text-align:right;}
.footer-p {clear:both; margin:0px 0px 10px 0px;}
#quick-message {float:left; width:420px; margin: 0px 0px 0px 40px;}
#browsers { list-style:none;}
.browser {float:right;}

/* Form */
#form                     { float: left; width: 420px; height: 200px; margin: 10px 0px 0px 0px;   }
#myForm                   { margin: 0px 0px 0px 0px; }
#myForm label             { float: left; width:80px; margin: 0px 0px 0px 0px;}
#myForm div               {clear:both; margin: 0px 0px 15px 0px; }
#myForm div input, #myForm div textarea  {color: #363636; width: 330px; font-size:14px;  }
#myForm div textarea 	  {color: #363636; height:70px; font-size:14px;  }
#myForm div input         { height:20px;  }
#myForm div select        { width:300px; height:20px;  }
#myForm label.error       {float:left; width:200px; color:#FF0000; font-size:12px; margin: -1px 0px 0px 80px; font-weight:bold; font-style:italic;  }
#submit input			  { margin: 0px 0px 0px 80px !important; height: 25px !important;}
/* Form END */


/* Typo / Misc */
.title { font-weight: bold;}
.big-text { font-size:25px; color: #333333; margin: 0px 0px 0px 10px; font-family: "museo-slab-1","museo-slab-2"; }
.bottom-box-title 	{ margin: 10px 0px 0px 20px; }
#four-oh-four {height:100px; widht: 500px; margin: 200px 0px 0px 0px;}

.transparency {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
  /* IE 5-7 */
  filter: alpha(opacity=85);
  /* Netscape */
  -moz-opacity: 0.85;
  /* Safari 1.x */
  -khtml-opacity: 0.85;
  /* Good browsers */
  opacity: 0.85;
}

/* CSS 3 */
.shadow { box-shadow: 1px 1px 5px #c7c7c7; -moz-box-shadow: 1px 1px 5px #c7c7c7; -webkit-box-shadow: 1px 1px 5px #c7c7c7; }
.inset-shadow { box-shadow:inset 1px 1px 5px #c7c7c7; -moz-box-shadow:inset 1px 1px 5px #c7c7c7; -webkit-box-shadow:inset 1px 1px 5px #c7c7c7; }
.picture-shadow { -moz-box-shadow: 1px 1px 2px #c7c7c7; -webkit-box-shadow: 1px 1px 2px #c7c7c7;  }
#flickr img { -moz-box-shadow: 1px 1px 2px #c1c1c1; -webkit-box-shadow: 1px 1px 2px #c1c1c1; }
.embossed {opacity: .5; text-shadow: 0px 1px 0px #fff; }