@charset "utf-8";
/* CSS Document */

body{
	background-image:url(../img/all.jpg);
	background-position:center top;
	background-repeat:repeat-x;
	background-color:#ededed;
	text-align:center;
	padding:0px;
	margin:0px;
}


a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}

a{outline: none;}


.hidden{display:none;}

#innercity{
	background-image:url(../img/bg.jpg);
	width:1200px;
	height:800px;
	text-align:left;
	margin:0px auto;

}


#container{
	position:relative;
	padding:480px 0px 0px 400px;
}
	

.progressBar{
	color:#000;
	position:relative;font-family: Century Gothic, sans-serif;
}


<!-- The Bottom part -->

#theHood{
	position:relative;
	width:100%;
}

#theHood img 
  {
  border:0px solid #0000ff;
  }




/*************************  The COrner a.k.a the freaking menu  ************************************
****************************************************************************************************
****************************************************************************************************
***************************************************************************************************/ 

.left{
	position:relative;
	float:left;
	top:-32px;
	padding-left:100px;
	}

.right{
	position:relative;
	float:right;
	padding-right:0px;
	top:-32px;
	}




/***************************************************************************************************
****************************************************************************************************
****************************************************************************************************
***************************************************************************************************/ 
ul.theCorner {
	list-style:none;
}
ul.theCorner li {
	float:left;
}

ul.theCorner2 {
	list-style:none;
}
ul.theCorner2 li {
	float:left;
}


#message{
	width:400px;
	height:200px;
	font-size:12px;font-family: Century Gothic, sans-serif;
	text-align:center;
}

.info img a:hover{
	background-image:url(../img/info%5B0%5D.png);
}

#goodies{
	width:400px;
	height:300px;

}

















/*
 ******************************************************************************
 * Goodies content slider
 * 
 ******************************************************************************
 */
.contentslider {
  position:relative;
  display:block;
  width:400px;
  height:300px;
  top:60px;
  left:-330px;
  margin:0 auto;
  overflow:hidden;
}

.cs_wrapper {
  position:relative;
  display:block;
  width:400px;
  height:300px;
  margin:0;
  padding:0;
  overflow:hidden;
}
.cs_slider {
  position:absolute;
  width:10000px;
  height:100%;
  margin:0;
  padding:0;
}
.cs_article {
  float:left;
  position:relative;
  top:0;
  left:0;
  display:block;
  width:400px;
  height:300px;
  margin:0 auto;
  padding:0;
}
.cs_article h2 {
  display:block;
  width:26%;
  margin:10px 26px 5px 67%;
  text-align:left;
font-size:12px;
}
.cs_article img {
  position:absolute;
  top:0;
  left:0;
  border:0;
  -ms-interpolation-mode:bicubic;
}
.cs_article p {
  padding:140px 0px 0px 10px ;
  width:340px;
  font-size:12px;font-family: Century Gothic, sans-serif;
  text-align:center;
}
.cs_article .readmore {
  display:block;
  width:26%;
  margin:0 6% 1% 68%;
  text-align:right;
}
.cs_leftBtn, .cs_rightBtn {
  position:absolute;
  top:0;
  height:300px;
  padding:10px 0;
  z-index:10000;
}
.cs_leftBtn {
  left:0;
  outline:0;
}
.cs_rightBtn {
  right:0;
  outline:0;
}
.cs_leftBtn img {
  border:0;
  position:relative;
  top:100px;
  left:-2px;
  margin:0;
}

.cs_rightBtn img {
  border:0;
  position:relative;
  top:112px;
  margin:0;
  right:16px;
}




/*
 ******************************************************************************
 * Colorbox
 * 
 ******************************************************************************
 */

/*
    ColorBox Core Style
    The following rules are the styles that are consistant between all ColorBox themes
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative; overflow:visible;}
#cboxLoadedContent{overflow:auto;}
#cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}

/* 
	ColorBox example user style
	These rules are ordered and tabbed in a way that represents the order/nesting of the generated HTML, 
	in hope that this will make the relationship easier to understand. Thanks, jack@colorpowered.com
*/
#cboxOverlay{background:#000;}

#colorbox{}
	#cboxContent{background:#000; margin-top:20px;}
		#cboxLoadedContent{background:#000; padding:5px;}
                #cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}
                #cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;}
                #cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
                #cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(../img/controls.png) top left no-repeat; width:28px; height:65px; text-indent:-9999px;}
                #cboxPrevious.hover{background-position:bottom left;}
                #cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(../img/controls.png) top right no-repeat; width:28px; height:65px; text-indent:-9999px;}
                #cboxNext.hover{background-position:bottom right;}
                #cboxLoadingOverlay{background:#000;}
		#cboxLoadingGraphic{background:url(images/loading.gif) center center no-repeat;}
		#cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(../img/controls.png) top center no-repeat; width:38px; height:19px; text-indent:-9999px;}
		#cboxClose.hover{background-position:bottom center;}


#form{
	background:white;
	width:700px; 
	height:420px;
	text-align:left;
	scroll:none;
	background-image:url(../img/form.png);
	background-color:#CCC;
	background-repeat:no-repeat;
	
}

#form .charlimit{
	position:relative;
	color:#C00;
	font-size:35px;
	font-weight:bolder;
	position:relative;font-family: Century Gothic, sans-serif;
	top:-250px;
	left:540px;
}

#form .message{
	border: solid 0px;
	background-color:transparent;
	margin:80px 0px 0px 180px;
	width:300px;
	height:200px;
	font-size:20px;
	position:relative;font-family: Century Gothic, sans-serif;
}

#form .name{
	border: solid 0px;
	background-color:transparent;
	margin:60px 0px 0px 90px;
	width:300px;
	color:#FFF;
	font-size:17px;
	position:relative;font-family: Century Gothic, sans-serif;
}
	
#form .reset{
	position:relative;
	top:-250px;
	left:50px;
	cursor:pointer;
	width:90px;
	height:40px;
	border:solid 0px;
	background-color:transparent;
	
}

#form .submit{
	position:relative;
	top:-170px;
	left:484px;
	width:97px;
	cursor:pointer;
	height:40px;
	border:solid 0px;
	background-color:transparent;
}





/* The Mask ****************************************************/

#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}
  
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:700px;
  height:420px;
  display:none;
  z-index:9999;
}

#boxes #dialog {
  width:375px; 
  height:203px;
  padding:10px;
  background-color:#ffffff;
}



/* MP3 Player ****************************************************/

#mp3{
	position:relative;
	width:250px;
	height:200px;
	background-color:#3CF;
	left:400px;
}


/* Friends ****************************************************/

#friends{
	width:400px;
	height:200px;
}

ul.friends{
	list-style:none;
	position:relative;
}

ul.friends li{
	position:relative;
	width:68px;
	height:68px;
	float:left;
	margin-left:5px;
	margin-bottom:5px;
}