/* Just4 Styles */

* {
margin: 0;
padding: 0; }

body {
background: #2f2f36;
color: #a5a5b3;
font: 11px 'lucida grande', lucida, helvetica, arial, sans-serif;
line-height: 16px; }

a {
color: #FFF;
text-decoration: none;
font-weight: bold; }

a:hover {
color: #FF6600; }

/* Formatting */

.featured {
color: #FF6600; }

.emphasis {
color: #fff; }

.bold {
font-weight: bold; }

.orange {
color:#FF6600; }

.smallcaps {
font-variant: small-caps;
font-size: 12px; }

.worktitles {
border: 1px dotted #4c4c57;
margin: 0 0 10px 0;
padding: 7px;
color: #fff;
font: 15px helvetica, arial, sans-serif; }

.featuretitles {
border: 1px dotted #FF6600;
margin: 0 0 10px 0;
padding: 7px;
color: #fff;
font: 15px helvetica, arial, sans-serif; }

.worksections {
margin: 0 0 5px 0;
clear: both; }

.worksections p {
margin: 0 0 9px 0; }

.worksections img {
margin: 0 9px 9px 0;
border: none; }

/* Layout */

#header {
margin: 0 0 15px 0;
height: 64px; }

#logo {
float: left; }

#contacthead {
margin: 32px 0 0 0;
float: right; }

#container {
margin: 25px auto 0 auto;
width: 650px }

#prefooter {
border-top: 1px dotted #4c4c57;
padding: 3px 0; }

#footer {
clear: both;
border-top: 1px dotted #4c4c57;
padding: 6px 0 0 0;
color: #a5a5b3;
font-size: 9px; }

#leftcol {
float: left;
width: 450px; }

#rightcol {
float: left;
width: 200px; }

/* Moo.FX */

.accToggler {
background-color: #4c4c57;
margin: 0;
padding: 7px;
cursor: pointer;
color: #2f2f36;
font: 15px helvetica, arial, sans-serif; }

.accToggler a {
font-weight: normal; }

.accToggler a:hover {
color: #2f2f36; }

.accContent {
margin: 0 0 10px 0;
clear: both; }

.accContent p {
margin: 9px 0 0 0; }

/* Lightbox */

#lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0; }

#lightbox a img {
border: none; }

#outerImageContainer {
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto; }

#imageContainer {
padding: 10px; }

#loading {
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0; }

#hoverNav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10; }

#imageContainer>#hoverNav {
left: 0; }

#hoverNav a {
outline: none; }

#prevLink, #nextLink {
width: 49%;
height: 100%;
background: transparent url(images/blank.gif) no-repeat;
/* Trick IE into showing hover */
display: block; }

#prevLink {
left: 0;
float: left; }

#nextLink {
right: 0;
float: right; }

#prevLink:hover, #prevLink:visited:hover {
background: url(images/prevlabel.gif) left 15% no-repeat; }

#nextLink:hover, #nextLink:visited:hover {
background: url(images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer {
font: 10px 'lucida grande', arial, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
overflow: auto;
width: 100% }

#imageData {
padding: 0 10px;
color: #666; }

#imageData #imageDetails {
width: 70%;
float: left;
text-align: left; }

#imageData #caption {
font-weight: bold; }

#imageData #numberDisplay {
display: block;
clear: left;
padding-bottom: 1.0em; }

#imageData #bottomNavClose {
width: 66px;
float: right;
padding-bottom: 0.7em; }

#overlay {
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #2f2f36; }