/*----- 24/03/10 --- 13:49 --- PM --- 1 */

/*-----------------------------*/
/*----- generic styles ------ */
/*---------------------------*/

* {
	margin: 0;
	padding: 0;
}

body {
	background-color: #000;
	background: url(../images/background.gif) center 0 repeat-y fixed;
	font-size: 14px;
	line-height: 19px;
	color: #fff;
}

/* get rid of those system borders being generated for A tags */
a:active {
  outline: none;
}

:focus {
  -moz-outline-style: none;
}


/* Make the best of Lucida */

body, textarea {
    font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
}

strong, em, b, i {
    font-family: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6, address {
    font-family: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
}

/* */




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

	a:hover {
		color: #0b8bc6;
		cursor: pointer;
		
	}


	
img {
	border: 0;
	text-align: left;
}



abbr, acronym {
	cursor: help;
	border: 0;
}



ul {
	list-style: none;
	line-height: 19px;
}
	
	

.clear {
	clear: both;
}


.hide {
	display: none;
}


hr {
	display: none;
}

textarea {
	font-size: 11px;
	line-height: 16px;
	font-weight: normal;
}



/*-----------------------------*/
/*----- headings styles ------ */
/*---------------------------*/




h1 span,
h2 span,
h3 span,
#joinusbutton a span,
#mainnav ul li span,

#frame1 p span,
#frame2 p span,
#frame3 p span,
#frame4 p span,
#frame1 a span,
#frame2 a span,
#frame3 a span,
#frame4 a span {
	position: absolute;
	top: -10000em;
}


h4 {
	font-size: 15px;
}


/*-----------------------------*/
/*----- layout styles ------ */
/*---------------------------*/



#sharefb {
	position: fixed;
	top: 0;
	right: 3%;
	width: 100px;
	height: 200px;
	margin-top:90px;
	margin-left:20px;
}
#sharetw {
	position: fixed;
	right: 4%;
	width: 100px;
	height: 200px;
	margin-top:160px;
	
}

#joinusbutton {
	position: fixed;
	top: 0;
	right: 5%;
	width: 178px;
	height: 97px;
}

#joinusbutton a {
	background: url(../images/joinusbutton.png) 0 0 no-repeat;
	width: 178px;
	height: 97px;
	display: block;
	cursor: pointer;
}

	#joinusbutton a:hover {
		background: url(../images/joinusbutton.png) 0 -97px no-repeat;
	}



/* */

#footerbox {
	background: url(../images/footer.png) bottom center no-repeat;

	
}



#footerboxx  {
	background-color:#000;
	background: url(../images/footer.png) bottom center no-repeat;


}

#outerbox {
	width: 960px;
	margin-left: auto;
	margin-right: auto;	
}
#nikau {
    background: url(../images/nikau.gif) 0 0 no-repeat;
	width: 552px;
	height: 1102px;
	border: 0;
	display: block;
}

#placardhome{
	width: 400px;
	height: 218px;
	background: url(../images/pl_bck.gif) 0 0 no-repeat;
	margin-top:10px;
	padding-top: 10px;
	padding-left:10px;
	border-style:dotted;
	border-width:1px;
	border-color:#575757;
	padding-bottom: 10px;
	
	
}
#placard {
	width: 400px;
	background-color:#000;
	
}

#placardvideo {
	width: 500px;
	background-color:#000;
	
}
#placardForm {
	width: 301px;
	height: 218px;
	background-color:#000;
	float: right;
	padding-bottom: 10px;
	
	
	
} 

#livebox {
	width: 380px;
	height: 750px;
	background-color:#000;
	float: right;
	padding-bottom: 10px;
	
	
	
} 
#liveboxVideo{
	width: 300px;
	height: 750px;
	margin-top:10px;
	padding-top: 10px;
	padding-left:10px;
	
	padding-bottom: 10px;
	
	
}
#column0 {
	width: 192px;
	position: fixed;
	height: 100%;
	border-right:solid 700px #000;
  position:absolute;
  z-index:-1;
}

#column01 {
	width: 192px;
	position: fixed;
	height: 100%;
}

#column02 {
	width: 722px;
	padding: 0 0 0 42px;
	margin-left: 192px;
	float: left;
	background-color: #000;
}




/* column01 styles ////////////////////////////////////////////////////////////////////////// */

#logo {
	height: 179px;
	
}

#logo h1 {
	width: 250px;
	height: 248px;
	margin: 10px 0 0 -10px;
	
}

	#logo h1 a {
		display: block;
		z-index: 2;
		width: 250px;
		height: 248px;
		text-decoration: none;
		border: 0;
		color: #000;
		background: url(../images/logo.png) 0 0 no-repeat;
	}
		
		#logo h1 a:hover, #logo h1 a:active {
			background: url(../images/logo.png) 0 -248px no-repeat;
			color: #000;
		}
		


