/* Global Elements */
img { vertical-align:bottom; } 
/* Links - Generic links for site  */
a, a:link, a:visited, a:active {  text-decoration:none; color: #5a5a5a; } 
a:hover, a:focus { color:#fff; text-decoration: none; color: black;}
strong { font-weight:bold; }
.clear  {  clear:both; } 
.left  {  float:left; } 
.right  {  float:right; } 
.bold {font-weight:bold}
p { padding-bottom: 10px;}

/* Accessibility - Skip To Main Content */
#skpnav, .skip { position:absolute;top:0;left:-9999px; } /* Positioned offscreen but readable by screen readers */

/* Layout/shell */
body  { text-align:left ; background: #fff; font:75% Arial, Helvetica, sans-serif; color: black; margin: 0; padding: 0; } 
#pageWrap { position: relative; min-height: 100%; height: 100%; voice-family: "\"}\""; voice-family: inherit; height: auto; }
html>body #pageWrap { height: auto; }
#pageWrap .container  { width: 750px; margin:0 auto; position: relative; } 

#logo { padding-top: 40px; padding-bottom: 10px; }

#menu { position: relative; top: -23px; left: 507px; width: 280px;}

ul.menu {list-style:none; margin:0; padding:0}
ul.menu * {margin:0; padding:0}
ul.menu a {display:block; color:#000; text-decoration:none}
ul.menu li {position:relative; float:left; margin-right:2px}
ul.menu ul {position:absolute; top:23px; left:0; background:#fff; display:none; opacity:0; list-style:none}
ul.menu ul li {position:relative; border-top:none; width:168px; margin:0}
ul.menu ul li a {display:block; padding:10px 7px 5px; background-color:#fff; margin-left: 15px; margin-top: 5px;}
ul.menu ul li a:hover {background-color:#fff}
ul.menu ul ul {left:118px; top:-1px}
ul.menu .menulink { padding:10px 7px 7px; font-weight:bold; background:url(../images/header.gif); width:114px}
ul.menu .menulink:hover, ul.menu .menuhover {background:url(../images/header_over.gif)}
ul.menu .sub {background:#fff url(../images/arrow.gif) 118px 8px no-repeat}


#nav .navPortfolio { background: url(../images/nav_portfolio.gif) no-repeat; display: block; width: 93px; height: 12px; text-indent: -10000px; padding-right: 25px;}
#nav .navInfo { background: url(../images/nav_info.gif) no-repeat; display: block; width: 38px; height: 12px; text-indent: -10000px; padding-right: 25px;}
#nav .navBlog { background: url(../images/nav_blog.gif) no-repeat; display: block; width: 43px; height: 12px; text-indent: -10000px; padding-right: 25px;}
#nav .navMusic { background: url(../images/nav_music.gif) no-repeat; display: block; width: 51px; height: 12px; text-indent: -10000px; padding-right: 25px;}
#nav .navParty { background: url(../images/nav_party.gif) no-repeat; display: block; width: 51px; height: 12px; text-indent: -10000px; padding-right: 25px;}
#nav .navCommercial { background: url(../images/nav_commerical.gif) no-repeat; display: block; width: 110px; height: 12px; text-indent: -10000px; padding-right: 25px;}
#nav .navEditorial { background: url(../images/nav_editorial.gif) no-repeat; display: block; width: 86px; height: 12px; text-indent: -10000px; padding-right: 25px;}
#nav .navDoc { background: url(../images/nav_doc.gif) no-repeat; display: block; width: 131px; height: 12px; text-indent: -10000px; padding-right: 25px;}
#nav .navTravel { background: url(../images/nav_travel.gif) no-repeat; display: block; width: 62px; height: 12px; text-indent: -10000px; padding-right: 25px;}
#nav .navProjects { background: url(../images/nav_projects.gif) no-repeat; display: block; width: 77px; height: 15px; text-indent: -10000px; padding-right: 25px;}
#nav .navPirate { background: url(../images/nav_pirate.gif) no-repeat; display: block; width: 114px; height: 15px; text-indent: -10000px; padding-right: 25px;}
#nav .navFest { background: url(../images/nav_fest.gif) no-repeat; display: block; width: 224px; height: 15px; text-indent: -10000px; padding-right: 25px;}

#pageHome { position: relative; width: 750px; height: 500px; }
#pageHome #music { position: absolute; top: 0; left: 0; }
#pageHome #party { position: absolute; top: 0; left: 224px; }
#pageHome #doc { position: absolute; top: 0; left: 457px; }
#pageHome #projects { position: absolute; top: 336px; left: 0; }
#pageHome #editorial { position: absolute; top: 196px; left: 224px; }
#pageHome #travel { position: absolute; top: 196px; left: 666px; }

#pageHome img:hover {filter:alpha(opacity=85); -moz-opacity: 0.85; opacity: 0.85; } 

#footer { position: absolute; top: 590px;  }
#copyright {position: absolute; top: 592px; left: 635px; width: 120px; font-size: 80%; color: #5a5a5a;}

#pageContent { position: relative; width: 750px; }
.content #footer { position: relative; top: inherit; border-top: 1px solid black; padding-top: 5px;}

.projects #pageContent { height: 500px;  }

/**************************/
/* FIXES */
/**************************/

/* Clearing & containment Classes */
.clearfix:after{content:".";/* This dot is the actual appended content */  clear:both;height:0;visibility:hidden;display:block;}
/* Clearing element for a float:*/
.clearLeft{clear:left;}
.clearRight{clear:right;}
.clearBoth{clear:both;}
.clearNone{clear:none;}
.brclear{clear:both;height:0;margin:0;font-size:1px;line-height:0;}



/* */
h3  { margin: 12px 12px 0 12px; }
h3 a { font-weight: bold; font-size: 130%; color: White !important; }
h3 a:hover { color: White; }
.boxgrid img {position: absolute; top: 0; left: 0; border: 0; cursor: pointer; }
.boxgrid p { padding: 0 10px; color:#afafaf; font-weight:bold; cursor: pointer; }
.boxcaption { cursor: pointer;
float: left; position: absolute; background: #000; height: 100px; width: 100%; opacity: .8; 
/* For IE 5-7 */ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); 
/* For IE 8 */ -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

#music.boxgrid { width: 224px; height: 336px; margin:10px; float:left; background:#161613; overflow: hidden; position: relative; }
.captionfull .boxcaption { top: 500px; left: 0; }
.caption .boxcaption { top: 500px; left: 0; }