/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
/* 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;}
/* remember to define focus styles! */
:focus {outline: 0;}
body {line-height: 1; color: black; background: white;}
ol, ul {list-style: none;}
/* 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: "" "";}
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
/* Globals */
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
html, body, #outer-container { height: 100%; }
body > #outer-container { height: auto; min-height: 100%; }
div#footer {clear: both; position: relative; z-index: 10; height: 90px; margin-top: -90px; width:100%}
div#footer-inner{clear:both;width:950px; height:90px; margin:0 auto;}
div#sticky-footer-buffer { padding-bottom: 90px; }
div#header{height:70px;}
div#outer-container{width:950px;margin:0 auto}
/* CLEAR FIX*/
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
/* TYPE */
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
/* Default font settings. The font-size percentage is of 16px. (0.75 * 16px = 12px) */
html {font-size:100.01%;}
body {font-family: Georgia, serif; font-size: 12px; font-style: italic;  font-weight: normal; text-transform: normal; letter-spacing: normal; line-height: 1.4em;}
/* Headings
-------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6 {padding-left: 0px; padding-bottom: 8px; padding-right: 0px; padding-top: 8px; font-weight: normal; color: #111;}
h1 {font-size: 3em; line-height: 1.5em; margin-bottom: 0.25em;}
h2 {font-size: 2em; line-height: 1em; margin-bottom: 0.75em;}
h3 {font-size: 1.5em; line-height: 1; margin-bottom: 1em;}
h4 {font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em;}
h5 {font-size: 1em; font-weight: bold; margin-bottom: 1.5em;}
h6 {font-size: 1em; font-weight: bold;}
/* Text elements
-------------------------------------------------------------- */
p          {margin-bottom: 1.5em; line-height: 1.5em; padding: 0px 0px 0px 0px;}
a:focus, 
a:hover    {color: #000; text-decoration: underline;}
a          {color: #009; text-decoration: none;}
blockquote {margin: 1.5em; color: #666; font-style: italic;}
strong     {font-weight: bold;}
em,dfn     {font-style: italic;}
dfn        {font-weight: bold;}
sup, sub   {line-height: 0;}
abbr, 
acronym    {border-bottom: 1px dotted #666;}
address    {margin: 0 0 1.5em; font-style: italic;}
del        {color:#666; }
pre 	   {margin: 1.5em 0; white-space: pre;}
pre,code,tt{font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5;}
/* Qoutes
------------------------------------------------------------- */
blockquote {border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; color: #666;}
blockquote *:first-child:before {content: "\201C";}
blockquote *:first-child:after {content: "\201D";}
/* Sections
------------------------------------------------------------- */
div#single-image-content p, 
div#single-image-details p,
div#fullwidth-image-content p, 
div#fullwidth-image-details p,{padding-right:5px;}
div#excerpt p {font-size: 22px; line-height: 1.25em; margin-bottom: 0em; padding: 0em;}
div#excerpt h1{margin: 0px 0px 0px 0px; line-height:0.8em;}
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
/* BASIC */
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
a:link {color: #000;text-decoration: underline;} 
a:visited {color: #000;}
a:hover,a:focus {color: #000;text-decoration: none;}
a:active {text-decoration: underline;}
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
/* Common */
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
body {background-image: url(../images/carbon.jpg); background-position: center top;}
div#header {background-image: url(../images/nav_bottom.png); height: 70px;}
div#footer-inner {background-image: url(../images/footer_nav_top.png); background-repeat: no-repeat;}
div#logo {width: 231px; float: left}
div#footerlogo	{float: right; width: 230px}
div#excerpt {height: 150px; width:100%; background-image: url(../images/nav_bottom.png); background-position: bottom; background-repeat: no-repeat; margin-bottom: 10px;}
div#copyright {width: 950px; height:10px; margin: 0 auto; color: #666; float: left;}
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
/* MENUs */
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
/* Main Menu */	
#navbar	{float: right;}
#navigation{display: block;width: 470px;height: 60px;background: url(../images/sitemenu.png) left top no-repeat;}
#navigation li{display: block;float: left;}
#navigation li a{display: block;height:60px;text-indent:-9999px;}
#navigation li a:hover {background-image: url(/images/sitemenu.png);}
#navigation li.mainwork a{width:99px;background-position:-0px -60px;}
#navigation li.mainplay a{width:95px;background-position:-99px -60px;}
#navigation li.mainservices a{width:145px;background-position:-194px -60px;}
#navigation li.maincontact a{width:131px;background-position:-339px -60px;}

/*
#navigation	{display: block;width: 470px;height: 60px;background: url(../images/menu.png) left top no-repeat;}
#navigation li {display: block;float: left;}
#navigation li a {display: block;height:60px;text-indent:-9999px;}
#navigation li a:hover,
#navigation li a.on	{background-image: url(../images/menu.png);}
#navigation li.mainwork a{width:133px;background-position:-0px -60px;}
#navigation li.mainservices a {width:175px;background-position:-133px -60px;}
#navigation li.maincontact a {width:162px;background-position:-308px -60px;}
*/


/* Footer Menu */	
#footernavbar	{float: left;}	
#footernav {display: block;width: 310px;height: 60px;background: url(../images/footer_menu.png) left top no-repeat;}
#footernav li {display: block;float: left;}
#footernav li a	{display: block;height:60px;text-indent:-9999px;}
#footernav li a:hover,
#footernav li a.on {background-image: url(../images/footer_menu.png);}
#footernav li.footerwork a {width:83px;background-position:-0px -60px;}
#footernav li.footerservices a {width:120px;background-position:-83px -60px;}
#footernav li.footercontact a {width:107px;background-position:-203px -60px;}
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
/* Home Page */
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
div#homepage-content{width:950px; min-height: 200px;}	
div#homepage-image-recentwork{float:left;width:475px}
div#homepage-image-sticky{float:right;width:475px}
#home-page-teaser {background-image: url(../images/large_shadow.png); background-repeat: no-repeat; width:950px; height: 480px;}
.homepage-teaser-text a:link {color: #fff; text-decoration: none;} 
.homepage-teaser-text a:visited {color: #fff; text-decoration: none;}
.homepage-teaser-text a:hover,a:focus {color: #eee; text-decoration: none;}
.homepage-teaser-text a:active {color: #fff; text-decoration: none;}
.image { position: relative; margin-bottom: 20px; width: 100%; }
.homepage-teaser-text { position: absolute; top: 350px; left: 10px; z-index: 99;  }
.homepage-teaser-text h1 { color: white; font: bold 45px; letter-spacing: -1px; background: rgb(0, 0, 0); padding: 10px; }
#teaser-overlay 	{position:absolute; z-index: 95; width:950px; height: 450px; top:0px; left:0px;}
#teasers {position: relative; z-index: 90; width:950px; height: 450px; top:0px; left:0px;}
#home-page-headline {height: 120px; width:100%; background-image: url(../images/nav_bottom.png); background-position: bottom; background-repeat: no-repeat; margin-bottom: 10px;}
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
/* Folio Index */
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
#workfolio {width: 950px; clear:both; float: left}
#playfolio {width: 950px; clear:both; float: left}
#worklist {height: 70px; background-image: url(../images/nav_bottom.png); background-position: bottom; background-repeat: no-repeat; margin-bottom: 10px}
#playlist {height: 70px; background-image: url(../images/nav_bottom.png); background-position: bottom; background-repeat: no-repeat; margin-bottom: 10px}
.thumbnails {float:left; margin-right:0px; width:230px; height:220px; margin-right: 10px; background: url(../images/thumb_back_shadow.png) left top no-repeat; }
.thumbnails{font-family: Georgia, serif; font-size: 10px; font-style: normal; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; line-height: 2em;}
.thumbnails img { margin-bottom: 10px; width: 100%; display: block;}
.thumbnails a:link {color: #fff; text-decoration: none;  } 
.thumbnails a:visited {color: #fff; text-decoration: none; }
.thumbnails a:hover,a:focus {color: #fff; text-decoration: none;}
.thumbnails a:active {text-decoration: none;}
.lastthumbnail {padding-right: 0; margin-right: 0;}
/* ----------------------------------------------------------------- */
/* Single Image Single Video Single Flash */
/* ----------------------------------------------------------------- */
div#single-image-content{float:right;width:720px;}
div#single-image-details{float:left;width:220px;}
div#single-image-controls{float:right;width:720px;}
/* ----------------------------------------------------------------- */
/* Full Width Image Full Width Video Full Width Flash */
/* ----------------------------------------------------------------- */
div#fullwidth-image-content{width:950px; min-height: 200px;}	
div#fullwidth-image-details{float:left;width:475px}
div#fullwidth-image-controls{float:right;width:475px}
div#fullwidth-flash-content{width:950px; min-height: 200px;}	
div#fullwidth-flash-details{float:left;width:475px}
div#fullwidth-flash-controls{float:right;width:475px}
div#fullwidth-image-wrapper {background-image: url(../images/large_shadow.png); background-repeat: no-repeat; width:950px; height: 480px;}
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
/* Journal */
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
div#journal-wrapper {float:left;width:100%}
div#journal-article {margin-right: 320px;}
div#journal-section-subsection{float:left;width:150px;margin-left:-150px}
div#journal-section-section	{float:left;width:150px;margin-left:-310px}
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
/* Services */
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
#web-skills, #motion-skills {width: 950px; clear: both; margin-bottom: 20px;}
#web-skills-title, #motion-skills-title {width: 950px; clear: both; background-image: url(../images/nav_bottom.png); background-position: bottom; background-repeat: no-repeat;}
#web_skills_list, #motion_skills_list {width: 210px; float: left;}
#web_skills_description, #motion_skills_description {width: 720px; float: right;}
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
/* Controls */
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
#slide-overlay 	{position:relative; z-index: 99; width:720px; height: 480px; top:0px; left:0px;}
.slidecontainer { width:720px; height:500px; overflow:hidden; position:relative; cursor:pointer; background: url(../images/slider_shadow.png) left top no-repeat; }
.slides { position:absolute; top:0; left:0; }
.slides div	{ position:absolute; top:0; width:720px; display:none; }
.pagination ul {}
.pagination ul li {display: block; float: left; margin-right: 10px;}/* Section Nav */
.article-nav { background-color: black; border-radius:5px; -moz-border-radius: 5px; -webkit-border-radius:5px; -khtml-border-radius:5px; padding: 5px;}
#articlenav {font-family: Georgia, serif; font-size: 10px; font-style: normal; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; line-height: 2em; float: right;}
#articlenav a:link {color: #fff; text-decoration: none; } 
#articlenav a:visited {color: #fff; text-decoration: none; }
#articlenav a:hover,a:focus {color: #fff; text-decoration: none;}
#articlenav a:active {text-decoration: none;}

a.article-nav { background-color: black; border-radius:5px; -moz-border-radius: 5px; -webkit-border-radius:5px; -khtml-border-radius:5px; padding: 5px;}

a.article-nav:hover { background-color: #abe469; border-radius:5px; -moz-border-radius: 5px; -webkit-border-radius:5px; -khtml-border-radius:5px; padding: 5px;}

#nextprev-buttons {float: left;}
/* ----------------------------------------------------------------- */
/* List's */
/* ----------------------------------------------------------------- */



/* ----------------------------------------------------------------- */
/* Misc */
/* ----------------------------------------------------------------- */
div#access {display: none;}