#column01 a {
	color: #2b202f;
	border-bottom: 0;
}
	
	#column01 a:hover {
		color: #000;
		background-color: #fff;
	}


/* main nav */

#mainnav {
	margin: 103px 0 0 -40px;
	height: 414px;
}

#mainnav ul li, #mainnav ul li a {
	display: block;
	width: 225px;
	height: 43px;
}

	#mainnav ul li#nav_cool,
	#mainnav ul li#nav_cool a {
		height: 43px;
	}
	

		#mainnav ul li#nav_send a  {
			background: url(../images/menu_01.gif) 0 0 no-repeat;
		}
		
			#mainnav ul li#nav_send a:hover  {
				background: url(../images/menu_01.gif) 0 -43px no-repeat;
			}

		#mainnav ul li#nav_walk a  {
			background: url(../images/menu_02.gif) 0 0 no-repeat;
		}
		
			#mainnav ul li#nav_walk a:hover  {
				background: url(../images/menu_02.gif) 0 -43px no-repeat;
			}
			
		#mainnav ul li#nav_amplify a  {
			background: url(../images/menu_03.gif) 0 0 no-repeat;
		}
		
			#mainnav ul li#nav_amplify a:hover  {
				background: url(../images/menu_03.gif) 0 -43px no-repeat;
			}
			
		#mainnav ul li#nav_cool a  {
			background: url(../images/menu_04.gif) 0 -1px no-repeat;
		}
		
			#mainnav ul li#nav_cool a:hover  {
				background: url(../images/menu_04.gif) 0 -43px no-repeat;
			}
			
		#mainnav ul li#nav_info a  {
			background: url(../images/menu_05.gif) 0 0 no-repeat;
		}
		
			#mainnav ul li#nav_info a:hover  {
				background: url(../images/menu_05.gif) 0 -43px no-repeat;
			}
			#mainnav ul li#nav_more a  {
			background: url(../images/menu_06.gif) 0 0 no-repeat;
		}
		
			#mainnav ul li#nav_more a:hover  {
				background: url(../images/menu_06.gif) 0 -43px no-repeat;
			}
		
		#mainnav ul li#nav_video a  {
			background: url(../images/menu_07.gif) 0 0 no-repeat;
		}
		
			#mainnav ul li#nav_video a:hover  {
				background: url(../images/menu_07.gif) 0 -43px no-repeat;
			}
			
			#mainnav ul li#nav_placard a  {
			background: url(../images/menu_08.gif) 0 0 no-repeat;
		}
		
			#mainnav ul li#nav_placard a:hover  {
				background: url(../images/menu_08.gif) 0 -43px no-repeat;
			}


/* column02 styles ////////////////////////////////////////////////////////////////////////// */

p {
	padding: 0 8px 0px 0px;
}


p span {
	color: #000;
	background-color: #EAB600;
}


/* */

#MarchMining h2 {
	background: url(../images/title.gif) 0 60px no-repeat;
	width: 640px;
	height: 191px;
	margin-left: -5px;
	font-size: 1px;
}

#MarchMining #live {
	background: url(../images/title_live.gif) 0 60px no-repeat;
	width: 701px;
	height: 230px;
	margin-left: -5px;
	font-size: 1px;
}

#MarchMining h3 {
	background: url(../images/title_video.gif) 0 60px no-repeat;
	width: 620px;
	height: 250px;
	margin-left: -5px;
	font-size: 1px;
}

#MarchMining h4 {
	color: #c01f48;
	padding: 0px 0px 20px 0px;
}


/* */




#tellafriend {
	width: 560px;
	background: url(../images/bck_tell.gif) 0 0px no-repeat;
	
	
}

#Spread {
	width: 701px;
	height: 410px;
	background: url(../images/bck_spread.gif) 0 0px no-repeat;
}
#Spread h2 {
	width: 690px;
	height:150px;
	background: url(../images/title_spread.gif) 0 50px no-repeat;
	margin-left: 200px;
	font-size: 1px;
	
}

#Spreadcontent a:hover {
		color: #000;
		cursor: pointer;
		background-color:#fff;
}

#Spreadcontent {
	width: 400px;
	margin-left: 240px;
		
}

#Spreadcontent_y {
	width: 701px;
	height:150px;
	text-align:center;
	background-color: #000;
		border-style:dotted;
	border-width:1px;
	border-color:#575757;
	
}


#Takeaction{
	margin-top:10px;
	padding-top: 10px;
	width: 701px;
	border-style:dotted;
	border-width:1px;
	border-color:#575757;
	padding-bottom: 10px;
	
}

#Takeaction  p  {
			padding-left:10px;
		}
#Takeaction_n  {
	padding-right:10px;
	padding-left:10px;
		
		}
		
