/* ESK VALLEY - STRUCTURE   ////////////////////////////////////////////////////////////////////////////////////////////////////////// */

*{margin: 0; padding: 0; line-height: 1.2;}

body {
background-color:#ffffff;
font-family: verdana, arial, sans-serif; 
font-size: 80%;
}

/* wrapper for whole page - setting min width stop nav from going over two lines
also effect drop down of right-hand column in IE */
#wrapper {
width: 100%;
min-width: 800px; 
width:expression(document.body.clientWidth < 1000? "1000px": "auto" );
} 

@media (max-width:481px) {

#wrapper {
width: 100%;
	}
}

#access {
float:left;
text-align: right;
width: 99%;
background-color: #ffffff;
padding:4px 0px 4px 0;
font-size: 0.8em;
}


#title {
float:left;
width: 100%;
background-color: #E1ECDE;
border-top: solid 1px #E39435;
padding: 12px 0 12px 0;
}

#title_mob {
display: none;
}


@media (max-width:481px) {
#title {
display: none;
}
#title_mob {
float:left;
width: 100%;
background-color: #E1ECDE;
border-top: solid 1px #E39435;
padding: 12px 0 12px 0;
}

img.scale {width: 94%;
}

}


#headercontainer  {
position:relative; /* needed so that tabs sit on top of pic, tabs absloute  */
float:left;
width: 100%;
height: 229px;
background-image:url(../pix/filter.gif);
background-repeat: repeat;
background-attachment:fixed;
background-color:#432211;
z-index:200;
}
/*need z-indez so that header callout appears over the top of the image, must be lower number that z-index used on tabs */

/*change % here to change width of callout panel - must add upto 100*/

/* //////////////////////////////adjusting HEADER CODES for mobile /////////////////////// //// */

@media (max-width:481px) {
		
#headercontainer  {
display:none;
}	
	}


#headeroverlay {
position:absolute; 
top:0; left: 63% ;
width: 37%;
height: 229px;
float:right;
background-image:url(../pix/filter.gif);
background-repeat: repeat;
background-color: transparent;
background-attachment:fixed;
padding: 0.25em 0em 0.25em 0em;
z-index:199;
}

#headerimage  {
position:relative;
float:left;
width: 97%;
height: 229px;
overflow: hidden;
background-color:#432211;

}

#header_callout {
text-align:left;
padding: 10px 0px 4px 16px;
color: #ffffff;
font-size: 1.3em;
line-height: 1.1;
}


/*top navigation / ////////////////////////*/

#navbar { float:left;
text-align:right;
width: 100%;
background-color: #F7E7C5;
border-top: solid 2px #ffffff;
border-bottom: solid 2px #ffffff;
padding: 0px 0 0 0;

}

@media (max-width:481px) {
	
#navbar {
width: auto;
	}
}

.nav {
float:left;
width: 100%;
font-size: 1em;
}

.nav ul {
float:right;
list-style-type:none;
margin: 0px 8px 0px 0px;
padding: 0;
}

.nav li {
float: left;
padding: 2px;
color:#4E525E;
font-weight: normal;
border: none;
margin: 0px;
line-height:normal}




.nav li a {
letter-spacing: 0.05em;
text-decoration: none;
padding: 2px;
border: none;
}


/*selected*/
.nav li a.selected {
color:#000000; 
background-color:#ffffff;
text-decoration: none;
font-weight: bold;
border-left: solid 1px #ffffff;
border-right: solid 1px #ffffff;
}

.nav li a:link {
color:#291b59;
text-decoration: none;
border: none;
}

.nav li a:visited {
color: #4E525E;
text-decoration: none;
border: none;
}

.nav li a:hover {
color:#e39435;
text-decoration: underline;
border: none;
}

.nav li a:active {
color:#e39435;
text-decoration: underline;
border: none;
}



/* tabs navigatin ///////////////////////////////////// */

#tabs {
position: absolute; /* positions tabs on pic in headercontainer  */
left: 0px; 
bottom:13px;
width: 100%;
font-size: 1em;
font-weight: bold;
padding:0;
z-index: 302; /* needed to make tabs sit on header footer  */
}

#tabs ul {
list-style-type:none;
margin-left: 8px;
margin-right: 8px;
margin-bottom: 0px;
margin-right: 0px;
padding: 0;
}

#tabs li {
float: left;
margin-left: 8px;
margin-right: 8px;
margin-bottom: 0px;
margin-top: 0px;

}

