/* partial 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;
}

ol, ul {
list-style: none;
margin; 0;
padding: 0;
 }
  
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}



html{
overflow-x: hidden;
}


/* BODY */
body {
padding-right:20px;
padding-left:20px;
margin:0; 
border:none;
background: #FFFFFF;
}




/* FONT STYLES */

p, h1 { 
margin: 0px; 
padding: 0px; 
}

p {
font-size: small;
}


/* IMAGE STYLES */

img {
border: none;
margin: 0px;
padding: 0px;
}





/* LINK STYLES */

a { 
text-decoration: none; 
color: #000; 

}
a img { 
border: 0px; 
}

div#menu a {
color: #aaa;
letter-spacing: .1em;
}

div#menu a:visited {
color: #aaa;
}

div#menu a:active {
color: #aaa;
}

div#menu a:hover {
color: #aaa;
}



/*OPACITY PANEL*/
div#panelwrap{
width:100%;
height:520px;
position:absolute;
top:45px;
z-index:99;
left:0;
overflow:hidden;
}

#panelsizer{
overflow:hidden;
height:520px;
z-index:1000;
margin-right:20px; 
}

div#panel{
display:none;
position:realtive;
margin-left:45px;
height: 520px;
background: url("images/orange.png");
z-index:1000;
opacity:0.9;
filter:alpha(opacity=90);
overflow:hidden;
}

#button{
position:absolute;
top:45px;
left:20px;
height:520px;
width:25px;
text-align:left; 
background: url("images/btnback2.png") 0 0 no-repeat;
z-index:100;

}

#button:hover{
background-position: -25px 0;
}

#close{
height:20px;
width:85px;
float:right;
margin-right:10px;
margin-top:20px;
background: url("images/closeback.png") 0 0 no-repeat;
opacity:0.9;
filter:alpha(opacity=90);
}

#close:hover{
background-position: 0 -20px;
}

.titlewrapper{
position:absolute;
top:50px;
width:100%;
}

#panelcopy{
float:left;
margin-top:80px;
height:300px;
width:100%;
opacity:0.9;
filter:alpha(opacity=90);
overflow:visible;
}


#hello{
float:left;
height:300px;
width:100%;
background: url("images/philadelphia.png") center center no-repeat;
opacity:0.9;
filter:alpha(opacity=90);
}

#portraitinfo{
float:left;
margin-top:40px;
height:80px;
width:100%;
background: url("images/portrait.png") center center no-repeat;
opacity:0.9;
filter:alpha(opacity=90);
}


#nightlife1{
float:left;
margin-top:40px;
height:80px;
width:100%;
background: url("images/nightlife1.png") center center no-repeat;
opacity:0.9;
filter:alpha(opacity=90);
}

#nightlife2{
float:left;
margin-top:40px;
height:80px;
width:100%;
background: url("images/nightlife2.png") center center no-repeat;
opacity:0.9;
filter:alpha(opacity=90);
}

#music1{
float:left;
margin-top:40px;
height:80px;
width:100%;
background: url("images/music1.png") center center no-repeat;
opacity:0.9;
filter:alpha(opacity=90);
}



#music2{
float:left;
margin-top:40px;
height:80px;
width:100%;
background: url("images/music2.png") center center no-repeat;
opacity:0.9;
filter:alpha(opacity=90);
}


#arielle{
float:left;
margin-top:40px;
height:80px;
width:100%;
background: url("images/arielle.png") center center no-repeat;
opacity:0.9;
filter:alpha(opacity=90);
}

#camping{
float:left;
margin-top:40px;
height:80px;
width:100%;
background: url("images/camping.png") center center no-repeat;
opacity:0.9;
filter:alpha(opacity=90);
}





/* SPLASH*/

div#splashwrapper{
width:100%;
height:520px;
background:#ffffff;
overflow:visible;
top:45px;
}

#left{
position:absolute;
top:45px;
left:0px;
width:27%;
height:520px;
background:#ffffff;
}


#centerleft{
position:absolute;
top:45px;
left:27%;
width:25%;
height:520px;
background:#ffffff;
}

#centerright{
position:absolute;
top:45px;
left:50%;
width:25%;
height:520px;
background:#ffffff;
}

#right{
position:absolute;
top:45px;
left:75%;
width:25%;
height:520px;
background:#ffffff;
}

#innertubec{
background: url(images/splash/splash10.jpg) no-repeat center center;
height: 520px;
}

#innertubecr{
margin-left:5px;
margin-right:5px;
background: url(images/splash/splash2.jpg) no-repeat center center;
height: 520px;
}

#innertubecl{
margin-left:5px;
background: url(images/splash/splash10.jpg) no-repeat center center;
height: 520px;
}

#innertuber{
margin-right: 20px; 
background: url(images/splash/splash4.jpg) no-repeat center center;
height: 520px;
}

#innertubel{
margin-left:51px;
background: url(images/splash/splash5.jpg) no-repeat center center;
height: 520px;
}




/* DIV CLASSES */

.clear { 
clear: both; 
}


.content1 { 
float:left;  
width: 100%;
height:520px;
}


.single_image_holder { 
float: left; 
height:520px;
margin-left: 5px; 
margin-right: 0px; 
color: #000000; 
background: url("images/loading.gif") 30px 490px no-repeat;
}


.infotext{
margin-top:5px;
margin-bottom:15px;
font:normal 12px helvetica;
color: #a5a5a5;
}

.infotext a {
color: #a5a5a5;
letter-spacing: .1em;
}

.infotext a:visited {
color: #a5a5a5;
}

.infotext a:active {
color: #a5a5a5;
}

.infotext a:hover {
color: #ffffff;
}

.infotext span{
color:#cc9966;
font-style:normal;
}

