/*
 _____             _    _            _   _
|  __ \           | |  (_)          | | (_)
| |  | | _____   _| | ___ _ __   ___| |_ _  ___
| |  | |/ _ \ \ / / |/ / | '_ \ / _ \ __| |/ __|
| |__| |  __/\ V /|   <| | | | |  __/ |_| | (__
|_____/ \___| \_/ |_|\_\_|_| |_|\___|\__|_|\___|
     2010                       Ryan Hartman


"Everybody who runs a Web site knows we're not assured of compatibility.."
  - Tim Berners-Lee


--------------------- RESET --------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd,
q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit;
  font-size:100%; font-family:inherit; vertical-align:baseline;
}
:focus { outline:0; }
body { line-height:1; color:black; background:white; color:#715858; }
ol, ul { list-style:none; }
.clear { clear:both; }
/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse:separate; border-spacing: 0; }
caption, th, td { text-align:left; font-weight:normal; }
blockquote:before, blockquote:after, q:before, q:after { content:""; }
blockquote, q { quotes:"" ""; }

/*----------------------
------------------------ OUTER LAYOUT --------------------------------
----------------------*/
html, body {height:100%;}
body { font-family:Arial, Helvetica, sans-serif; font-size:12px; text-align:center; background: #fff url(../img/bg/top2.png) top left repeat-x scroll; }
div#inside { width:960px; text-align:left; margin:0pt auto; position:relative; }
div#navigation { position:absolute; height:60px; top:8px; right:5px; z-index:2; }
div#logo { position:absolute; top:45px; left:5px; z-index:2; }
div#content { padding:135px 0 0; }

/*----------------------
------------------------ MAIN NAVIGATION --------------------------------
----------------------*/
#page-home .nav-home, #page-home .nav-home:hover { background-color:#cdcab4;}
#page-blog .nav-blog, #page-blog .nav-blog:hover { background-color:#cdcab4;}
#page-portfolio .nav-portfolio, #page-portfolio .nav-portfolio:hover { background-color:#cdcab4;}
div#navigation li { float:left; margin: 0 0 0 5px; }
div#navigation li:hover { background-color:#666666; }
div#navigation li a:hover { color:#fff; }
div#navigation li a { padding:10px; display:block; color:#333333; text-decoration:none; font-size:18px; font-weight:normal; }

/*----------------------
------------------------ THE SLIDESHOW BANNER --------------------------------
----------------------*/
div#slideshow { background:transparent url(../img/slideshow.png); margin:0 5px 10px; height:182px; width:950px; position:relative; }
div#slideshow #image{ background-image:url(../img/sldshw/1.jpg); width:950px; height:182px; position:absolute; z-index:-1; }
div#slideshow #image h2, div#slideshow #transparent { position:absolute; bottom:0px; left:0px; color:#fff; background-color:transparent; }
div#slideshow #transparent { height:25px; width:100%; background-color:#000; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0.4)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0.4); opacity: 0.4; }
div#slideshow #employer { position:absolute; top:-45px; right:10px; }
div#slideshow #employer a { display:block; height:50px; line-height:55px; background:transparent url(../img/cp.png) no-repeat right center; padding:0 50px 0 0; }

/*----------------------
------------------------ PORTFOLIO --------------------------------
----------------------*/
div#sites ul { margin:0 1px; }
div#sites { margin: 0 5px; }
div#sites li { float:left; border:5px solid #aaa; margin: 0 2px 0 0; }
div#sites li.last { margin: 0; }
div#sites li:hover { border:5px solid #ccc; }
a.work-item { background:transparent url(../img/portfolio/portfolio.png); height:110px; width:178px; position: relative; display:block; }
a.work-item .work-image{ width:178px; height:110px; position:absolute; z-index:-1; }
a.work-item p { text-align:center; width:178px; }

/*----------------------
------------------------ COLUMNS LAYOUT --------------------------------
----------------------*/
div#about { float:left; width:465px; margin:10px; }
div#contact { float:right; width:465px; margin:10px 10px 10px 0; }
div#contact p { margin-top:0; }
div.col2r { float:right; width:50%; }
div.col2l { float:left; width:50%; }
div.text, div#tweet { padding:0 15px 10px; }

/*----------------------
------------------------ HEADINGS --------------------------------
----------------------*/
div.heading { margin:0 0 10px 0; }
h2 { height:23px; color:#907601; font-size:30px; line-height:25px; position:relative; padding: 0 0 0 10px; border-bottom:1px solid #ccc; }
div#sites .heading { margin-top:-33px; }
div#sites h2 { color:#fff; }
#about h2, #contact h2 { padding: 0 0 3px 10px; }
h2 span { font-size:15px; line-height:23px; position:absolute; margin: 0 0 0 20px; top:0; }
h3 { font-size:13px; font-weight:bold; color:#907601; margin-bottom:10px; }

/*----------------------
------------------------ LEFTOVER TEXT STYLES --------------------------------
----------------------*/
p { margin: 10px 0 10px; }
.no { text-indent:0; }
a { text-decoration:none; font-weight:bold; color:#363c4d; }
a:hover { text-decoration:underline; }

/*----------------------
------------------------ PAGESLIDE --------------------------------
----------------------*/
#pageslide-slide-wrap { background:#545b65 url(../img/bg/slideleft.gif)  top right repeat-y scroll; text-align:left; }
#pageslide-content h2 { color: #C60; }
#pageslide-content a { font-size:12px; color:#c3d8a0; }
#pageslide-content a.pageslide-close { padding:0px; color:#363c4d; }
.pageslide-close { font-size:18px !important; position:absolute; top:5px; right:5px; font-stretch:expanded; }
.slidebox { padding:20px; }
.slidebox-breadcrumb { margin:0; padding:0; font-size:26px; text-indent:0; color:#003741; }
.slidebox-breadcrumb span { color:#fff; }
.slidebox-services { margin:0; padding:10px 0 15px 25px; font-size:12px; text-indent:0; color:#abb8cb; }
.slidebox-case-study { margin:0; padding:0; background-color:#5c646f; padding:10px; color:#e9facd; }
.slidebox-case-study p { line-height:110%; padding:0; margin:5px; text-align:justify; }
.slidebox-case-study ul { list-style:disc; margin:5px 5px 5px 20px;}
.slidebox-case-study li { margin:5px;}
.slidebox-visit { text-indent:0; }

/*----------------------
------------------------ THE BUTTON --------------------------------
----------------------*/
a.buttons { background: transparent url(../img/button2.gif) no-repeat right -147px; float:right; display: block; height: 29px;
margin-right: 10px; padding:0 10px 0 0 !important; text-decoration: none; color: #fff; font-size:12px; font-weight:bold; }
a.buttons span { background: transparent url(../img/button2.gif) no-repeat 0 -49px; display: block; line-height: 29px; padding:0 0 0 10px; }
a.buttons:hover { background-position: right -98px; }
a.buttons:hover span { background-position: top left; }

/*----------------------
------------------------ LIST ITEM ICONS --------------------------------
----------------------*/
.col2l li, .col2r li { margin: 2px 0 6px 0; padding: 0; font-weight: bold; line-height: 16px; /* height of icon */ background-repeat: no-repeat; background-position: 0 50%; }
.col2r li { background-image:url(../img/icons/silk/bullet_go.png); }
.col2l li span, .col2r li span { padding-left: 21px; /* width of icon + whitespace */ }
#email { background-image:url(../img/icons/silk/email_add.png); }
#web { background-image:url(../img/icons/silk/lorry.png); }
#phone { background-image:url(../img/icons/silk/phone.png); }
#resume { background-image:url(../img/icons/silk/page_white_magnify.png); }
#drupal { background-image:url(../img/icons/silk/cog.png); }

/*----------------------
------------------------ TWITTER --------------------------------
----------------------*/
div#tweet { padding:0 15px 10px; }
div#tweet li { min-height: 48px; background-color: #E0ECEF; }
div#tweet .tweet_avatar { float: left; padding-right: 10px; }
div#tweet .tweet_time { display:block; padding-bottom: 5px; }