#tabs li a {
letter-spacing: 0.05em;
text-transform: uppercase;
color:#432211;
background-color:#E39435;
border: solid 1px #ffffff;
border-bottom-width: 0px;
padding: 2px 4px 2px 4px;
}

#tabs li a:link {
text-decoration: none;
color:#432211;
background-color:#E39435;
}

#tabs li a:visited {
text-decoration: none;
color:#4E525E;
background-color:#E39435;
}

#tabs li a:hover {
text-decoration: none;
color:#ffffff;
background-color:#4E525E;
}

#tabs li a:active {
text-decoration: none;
color:#E39435;
background-color:#4E525E;
}

/*selected*/
#tabs li a.selected {
text-decoration: none;
color:#ffffff;
background-color:#4E525E;
border-bottom: solid 1px #4E525E;;
}

#headerfooter{
position: absolute; /* positions tabs on pic in headercontainer  */
left: 0px; bottom:-14px;
width: 100%;
background-color: #4E525E;
border-top: solid 1px #ffffff;
border-bottom: solid 1px #E39435;
padding:4px 0 4px 0;
z-index: 301;
}




/* //////////////////////////////END OF HEADER CODES/////////////////////// //// */

/* //////////////////////////////START OF BODY CODES/////////////////////// //// */

/* container for main content below header and above footers, restricts and centers main content not in IE */
#maincontainer {
width: 100%;
max-width:1000px;
margin: 0 auto 0 auto;
}

@media (max-width:481px) {
	
#maincontainer {
	max-width:auto; }
}

#main {
float:left;
/*background-color: blue; */
width:62%;
}

#maincolumn {
background-color: #ffffff; 
padding: 0.5em 2.5em 1em 1em;}
/*border: solid 1px;
space around column of text set here */

#right {
float:left;
/*background-color: #00FF99; */
width: 32% ;
}

@media (max-width:481px) {
	
	#right {
float:none;
/*background-color: #00FF99; */
width: 320px;
}

	}

#rightcolumn {
float:right;
/*background-color: yellow;*/
margin: 0.5em 0em 1em 2em;
}

#googlecalendar {
width: 800px;
margin: 4em auto 1.5em auto;
}

/* /////////////////////////////////////////// FOOTERS ///////////////////*/
#address
{float:left;
width: 100%;
background-color:#E1ECDE;
color: #432211;
font-size: 1em;
font-style:normal;
line-height: 1.2;
padding: 1em 0 1em 0;
text-align:center;
}

@media (max-width:481px) {
#address {width: 90%;}
#footer_nav {width: 90%;}
} 

#footer_nav
{float:left;
width: 100%;
background-color:#ffffff;
color: #432211;
font-size: 1em;
font-style:normal;
padding: 1em 0 1em 0;
text-align:center;
line-height: 2;
}

a:link { color:  #4E525E;
border-bottom: dotted  1px #666666;
text-decoration: none; 
}

a:visited { color: #432211;
text-decoration: none; 
border-bottom: dotted 1px #666666;
}

a:hover 
{ color: #e39435;
text-decoration: none;
border-bottom: solid 1px #e39435;
}

a:active {color: #e39435;
text-decoration: none;
background-color: #feffe0;
margin: 0;
}


/* SCROLLER */
@media (max-width:481px) {
	
#container
{ display: none; }

#scroller
{ display: none; }


.scrollNav
{ display: none; }
	}
	

#container {
 float:left;
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid #EFEFEF;
  text-align: center;
}



#scroller {
  width: 2000px; /* = width + margin left + margin right + padding*2 + border*2  from the content rule */
}

.content {
  width: 100%;
  float: left;
  margin-left: 0px;
  margin-right: 0px;
padding: 0.5em 0 0.5em 0;
border-top: solid 1px #EB7E17;
border-bottom: solid 1px #EB7E17;
color: #F0DCC4;
font-size: 1.4em;
font-style:italic;
background-color:#78606E;
}

.scrollNav {
 float:left;  
 width: 100%;
 padding: 0.5em 0 0.5em 0px;
 line-height:1.6;
  background-color:  #fcf0e2;
  text-align:center;}
 
.scrollNav, .scrollNav a:link, .scrollNav a:visited  {
  font-size: 1em;
  color:#4e525e;
  font-weight: normal;
}