.infotext span:hover{
color:#ffB860;
font-style:normal;
}


/* DIV IDS */
div#profilepic{
float: left;
width: 100%;
height: 520px;
background:url('images/profile.jpg') 0 0 no-repeat;
background-color: #000000;
padding:0;
margin:9px 0 0 0;
}

div#infomat{
height:510px;
width:50%;
margin-left: 335px;
margin-top:10px;
padding-top:170px;
}

div#biotext{
height: 17px;
width: 300px;
background:url('images/bio.png') 0 0 no-repeat;
}

div#contacttext{
height: 17px;
width: 300px;
background:url('images/contact.png') 0 0 no-repeat;
}

div#links1{
height: 17px;
width: 300px;
background:url('images/links1.png') 0 0 no-repeat;
}

div#links2{
height: 17px;
width: 300px;
background:url('images/links2.png') 0 0 no-repeat;
}


#content {
padding:0;
margin-top:6px;
margin-bottom:0px;
display:block;
width:100%;
}

#content2{
padding:0;
margin-left:20px;
margin-right:20px;
}

#content2wrap{
position:absolute;
top: 45px;
left:0;
width:100%;
}


#content3{
padding:0;
margin:0;
overflow:hidden;
width:100%;
}


/* scrollbar */
.scrollgeneric {
line-height: 1px;
font-size: 1px;
position: absolute;
top: 0; left: 0;
}

.vscrollerbase {
width: 10px;
background-color: white;
}

.vscrollerbar {
width: 10px;
background-color: black;
}

.hscrollerbase {
height: 10px;
background-color: #d8d8d8;
padding:0;
margin-top :-3px;
}

.hscrollerbar {
height: 10px;
width: 55px !important;
background: #000000 url(images/scroll2beg.png) 6px -3px repeat-x;
}

.scrollerjogbox {
width: 10px;
height: 10px;
top: auto; 
left: auto;
bottom: 0px; 
right: 0px;
background-color: #000000;
}

#mycustomscroll2 { /*percantage width: make it 100% to match container*/
width: 100%;
height: 538px;
overflow: auto;
/* IE overflow fix, position must be relative or absolute*/
position: relative;
background-color: #FFFFFF;
margin-left: 0;
/* negative left margin to compensate for the padding,
not related to fleXcroll, and may not be needed elsewhere */
padding:0;
}

/*percentage width: the real percentage is done by the wrapper
this is to fix various IE6 bugs */
.percentagewrap {
width: 100%;
margin: 0 auto;
padding: 0px;
}

.fixedwidth {
height:520px;
top:0;
left:0;
position: absolute;
color: black;
padding: 0px;
margin-left:25px;
}

#fivepixels{
position:absolute;
top:45px;
left:20px;
height:520px;
width:30px;
background:#ffffff;
z-index:98;
}


 				  
				 
/* MENU */
div#logo {
display:inline;
float:left;  
overflow:hidden; 
width: 325px; 
height: 20px;
background: url("images/logo.jpg");
background-repeat: no-repeat;
background-position: 5px 0px;
}


div#chromemenu { 
float:right;
width:460px;
margin-top:3px;
display:block;
}

div#header { 
float:left;
width:100%;
margin-top:7px;
margin-bottom:2px;
overflow:hidden;
dispaly:block;
}

div#menu {
margin-top: 0px;
float: right;
}

ul#mainmenu{
height:20px;
padding: 0;
}

ul#mainmenu li a.portraitmain {
float:left; 
overflow:hidden;
display:block;
width: 94px; 
height: 20px;
background: url("images/portrait.jpg") 9px 0 no-repeat;
padding: 0;
margin-right: 8px;
}

ul#mainmenu li a.portraitmain:hover{
background-position: 9px -21px;
}

ul#mainmenu li a.portraitmain span{
display:none;
}


ul#mainmenu li a.eventmain {
float:left; 
overflow:hidden;
display:block;
width: 65px; 
height: 20px;
background: url("images/event.jpg") 6px 0 no-repeat;
padding: 0;
margin-right: 8px;
}

ul#mainmenu li a.eventmain:hover{
background-position: 6px -21px;
}

ul#mainmenu li a.eventmain span{
display:none;
}


ul#mainmenu li a.musicmain {
float:left; 
overflow:hidden;
display:block;
width: 66px; 
height: 20px;
background: url("images/music.jpg") 8px 0 no-repeat;
padding: 0;
margin-right: 8px;
}

ul#mainmenu li a.musicmain:hover{
background-position: 8px -21px;
}

ul#mainmenu li a.musicmain span{
display:none;
}


ul#mainmenu li a.infomain {
float:left; 
overflow:hidden;
display:block;
width: 53px; 
height: 20px;
background: url("images/info.jpg") 7px 0 no-repeat;
padding: 0;
margin-right: 8px;
}

ul#mainmenu li a.infomain:hover{
background-position: 7px -21px;
}

ul#mainmenu li a.infomain span{
display:none;
}


ul#mainmenu li a.blogmain {
float:left; 
overflow:hidden;
display:block;
width: 58px; 
height: 20px;
background: url("images/blog.jpg") 7px 0 no-repeat;
padding: 0;
margin-right: 8px;
}

ul#mainmenu li a.blogmain:hover{
background-position: 7px -21px;
}

ul#mainmenu li a.blogmain span{
display:none;
}


ul#mainmenu li a.accessmain {
float:left; 
overflow:hidden;
display:block;
width: 141px; 
height: 20px;
background: url("images/access.jpg") 7px 0 no-repeat;
padding: 0;
margin-right: 0px;
}

ul#mainmenu li a.accessmain:hover{
background-position: 7px -21px;
}

ul#mainmenu li a.accessmain span{
display:none;
}