/*----------------------------------------------

Gateshead Council 
Leisure & Culture
Section Style Sheet
-------------------
Created 21/01/10 
by Steve Heal 

----------------------------------------------*/

/* Banner ad selection */

iframe#ad_leisure {
	/* display this one */
	height: 60px;
	width: 468px;
}

iframe#ad_benefits, iframe#ad_building, iframe#ad_business, iframe#ad_care, iframe#ad_council, iframe#ad_education, iframe#ad_environment, iframe#ad_homepage, iframe#ad_housing, iframe#ad_jobs, iframe#ad_people, iframe#ad_transport {
	/* hide these */
	display: none;
}

/* shop item */

.shop { width:100%; margin-bottom:15px; float:left}
.shopimg { width:90px; float:left; background-color:#f3f5f8; padding:5px}
.shopimg IMG {padding: 0px; margin:5px; BORDER: #000 1px solid}
.shopimg SPAN {font-size:80%}
.shoptxt { float:left; margin-left:5px}
.shoptxt P {padding: 0px; margin:5px }
.price { color:#CC0099; font-weight:bold}

/* Libraries sub brand*/

.library {background: #2a343b; width:100%; float: left;}
.libraryleft {float: left}
.libraryright {float: left}

/* Summer Activities */

.summeract { margin-bottom:20px}
.summeracttitle {padding: 5px 0px 5px 5px; background-color:#2a343b}
.summeracttitle p {padding:0px; margin: 0px; color: white; font-weight:bold}
.summeracttitle h2 {padding:0px; margin: 0px; color: white; font-weight:bold}
.summeractlocation {padding: 5px 0px 5px 5px; background-color:#f3f5f8}
.summeractlocation P {padding:0px; margin: 0px}
.summeractdate {padding: 5px 0px 5px 5px; float: left; width: 47%}
.summeracttime {padding: 5px 0px 5px 5px; float: right; width: 47%}
.summeractdate P {padding:0px; margin: 0px; }
.summeracttime P {padding:0px; margin: 0px; }

.summeractdescription {padding: 5px 0px 5px 5px;}
.summeractdescription P {padding:0px; margin: 0px}
.summeractage {padding: 5px 0px 5px 5px; float: left; width: 47%}
.summeractprice {padding: 5px 0px 5px 5px; float: right; width: 47%}
.summeractcontact {padding: 5px 0px 5px 5px; border-top: 1px solid #2a343b}
.summeractcontact P {padding:0px; margin: 0px}
.summeractcolumns {width: 100%}

.mybackground {
	background-image:url(/images/fairies1.jpg);
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position:bottom right;
}

/* ---------- this is used as the image map ---------- */

#map {
	display:block;
 	height:399px;
 	width:536px;
 	float:left;
 	margin:0 10px 10px 0;
 	background: url(http://www.gateshead.gov.uk/images/Leisure/spmap/map1.gif) no-repeat;
 	position: relative;
}

#map li {
	position:absolute;
	display:block;
	list-style:none;
	border: none;

 }
#map li a {
 	display:block;
 	height:100%;
 	width:100%;
 	text-indent:-2000px;
 	color:#464646;
 	font-weight:bold;
}

#one	{
 	top:68px;
 	left:97px;
 	height:17px;
 	width:17px;
}

#two	{
 	top:121px;
 	left:216px;
 	height:17px;
 	width:17px;
}

#three	{
 	top:90px;
 	left:231px;
 	height:17px;
 	width:17px;
}

#four	{
 	top:151px;
 	left:103px;
 	height:17px;
 	width:17px;
}

#five	{
 	top:174px;
 	left:186px;
 	height:17px;
 	width:17px;
}

#six	{
 	top:215px;
 	left:145px;
 	height:17px;
 	width:17px;
}

#seven	{
 	top:189px;
 	left:220px;
 	height:17px;
 	width:17px;
}

#eight	{
 	top:240px;
 	left:190px;
 	height:17px;
 	width:17px;
}

#nine	{
 	top:206px;
 	left:289px;
 	height:17px;
 	width:17px;
}

#ten	{
 	top:158px;
 	left:306px;
 	height:17px;
 	width:17px;
}

#eleven	{
 	top:146px;
 	left:287px;
 	height:17px;
 	width:17px;
}

#twelve	{
 	top:237px;
 	left:226px;
 	height:17px;
 	width:17px;
}

.panel img {
	margin: 0 5px 0 0;
	float: left; 
}

.stepcarousel{
	position: relative; /*leave this value alone*/
	border: 0px solid black;
	overflow: scroll; /*leave this value alone*/
	width: 536px; /*Width of Carousel Viewer itself*/
	height: 90px; /*Height should enough to fit largest content's height*/
	background-color: #f3f5f8
}

.stepcarousel .belt{
	position: absolute; /*leave this value alone*/
	left: 0;
	top: 0;
}

.stepcarousel .panel {
	float: left; /*leave this value alone*/
	overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
	margin: 2px 5px 5px 5px; /*margin around each panel*/
	width: 526px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

.panel h2 {
	font-size:100%; padding: 0px; margin: 0px;
}

.panel p {
	font-size: 90%;
	margin: 0px;
	padding: 0px;
}