/*/<!--[if IE]>
<style type="text/css">

#scroller{
  width: 882px; /* = width + margin left + margin right from the content rule + border*2 from the container rule*/

/*<! [endif]-->

NEED TO SORT THIS OUT FOR IE refer back to orignal in EVR bookmark - slide

/* ////////////////////////////// TOOLS /////////////////////// //// */



#scroller a:link {color: #f0DCC4;
text-decoration: none; 
border:none;
}

#scroller a:visited { color: #E1ECDE;
text-decoration: none; 
border:none;
}

#scroller a:hover 
{color: #e39435;
text-decoration: underline;
}

#scroller a:active {color: #e39435;
text-decoration: underline;

}






#tools {
float: left;
width: 92%;
border: solid 1px #e39435;
background-color: #ececec;
font-size: 0.8em;
	text-align: 	center;
	padding: 0.5em 0.25em 0.25em 0.5em;
	color: 			#432211;
margin: 1em 0em 2em 20px;
text-transform:uppercase;
clear: both;
}



#fares {
float: left;
width: 92%;
border: solid 1px #cccccc;
background-color:#fcf0e2;
padding: 0.5em 0.25em 0.25em 0.5em;
color: #432211;
margin: 1.4em 0em 2em 20px;
clear: both;
}




/* ESK VALLEY - MAIN CONTENT  /////////////////////////////////////////// */


/* ESK VALLEY - BODY - PODS   /////////////////////////////////////////// */



.timetablelink {
width: 100%;
border: solid 1px #e39435;
background-color: #fcf0e2;
color: #432211;
margin: 2em 0em 1em auto;
padding-bottom: 4px; }



/*font-family:Georgia, "Times New Roman", Times, serif;
font-weight:normal;
font-size: 1.2em;
color: #432211;
line-height: normal;
letter-spacing:normal;
text-align:left;
padding: 		0.5em 0.5em 0.5em  20px;
*/


/*#timetablelink a:link {
width: 100%;
border: solid 1px #cccccc;
background-color: #fcf0e2;
padding: 20px;
color: #432211;
margin: 2em 0em 1em auto;
border: solid 1px #e39435;

}

#right a:visited { 
color: #432211;
border:none;
}

#right a:hover {color: #e39435;
text-decoration: underline;
border:none;
}

#right a:active {color: #e39435;
text-decoration: underline;

}

*/

