@import"css/reset.css";

/* Colors
BG #E2E1E2
content BG: d7d7d7
ÒDark GreyÓ #E2E1E2
ÒYellowÓ #FFF000
ÒCyanÓ #00AEEF
rollover : 464646
*/

/*********************/
/** COLOR USAGE **/
/*********************/
body {
	background-color: #e2e1e2;}

a {
	color: #00aeef;
	text-decoration: none;}
	
strong {
	font-weight: bold;
}
	
body, a:hover, a.selected, a.selected-scrim {
	color: #464646;}
	
body #morecontent, #morecontent a:hover, #morecontent a.selected {
	color: #ffffff;}

/*********************/
/** TYPOGRAPHY **/
/*********************/

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;}

#mnav h1 {
	font-weight: bold;
	font-size: 1.9em;
	line-height: 1em;
	text-transform: uppercase;}

.home #mnav h1 {
	font-size: 7.2em;}
	
.home #mnav p, .home #mnav ul li, #share li li, #contact li p, #morecontent #share h3, .second #artists li {
	font-size: 1.4em;
	line-height: 1.2em;}
	
.second #artists li li{
	font-size: .71em;
	line-height: .71em;}
	
.artist h2 {
	font-size: 1.6em;}
	
h3 {
	font-size: 1.2em;}
	
.artist p {
	line-height: 1.2em;}


/*********************/
/** STRUCTURE **/
/*********************/
#rap {
	width: 915px;
	margin: 0 auto;
	height: 680px;
	position: relative;}
	
#header {
	margin-top: 35px;}
	
#header, #body, #footer {
	margin-left: 35px;}
	
.home #header, .home #body, .home #footer {
	margin-left: 31px;}
	
#logo a{
	display: block;
	text-indent: -999em;
	background: transparent url(img/basic/logo.gif) no-repeat top left;
	height: 14px;
	width: 175px;
	margin: 0 0 12px 0px;}
	
/* HOME STYLES */
.home #logo {
	margin: 0 0 17px 4px;}

.home #mnav h1 {
	height: 68px;}
	
.home #mnav h1 a{
	display: block;}
	
.home #mnav p, .home #mnav ul {
	margin: 10px 0 0 4px;
	width: 575px;
	padding-bottom: 0px;}
	
#pnav {
	position: absolute;
	bottom: 0px;
	right: 0px;}
	
#pnav li {
	float: left;
	display: inline;
	margin-right: 6px;}
	
.home #share, .home .artist, .home #contact {
	background: transparent url(img/basic/bubbletail.png) no-repeat left center;}
	
.home #share, .home #contact {
	position: absolute;
	top: 10px;
	left: 130px;
	width: 368px;}
	
.home #share .wrapper, .home #contact .wrapper {
	background-color: #ffffff;
	margin-left: 120px;
	width: 210px;
	padding: 19px;
	overflow: hidden;}
	
.home #share .wrapper {
	height: 481px;
	overflow: hidden;}
	
.home #contact .wrapper .container, .home #share .wrapper .container {
	background-color: #d7d7d7;}
	
.home .wrapper .slide {
	margin: 13px 0 13px 0;
	height: 455px;
	position: relative;
	top: 0px;
	left: 0px;
	overflow: hidden;}

.home #contact .wrapper ul, .home #share .wrapper ul {
	width: 182px;
	padding: 0 14px 0;}
	
.home #contact .wrapper ul li, .home #share .wrapper ul li {
	width: 175px;}
	
.home #share .wrapper ul ul, .home #contact .wrapper ul ul{
	background-color: transparent;
	width: auto;
	height: auto;
	padding: 0px;}
	
.home #share .wrapper ul ul{
	padding-bottom: 40px;}
	
#contact .wrapper ul li{
	padding-top: 25px;}
	
#contact .wrapper ul .logo, #contact .wrapper #contacts li:first-child{
	padding-top: 0px;}
	
.home .artist {
	position: absolute;
	width: 470px;
	top: 10px;
	left: 130px;}
	
.home .artist .wrapper {
	width: 313px;
	background-color: #ffffff;
	padding: 19px 19px 10px 19px;
	margin-left: 120px;}
	
.artist h2 {
	padding-top: 12px;}

h2 + p {
	padding-top: 5px;
}

