@charset "UTF-8";
/*
 *        
 * Primary screen styles for JeffBatterton.com v4.0 
 *
 * Author:   Jeff Batterton
 * Date:     April 3, 2010
 * Contact:  hello@jeffbatterton.com
 *
 * Charcoal: #09090b | 9,9,11
 * Blue:     #3b7ef1 | 59,126,241
 *
 * Contents:
 * |--------------------------|
 * |- 1. Reset ---------------|
 * |- 2. HTML ----------------|
 * |- 3. Body ----------------|
 * |- 4. Structure -----------|
 * |- 5. Global Headings -----|
 * |- 6. Global Paragraphs ---|
 * |- 7. Global Paragraphs ---|
 * |- 8. Navigational Items --|
 * |- 9. Page ----------------|
 * |-10. Portfolio -----------|
 * |-11. Footer --------------|
 * |-12. Contact -------------|
 * |-13. Blog ----------------|
 * |-14. Twitter -------------|
 * |-15. Flickr --------------|
 * |-16. Menu ----------------|
 * |-17. Miscellaneous -------|
 * |-18. Dribbble Halfcourt---|
 * |--------------------------|
 *
 */  
 
/* - 1. Reset ------------------- */
@import url(reset.css);


/* - 2. HTML -------------------- */
html                              { height: 100%; background: url(../img/bg-html.jpg); font: 11px "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; }
@-webkit-keyframes bgslide        { 0% { background-position: 0 right; } 50% { background-position: -100px left; } 100% { background-position: 0 right; }}
html                              { background-position: top left; -webkit-animation-name: bgslide; -webkit-animation-duration: 180s; -webkit-animation-iteration-count: infinite; }


/* - 3. Body -------------------- */
body                              { height: 100%; background: url(../img/bg-body.png) no-repeat top center; text-align: center;  }
body .wrapper                     { width: 1000px; position: relative; margin: 0 auto; }


/* - 4. Structure --------------- */
.first                            { width: 174px; float: left; text-align: right; }
.one                              { width: 150px; float: left; }
.two                              { width: 350px; float: left; }
.three                            { width: 550px; float: left; }
.four                             { width: 775px; float: left; }	
.left                             { padding: 25px 25px 25px 0; margin: 25px 0; }
.right                            { padding: 25px 0 25px 25px; margin: 25px 0; }
.inset                            { padding: 25px; margin: 25px 0; }
.bordered                         { border: 1px solid #808080; border-top: 0; border-right: 0; border-bottom: 0; }
.row                              { clear: both; }
.wrapper                          { text-align: center; }


/* - 5. Global Headings --------- */
h1                                { font: 25px Georgia, serif; margin: 25px 0; }
h1:first-child                    { margin: 0 0 25px 0; }
h2                                { font: 19px Georgia, serif; color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0, 0.5); line-height: 0; margin: 26px 0 0 0; }
h2.subtag                         { font-size: 13px; margin: 8px 0 50px 0; }
h3                                { font-size: 15px; font-weight: bold; padding: 10px 0; }


/* - 6. Global Paragraphs ------- */
p                                 { font-size: 13px; line-height: 23px; padding: 0 0 25px 0; margin: 0; }
p.last-child,                     
p.last,                           
p.nopad                           { padding: 0; } 
p.small                           { font-size: 11px; }
p.padded                          { padding: 16px 0 25px 0; }


/* - 7. Global Links ------------ */
#page a, 
#footer a,
#contact a.ok                     { color: #3b7ef1; padding: 3px; -webkit-border-radius: 5px; }
#page a:hover, 
#footer a:hover,
#contact a.ok:hover               { text-decoration: none; background-color: #3b7ef1; color: #fff; }
#page a:hover,
#footer a:hover, 
#contact a.ok:hover               { -o-transition-duration: .33s; -o-transition-property: color, background-color; -webkit-transition-duration: .33s; -webkit-transition-property: color, background-color; }
a.img:hover                       { background-color: transparent !important; }


/* - 8. Navigational Items ------ */
#nav                              { width: 1000px; height: 30px; background: #09090b url(../img/bg-nav.png) repeat-x; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; -webkit-box-shadow: 0 1px 0 rgba(255,255,255, 0.22); }
#nav li                           { float: left; border: 1px solid rgba(0,0,0, 0.25); border-top: 0; border-bottom: 0; border-left: 0; }
#nav li.twitter, 
#nav li.facebook, 
#nav li.flickr,
#nav li.dribbble                  { text-indent: -9999px; float: right; border: 1px solid rgba(0,0,0, 0.25); border-top: 0; border-right: 0; border-bottom: 0; }
#nav li.twitter a                 { background: url(../img/bg-nav-twitter.png) no-repeat center top; }
#nav li.twitter a:hover           { background-position: center bottom; }
#nav li.facebook a                { background: url(../img/bg-nav-facebook.png) no-repeat center top; }
#nav li.facebook a:hover          { background-position: center bottom; }
#nav li.flickr a                  { background: url(../img/bg-nav-flickr.png) no-repeat center top; }
#nav li.flickr a:hover            { background-position: center bottom; }
#nav li.dribbble a                { background: url(../img/bg-nav-dribbble.png) no-repeat center top; }
#nav li.dribbble a:hover          { background-position: center bottom; }
#nav li a                         { font-size: 11px; font-weight: bold; color: #fff; display: block; padding: 8px 25px 11px 25px; text-shadow: 0 0 5px rgba(255,255,255, 0.4); }
#nav li a:hover                   { color: #3b7ef1; text-shadow: 0 0 5px rgba(22,156,179, 0.4); text-decoration: none; }
#nav li a:hover                   { -o-transition-duration: .33s; -o-transition-property: color, text-shadow; -webkit-transition-duration: .33s; -webkit-transition-property: color, text-shadow; }
#nav li a:active                  { text-shadow: 0 0 5px rgba(0,0,0, 0.4); }


/* - 9. Page -------------------- */
#page                             { background: #fff; width: 100%; padding: 25px 0; overflow: hidden; -webkit-box-shadow: 0 0 7px rgba(0,0,0, 0.5); }
#page .wrapper                    { width: 1000px; text-align: left; } 


/* - 10. Portfolio -------------- */
#portfolio                        { overflow: hidden; width: 1000px; height: 325px; margin: 50px 0; -webkit-box-shadow: 0 5px 65px rgba(0,0,0, 0.65); }
.frame                            { width: 1000px; height: 325px; background: #000; overflow: hidden; position: relative; }
.border                           { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 1px solid rgba(255,255,255, 0.125); z-index: 2; }
.displaytools                     { position: absolute; bottom: 0; left: 0; padding: 10px 0 10px 10px; background: rgba(0,0,0, 0.8); border-top-right-radius: 10px; z-index: 3; }
.displaytools a.button            { display: block; padding: 5px 10px; margin: 0 10px 0 0; border-radius: 3px; float: left; background: url(../img/bg-button-small.png) repeat-x; -webkit-box-shadow: 0 1px 1px rgba(0,0,0, 0.5); color: #fff; font-weight: bold; text-shadow: 0 -1px 0 rgba(0,0,0, 0.25); }
.displaytools a.hidden            { display: none; }
.displaytools a.button:hover      { text-decoration: none; background: url(../img/bg-button-small-hover.png) repeat-x;  }
.displaytools a.button:active     { -webkit-box-shadow: none; }
.displayarrows                    { position: absolute; bottom: 0; right: 0; padding: 10px 0 10px 10px; background: rgba(0,0,0, 0.8); border-top-left-radius: 10px; z-index: 4; }
.displayarrows a.button           { display: block; padding: 5px 10px; margin: 0 10px 0 0; border-radius: 3px; float: left; background: url(../img/bg-button-small.png) repeat-x; -webkit-box-shadow: 0 1px 1px rgba(0,0,0, 0.5); color: #fff; font-weight: bold; text-shadow: 0 -1px 0 rgba(0,0,0, 0.25); }
.displayarrows a.button:hover     { text-decoration: none; background: url(../img/bg-button-small-hover.png) repeat-x;  }
.displayarrows a.button:active    { -webkit-box-shadow: none; }
.scroll                           { height: 325px; width: 1000px; overflow: auto; overflow-x: hidden; position: relative; clear: left; }
.scrollContainer div.panel        { height: 325px; width: 1000px; }


/* - 11. Footer ----------------- */	
#footer                           { font-size: 11px; color: #fff; margin: 25px 0; text-shadow: 1px 1px 0 rgba(0,0,0, 0.5); }


/* - 12. Contact ---------------- */
#contact                          { display: none; position: absolute; right: 0; left: 0; top: 0; height: 1000px; background: rgba(0,0,0, 0.5); z-index: 5; }
#contact form                     { position: relative; width: 600px; background: #fff; margin: 100px auto 0 auto; padding: 50px; border-radius: 10px;  -webkit-box-shadow: 0 5px 80px rgba(0,0,0, 0.8); overflow: hidden; }
#contact form div.success         { display: none; text-align: left; padding: 25px; }
#contact form div.success p       { display: block; float: none; margin: 0; padding: 0 0 25px 0; line-height: 23px; }
#contact form p                   { float: left; display: inline; line-height: 64px; }
#contact form h1                  { text-align: left; }
#contact form br                  { clear: both; }
#contact form input               { float: left; display: inline; width: 112px; height: 42px; font-size: 17px; margin: 10px 5px 0 5px; padding: 0 5px; background: #ebebeb; border: 5px dotted #b8b8b8; border-top: 0; border-right: 0; border-left: 0; }
#contact form textarea            { width: 550px; padding: 25px; font: 17px "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; background: #ebebeb; border: 5px dotted #b8b8b8; border-top: 0; border-right: 0; border-left: 0; }
#contact input.submit             { height: 35px; margin: 25px 0 0 0; border: 0; background: #3b7ef1 url(../img/bg-button.png) repeat-x; width: auto; border-radius: 3px; font-size: 13px; -webkit-box-shadow: 0 1px 1px rgba(0,0,0, 0.5); color: #fff; font-weight: bold; text-shadow: 0 -1px 0 rgba(0,0,0, 0.25); }
#contact input.submit:hover       { background: url(../img/bg-button-hover.png); }
#contact input.submit:active      { -webkit-box-shadow: none; }


/* - 13. Blog ------------------- */
p.tags                            { display: none; font-size: 11px; padding: 0; }
#comment_form form input          { float: left; height: 42px; font-size: 17px; margin: 25px 0 0 0; padding: 0 5px; background: #ebebeb; border: 5px dotted #b8b8b8; border-top: 0; border-right: 0; border-left: 0; }
#comment_form form input.name     { width: 240px; margin-right: 50px; }
#comment_form form input.email    { width: 240px; }
#comment_form form input.url      { width: 540px; margin-bottom: 25px; }
#comment_form form textarea       { width: 500px; height: 125px; padding: 25px; font: 17px "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; background: #ebebeb; border: 5px dotted #b8b8b8; border-top: 0; border-right: 0; border-left: 0; }
#comment_form form input.checkbox { height: 16px; margin: 0 5px 0 0; padding: 0; background: #ebebeb; }
#comment_form form p              { margin: 10px 0 0 0; }
#comment_form form input.submit   { height: 35px; margin: 0; border: 0; background: #3b7ef1 url(../img/bg-button.png) repeat-x; width: auto; border-radius: 3px; font-size: 13px; -webkit-box-shadow: 0 1px 1px rgba(0,0,0, 0.5); color: #fff; font-weight: bold; text-shadow: 0 -1px 0 rgba(0,0,0, 0.25); color: #fff; }
#comment_form input.submit:hover  { background: url(../img/bg-button-hover.png); }
#comment_form input.submit:active { -webkit-box-shadow: none; }
div.comment                       { margin: 0 0 25px 0; }
div.comment:last-child            { margin: 0; }
div.comment div                   { overflow: hidden; }
div.comment div p                 { font-size: 11px; line-height: 17px; float: left; margin: 0; padding: 0; }
div.comment div img               { float: left; margin: 0 5px 5px 0 !important; -webkit-border-radius: 5px; -webkit-box-shadow: 0 1px 0 #000; }
div#page.blog img                 { margin: 0 0 20px 0; }


/* - 14. Twitter ---------------- */
#tweets p                         { width: 150px; margin: 10px 0 0 0; float: left; font-size: 11px; }
#tweets li:last-child p           { margin: 10px 0 0 25px; }
#tweets span                      { display: block; font-size: 9px; color: #808080; margin: 5px 0 0 0; }
#tweets p.loader                  { background: url(../img/ajax-loader.gif) no-repeat; padding: 0 0 0 20px; }


/* - 15. Flickr ----------------- */
.flickr_box                       { padding: 25px 0 0 0; width: 160px; }
.flickr_box h3,

#flickr                           { position: relative; }
#flickr img                       { margin: 10px 0 0 0; width: 150px; height: auto; float: left; -webkit-border-radius: 3px; -webkit-box-shadow: 0 1px 0 #000; }
#flickr a:hover                   { background-color: transparent !important; }



/* - 16. Menu ------------------- */
ul.menu                           { margin: 10px 0 0 0; }
ul.menu li                        { border-top: 1px solid #808080; padding: 8px 0; position: relative; }
ul.menu li:last-child             { border-bottom: 1px solid #808080; }
ul.menu li a                      { position: relative; z-index: 1; }
ul.menu li span                   { float: right; margin: 0 5px 0 0; color: #808080; position: relative; z-index: 1; }
ul.menu div.indicator             { background: #ebebeb; height: 100%; position: absolute; top: 0; right: 0; z-index: 0; }


/* - 17. Miscellaneous ---------- */
.logo                             { margin: 39px 0 0 0; }
.close                            { text-indent: -9999px; width: 16px; height: 16px; position: absolute; right: 25px; top: 25px;  background: url(../img/close.gif) no-repeat; }
.align-left                       { text-align: left; }
.align-right                      { text-align: right; }
.hide                             { display: none; }
.last                             { margin-right: 0; }
input:focus, 
textarea:focus                    { outline: none; -webkit-box-shadow: 1px 1px 1px rgba(0,0,0, 0.45); }
#message                          { display: block; padding: 25px; background: #dce8fc; border: 3px solid #3b7ef1; -webkit-border-radius: 25px; }
#message h3                       { padding: 0; margin: 0; }
#message p                        { padding: 5px 0; }
.LV_invalid_field                 { background: #ffdece !important; }


/* - 18. Dribbble Halfcourt ------*/
.hcs li{
	-webkit-border-radius: 3px; -webkit-box-shadow: 0 1px 0 #000;
	width: 130px;
	height: 106px;
	position: relative;
	display: block;
	padding: 0;
	margin: 10px 0 0 0;
	display: table;
	float: left;
	vertical-align:middle;
	background: url(../img/bg-dribbble.png);
}
.hcs li a{
	width: 130px;
	height: 106px;
	text-align: center;
	vertical-align: middle;
	display: table-cell;
	padding: 0;
}
.hsc a:hover { background-color: transparent !important; }

.hcs img{
	width:auto;
	height: auto;
	max-width: 130px;
	max-height: 106px;
	float:left;
}