#Takeaction_b{
	border-style:solid;
	border-width:1px;
	border-color:#575757;
	
}

#Takeaction_volunteer {
	padding-left:20px;
	
	
}

#Takeaction_volunteer h4 {
	color: #c01f48;
	padding: 0px 0px 0px 0px;
}





#SendaWakeUpCall h3 {
	width: 346px;
	height: 150px;
	background: url(../images/title_spread.gif) 0 28px no-repeat;
	margin: 38px 0 0 -53px;
}


	#SendaWakeUpCall p {
	padding-left: 1px;
	padding-right: 85px;
	padding-bottom: 25px;
	}
	
		#SendaWakeUpCall p a {
			background-color: #000;
		}
		
			#SendaWakeUpCall p a:hover {
				background-color: #fff;
			}


/* */



#footer {
	height:248px;
	background: url(../images/footer.png) bottom center repeat;
	position:absolute;
}

	#footer h4 {
		font-size: 13px;
		margin-bottom: 19px;
	}

	#footer p, #footer ul li {
		font-size: 11px;
		line-height: 17px;
	}
	
	
	#footer ul li {
		float: left;
		background: url(../images/footerbullet.gif) 8px 8px no-repeat;
		padding-left: 20px;
	}
	
	#footer ul li.firstitem {
		background: none;
		padding-left: 0px;
	}
	
	#footer a:hover {
		color: #fff;
		background-color: #2b202f;
	}


	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
/* CAROUSEL STYLES ////////////////////////////////////////////////////////////////////////// */





#carouselcontainer {
	width: 756px;
	height: 309px;
}
#video {
	width: 756px;
	height: 350px;
}


/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {
	/* required settings */
	position:relative;
	overflow:hidden;
	width: 620px;
	height:340px;
	margin-bottom:20px;
}



/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
}



/* single scrollable item */
.scrollable div {
	float: left;
	width: 620px;
	height: 340px;
	display: block;
	background-color: #000;
}



/* active item */
.scrollable .active {
	border: 0;
	/*z-index:9999;
	position:relative;*/
}



/* this makes it possible to add next button beside scrollable */
.scrollable {
	float:left;	
}



/* prev, next, prevPage and nextPage buttons */
a.browse {
	background: url(../images/carouselnextbutton.png) 101px 100px no-repeat;
	display: block;
	position: absolute;
	width: 219px;
	height: 335px;
	float: left;
	margin: 0 0 0 492px;
	cursor: pointer;
	font-size: 1px;
}

	a:hover.browse {
		background: url(../images/carouselnextbutton.png) 101px -200px no-repeat;
	}


#frame1 {
	background: url(../images/frame1.jpg) 0 0 no-repeat;
}

#frame2 {
	background: url(../images/frame2.jpg) 0 0 no-repeat;
}

#frame3 {
	background: url(../images/frame3.jpg) 0 0 no-repeat;
}

#frame4 {
	background: url(../images/frame4.jpg) 0 0 no-repeat;
}


	#frame1 a.play {
		display: block;
		width: 492px;
		height: 335px;
		float: left;
		cursor: pointer;
	}
	
	

	#frame1 a.embargo {
		display: block;
		width: 492px;
		height: 335px;
		float: left;
		cursor: pointer;
	}
	
		#frame1 a.embargo:hover {
			background: none;
		}
	
		










#frame2 a.takeaction,
#frame3 a.takeaction,
#frame4 a.takeaction {
	display: block;
	width: 153px;
	height: 21px;
	background: url(../images/takeactionbutton.gif) 0 0 no-repeat;
	position: relative;
	left: 20px;
}

#frame2 a.takeaction,
#frame3 a.takeaction {
	top: 259px;
}

#frame4 a.takeaction {
	top: 275px;
}




	#frame2 a:hover.takeaction,
	#frame3 a:hover.takeaction,
	#frame4 a:hover.takeaction {
		display: block;
		width: 153px;
		height: 21px;
		background: url(../images/takeactionbutton.gif) 0 -100px no-repeat;
	}



#frame2 a.why {
	position: relative;
	left: 371px;
	top: 192px;
	display: block;
	width: 47px;
	height: 16px;
	background: url(../images/whybutton.gif) 0 0 no-repeat;
	cursor: pointer;
}

	#frame2 a:hover.why {
		background: url(../images/whybutton.gif) 0 -100px no-repeat;
	}




#frame3 a.more {
	position: relative;
	left: 409px;
	top: 192px;
	display: block;
	width: 49px;
	height: 16px;
	background: url(../images/morebutton.gif) 0 0 no-repeat;
	cursor: pointer;
}

	#frame3 a:hover.more {
		background: url(../images/morebutton.gif) 0 -100px no-repeat;
	}