.artist p {
	padding-bottom: 10px;}
	
.home #share .wrapper .slider {
	height: 353px;
	margin-bottom: 100px;
	width: 7px;}
	
.sliderwrapper {
	height: 470px;
	width: 7px;
	position: absolute;
	top: 4px;
	right: 0px;
	background-color: #000000;}
	
.home #share .wrapper .sliderwrapper {
	height: 453px;
	position: absolute;
	top: 32px;
	right: 32px;}
	
.home #share .container {
	overflow: hidden;
	position: relative;
	height: 481px;
	width: 210px;}
	
.home #share .innercontainer {
	position: absolute;
	top: 0px;
	left: 0px;}
	
/* SECOND PAGE STYLES */
.second #mnav {
	display: block;
	width: 860px;
	height: 22px;
	margin-bottom: 12px;}

.second #mnav li {
	display: inline;
	float: left;
	margin-right: 5px;}
	
.second #body {
	position: relative;
	width: 880px;
	height: 570px;
	background-color: #949494;
	overflow: hidden;}
	
.second .artist-title {
	background-color: #00aeef;
	font-size: 2.0em;
	padding: 18px 20px 22px;
	width: 840px;
	position: absolute;
	bottom: 0px;
	left: 0px;}
	
#morecontent {
	background: transparent url(img/basic/scrim.png) repeat top left;
	position: absolute;
	top: 0px;
	left: 0px;
	height: 510px;
	width: 820px;
	padding: 30px;
	z-index: 99;}
	
#close-btn {
	display: block;
	text-indent: -999em;
	background: transparent url(img/basic/close-btn.gif) no-repeat top left;
	height: 18px;
	width: 54px;
	position: absolute;
	top: 0px;
	right: 0px;}
	
#close-btn:hover {
	background-position: bottom left;}
	
#morecontent #share {
	width: 900px;}
	
#morecontent #share ul {
	margin-top: 0px;}
	
#morecontent #share .wrapper {
	overflow: auto;}
	
#morecontent #share ul li {
	width: 175px;
	float: left;
	display: inline;
	margin-right: 38px;
	position: relative;}

#morecontent #share ul ul{
	position: absolute;
	top: 0px;
	left: 0px;}

#morecontent #share ul li li{
	width: 168px;
	display: block;
	float: none;}
	
#morecontent #share ul li .wrapper{
	height: 476px;
	overflow: hidden;
	position: relative;
	margin-top: 6px;}
	
#morecontent #share h3 {
	margin-bottom: 3px;}
	
#morecontent #contact {
	margin: 54px 0 0 645px;}
	
#morecontent .artist {
	position: absolute;
	left: 180px;
	top: 30px;
	width: 313px;}
	
#work {
	margin-top: 149px;
	width: 831px;
	margin-left: 30px;
	position: relative;}
	
.hasjs #work ul {
	width: 1600px;}
	
#work li{
	float: left;
	display:inline;
	margin: 0 11px 11px 0;
	width: 266px;
	position: relative;}
	
.hasjs #work li {
	height: 200px;
	overflow: hidden;}
	
.hasjs #work .details {
	display: none;} 
	
#scrollbtn-lft, #scrollbtn-rt {
	background-color: #464646;
	position: absolute;
	height: 107px;
	width: 10px;
	z-index: 10;
	top: 0px;
	padding-top: 93px;}
	
#scrollbtn-lft {
	left: -21px;
	padding-left: 2px;}

#scrollbtn-rt{
	right: -10px;
	padding-left: 3px;}
	
#work .hovertext{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 266px;
	height: 200px;
	background: transparent url(img/basic/75k.png) repeat top left;
	}
#work .hovertext p{	
	width: 200px;
	margin: 0 auto;
	text-align: center;
	color: #FFF000;
	font-size: 1.4em;
	line-height: 1.1em;}
	
	
/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }


/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }


/* Icons
----------------------------------*/

/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
	
/* Slider
----------------------------------*/
.ui-slider { position: relative; text-align: left; }
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; }

.ui-slider-vertical { width: .8em; height: 100%; }
.ui-slider-vertical .ui-slider-handle { margin-left: 0; margin-bottom: -100px; background-color: #00AEEF; width: 7px; height: 100px; }
.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
.ui-slider-vertical .ui-slider-range-max { top: 0; }


p {
	padding-bottom: 15px;
}

/* HAS JS Styles */
.hasjs .home .artist, .hasjs .home #share, .hasjs .home #contact {
	display: none;}
	