.pod_live {width:300px;
border: solid 1px #432211;
margin: 2em 0em 1em auto;
background-color: #ffffff}


.pod_grey {width:100%;
border: solid 1px #cccccc;
margin: 2em 0em 1em auto;
background-color: #ececec}

.pod_green {width:100%;
border: solid 1px #cccccc;
margin: 2em 0em 1em auto;
background-color:#edf3ef;}


.pod_peach {width:100%;
border: solid 1px #cccccc;
margin: 2em 0em 1em auto;
background-color: #fcf0e2}


.pod_blue {width:100%;
border: solid 1px #cccccc;
margin: 2em 0em 1em auto;
background-color: #eeedf2}

.pod_text{ 
	font-size: 1em;
	text-align: 	left;
padding: 0px 8px 8px 10px;
	color: 			#432211;
	line-height: 	1.2em;
margin: 0;
	}
	
h3 { 
font-family:Georgia, "Times New Roman", Times, serif;
font-weight:normal;
font-size: 1.6em;
color: #432211;
line-height: normal;
letter-spacing:normal;
text-align:left;
padding: 8px 8px 0 10px;
}



.pod_highlight {
font-weight: bold;
color: #E39435; }

.pod_photo {
float:right;
border: solid 1px #989ba2;
padding:3px;
margin: 8px; }

.pod_link {font-family:Georgia, "Times New Roman", Times, serif;
font-weight:normal;
font-size: 0.9em;
color: #4e525e;;
line-height: normal;
letter-spacing:normal;
text-align:right;
font-weight: bold;
font-style:italic;
padding: 4px 8px 8px 10px;
}


#right a:link {
color: #432211;
border:none;
border-bottom: dotted  1px #432211;

}

#right a:visited { 
color: #432211;
border:none;
border-bottom: dotted  1px #cccccc;
}

#right a:hover {color: #e39435;
text-decoration: underline;
border:none;
}

#right a:active {color: #e39435;
text-decoration: underline;

}


/* ////////////////////////////// MAIN COLUMN TYPE  CODES/////////////////////// //// */

p { 
	font-size: 1.2em;
	text-align: 	left;
	padding: 		0.5em 0.5em 0.5em  20px;
	color: 			#432211;
	line-height: 	1.4em;
margin: 0;
	}

p.lead { 
	font-size: 1.2em;
	text-align: 	left;
	padding: 		0.125em 0.5em 0.5em 20px;
	color: 			#432211;
	line-height: 	1.4em;
margin: 0;
	}
	
.center { 
	text-align: 	center;
	padding: 		0.125em 0  0.5em 0;

margin: auto;
	}


#clear {
clear:both; }



h2.pagetitle{
font-family:Georgia, "Times New Roman", Times, serif;
font-weight:normal;
font-size: 1.6em;
color: #432211;
line-height: normal;
letter-spacing:normal;
text-align:left;
padding: 1.5em 0 0.125em 20px;
clear:both;
}

h2{
font-family:Georgia, "Times New Roman", Times, serif;
font-weight:normal;
font-size: 1.6em;
color: #432211;
line-height: normal;
letter-spacing:normal;
text-align:left;
padding: 1em 0 0.125em 20px;
clear:both;
}

h4 { 
font-size: 1.2em;
font-weight: bold;
	text-align: 	left;
	padding: 		0.5em 0.5em 0em 20px;
	color: 			#432211;
	line-height: 	normal;
margin: 0;

	}


.callout {
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 1.6em;
color: #432211;
line-height: 1.2em;
letter-spacing:normal;
text-align:center;
margin: 1em 1em 0.2em 1em;
padding: 0px;
}

.smallcaps {
font-family:Georgia, "Times New Roman", Times, serif;
font-style: normal;
font-weight: normal;
font-variant:small-caps;
letter-spacing: 0.1em;

color: #4e525e;
line-height: 1.2em;
letter-spacing:normal;

}

table.timetable {
width: 90%;
font-size: 0.9em;
color: #432211;
margin: 0em auto 0em auto;
}


table.journey_info {
width: 100%;
font-size: 1em;
color: #432211;
margin: 0 0 8px 0;
}


td {
padding: 4px 4px 4px 6px;
}

td.divider {
padding: 4px;
border-right: 1px dotted #432211;
}


td.bottom {
border-bottom: 1px solid #cccccc;
}

td.top {
border-top: 1px solid #cccccc;
}

td.top_divider {
border-top: 1px solid #cccccc;
border-right: 1px dotted #432211;
}

td.bottom_divider {
border-bottom: 1px solid #cccccc;
border-right: 1px dotted #432211;
}

th {
padding: 6px 0px 6px 0px;
}

tr.green {
background-color: #edf3ef;
padding: 6px;
}

tr.peach {
background-color: #fcf0e2;
padding: 6px;
}

a:link.none, a:visited.none, a:hover.none, a:active.none {
text-decoration: none; 
border-bottom: 0px;
background-color: transparent;
}

img.padding {
margin: 0px 12px 12px 0px;}


ul {
list-style-type:square;
list-style-position: outside;
margin:		0.5em 0.5em 0.5em  20px;
padding-left: 8px;

}

li {
font-size: 1.1em;
	text-align: 	left;
	padding: 		0px;
	margin: 0.5em;
	color: 			#432211;
	line-height: 	1.2em;

}

.apricot {
color: #e39435; }

.green {
color: #00520a; }

.grey {
color: #4e525e; }

/* END OF MAIN CONTENT CODES ///////////////////////////////////////////////////*/


a:link { color:  #291b59;
border-bottom: dotted  1px #999999;
text-decoration: none; 
}

a:visited { color: #4e525e;
text-decoration: none; 
border-bottom: dotted 1px #cccccc;
}

a:hover 
{ color: #e39435;
text-decoration: none;
border-bottom: solid 1px #e39435;
}

a:active {color: #e39435;
text-decoration: none;
background-color: #fcf0e2;
margin: 0;
}

/* Station pages //////////////////////////////////////////*/

.main_photo {
display: block;
border: solid 1px #989ba2;
padding: 3px;
margin: 74px 0px 8px 0px;
width:306px; 
text-align: center;}

.inset_photo {
float:left;
border: solid 1px #989ba2;
padding:3px;
margin: 4px 16px 8px 0px; }


.pod_google {width:308px;
border: solid 1px #cccccc;
padding: 3px;
margin: 2em 0em 1em auto;
background-color: #fcf0e2;
text-align: center;}