.hasjs #mnav ul, .hasjs #mnav p {
	display: none;}
	
.hasjs #morecontent, .hasjs #morecontent #share, .hasjs #morecontent #artists, .hasjs #morecontent .artist, .hasjs #morecontent #contact {
	display: none;}
	
/* jCarousel */
jcarousel-container {
    position: relative;
}

.jcarousel-clip {
    z-index: 2;
    padding: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
width: 830px;
}

.jcarousel-list {
    z-index: 1;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

.jcarousel-list li,
.jcarousel-item {
    float: left;
    list-style: none;
    /*We set the width/height explicitly. No width/height causes infinite loops.*/ 
    width: 75px;
    height: 75px;
}

/*********************/
/* LIGHTBOX */
/*********************/

#lightboxwall {
	height: 100%;
	width: 100%;
	background: transparent url(img/basic/scrim.png) repeat top left;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 100;}

* html div#lightboxwall {
	position: absolute;
	height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}
  
#lightbox .rap {
	width: 498px;
	margin: 0 31px;
	padding: 20px;
	position: relative;
	background-color: white;}

#lightbox .sectioncontent {
	border-bottom: none;}

#lightbox .post, #lightbox .rap .post{
	margin-bottom: 12px;
	overflow: visible;
	font-size: 100%;} 

#lightbox .post h5{
	padding-top: 340px;}  
  
#lightbox img {
	position: absolute;
	top: 30px;
	left: 0px;}
	
#lightbox .description, #lightbox .metadesc {
	float: left;}
	
#lightbox .description p {
	margin-bottom: 4px;
	font-style: normal;
	font-size: 1.2em;
	line-height: 1.5em;}

#lightbox .navigation{
	position: absolute;
	bottom: 0px;
	left: 0px;}
	
#lightbox .navigation .alignright a{
	float: right;
	display: block;}
	
#lightbox .navigation .alignleft a{
	float: left;
	display: block;}
  
#lightbox .navigation .alignright a:hover, #lightbox .navigation .alignleft a:hover{
	background-color: #64594e;}
  
#lightbox .addtoany_share_save_container {
	margin: 5px 0 !important;}
	
.home #lightbox .post p, .home #lightbox .post h5 {
	padding-left: 0px;}
	
.addtoany_share_save {	
	left: 10px;}
	
	
#lightbox .imgnav li {
	display: inline;
	float: left;}
	
#lightbox .imgnav li a, .removelightbox {
	font-family: Times, Georgia, serif;
	padding: 2px 5px 1px;
	font-size: 1em;
	font-style: italic;
	background-color: #ffffff;
	margin-left: 8px;
	color: #000000;
	text-decoration: none;}
	
#lightbox .imgnav li a:hover, #lightbox .imgnav li a.selected, .removelightbox:hover {
	background-color: #FFD400;}

#lightbox .imgnav {
	position: absolute;
	top: 0px;
	right: 60px;}
	
.home #lightbox .post h5 {
	margin: 0px;
	padding-bottom: 0px;
	border-bottom: none;}
	
#lightbox #shadowbox-close {
	position: absolute;
	top: 8px;
	right: 18px;
	display: block;
	text-indent: -999em;
	background: transparent url(img/basic/shdwbx-close.gif) no-repeat top left;
	height: 9px;
	width: 40px;}
	
#lightbox #shadowbox-close:hover {
	background-position: bottom left;}

#lightbox{
position:relative;
margin:0 auto;
padding: 27px 17px 17px;
overflow:visible;
height: 50%;
background-color: #d7d7d7;}


#lightbox {
	position: relative;
	height: auto;
	top: 75px;}
	
#lightbox .details ul {
	margin-top: 18px;}

#lightbox .details li span {
	font-size: .83333em;
	font-weight: normal;}

#lightbox .details li {
	font-size: 1.2em;
	line-height: 1.2em;
	font-weight: bold;
	display: block;
	float: none;
	height: auto;}
	
/* .hasjs styles */
.hasjs #portfolio{
	overflow: hidden;
	height: 360px;
}