/*STYLE SHEET FOR SMILINGFOOTPRINTS.COM */
/*set some defaults for the body - background and text colour etc*/
body,td,a,p,.h {font-family:Helvetica, Verdana, Tahoma,arial,helvetica,sans-serif;font-size:1,0em; padding: 0px; margin: 0px;background:#c2dfff; color:#504A4B; text-align: justify;}

/*headers - colour, font size etc. h1= blog title, photos, map; h3 is 'latest from*/
h1 {color:#151B54; font-size:1.1em; font-weight:normal;}
h2 {color:#151B54; font-size:0.9em; font-weight:normal;}
h3 {color:#151B54; font-size:0.8em; font-weight:normal;}

/*this is to have a centered, fixed width layout*/
#container {margin: 0 auto;width: 872px;text-align: left; position:relative;}
#hidden {position:absolute; top:0px; right:0px; font-size:0.6em;}
#hidden a {color:#AFC7C7;}
#hidden a:hover {color:#fc0;}
/* ras: hidden is the top right hover text */

/*sets the default style for links */
a:link{color:#FF0000 ;font-weight: normal;text-decoration:none;}
a:visited{color:#FF0000 ;font-weight: normal;text-decoration:none;}
a:hover{color:#999;font-weight: normal;text-decoration:underline;}
a:active{color:#FF0000 ;font-weight: normal;text-decoration:none;}

/*colours for links in top menu.*/
ul#menu li a:link {color:#4E387E;font-weight: bold}
ul#menu li a:visited {color:#4E387E;font-weight: bold}
ul#menu li a:hover {color:#FF0000;font-weight: bold}

/*makes text in 'main' div smaller, without affecting rest of page*/
#main {font-size:0.8em;}
/*although then you unfortunately have to specify the sizes for headers again:*/
#main h1 {font-size:1.1em;}
#main h2 {font-size:0.9em; float:right;}
#main h3 {font-size:0.8em;}

/* layout, colour, & location of the header, main text section, map area and pics area */
#header {position:absolute; width:872px; height:300px; top:50px; border: 0px; text-align:center;}
#main {position:absolute; width:500px; top:240px;}
#map {position:absolute; width: 300px; height:400px; top:410px; left:570px; border:0px solid #922;}
#maplink {position:absolute; top:310px;}
#photos {position:absolute; width: 300px; height:140px; top:240px; left:570px; border:0px solid #922;background:#c2dfff; margin-bottom:50px;}
#emaillink {position:absolute; width: 300px; top:820px; left:570px; border:0px solid red;}
#bloglinks {position:absolute; width: 300px; top:1000px; left:570px; border:0px solid red;}
#bloglinks li {list-style-type: none;}
#mainbigmap {position:absolute; width:872px; top:240px;}

/*don't display the waffle about Rhian, Andy, Zeph etc, even though it's on the page*/
/*#blog {}*/
#photobox {display:none;}
/*#aboutrhian {display:none;}*/
/*#aboutandy {display:none;}*/
/*#aboutzephyrus {display:none;}*/
/*#contact {display:none;}*/

/*pics in the main section - ensure sensible margins etc. */
.floatedleft {float:left; margin-right:20px; margin-top:15px; margin-bottom:15px;}
.floatedright {float:right; margin-left:20px; margin-top:15px; margin-bottom:15px;}

/*puts a space after paragraphs*/
p {padding-bottom: 20px;}

/*the menu of links at the top*/
ul#menu {position:absolute; top:-30px; margin:0 auto;}
ul#menu li {float:left; display:block; width:125px; height:25px; }

/*the picture gallery area*/
#marquee-outer {display:block; height:100px; width:320px; overflow:hidden; margin-left:4px;position:absolute; top:40px; left:0px;}
#vmarquee {position:relative; padding-left:10px}
#vmarquee img {width:75px; height:75px; margin:5px;border:1px solid #fff;}
#vmarquee img:hover{border:1px solid #fc0;}
#leftcontrol {position:absolute; display:block;left:0px;top:23px; z-index:10;padding-left:3px;}
#leftcontrol:hover {border-right:2px solid #fc0;padding-left:0px;}
#rightcontrol {position:absolute; display:block; left:278px;top:23px; z-index:10;}
#rightcontrol:hover {border-left:2px solid #fc0;}
#flickrlink {position:absolute; right:0px; top:130px; font-size:0.7em;}
#maplink {position:absolute; right:0px; top:350px; font-size:0.7em;}

/*interactive footsteps*/
#footstep1 {position:absolute; top:118px; left:130px; font-size:1.2em;}
#footstep1 a {color:#6CC417;display:block; width:100px; height:70px;background:none;}
#footstep1 a em{display:none; font-style:normal;}
#footstep1 a:hover em{display:block;}

#footstep2 {position:absolute; top:140px; left:245; font-size:1.2em;}
#footstep2 a {color:#4E387E;display:block; width:100px; height:70px;background:none;}
#footstep2 a em{display:none; font-style:normal;}
#footstep2 a:hover em{display:block;}

#footstep3 {position:absolute; top:114px; left:340px; font-size:1.2em;}
#footstep3 a {color:#2B60DE;display:block; width:100px; height:70px;background:none;}
#footstep3 a em{display:none; font-style:normal;}
#footstep3 a:hover em{display:block;}

#footstep4 {position:absolute; top:150px; left:450px; font-size:1.2em;}
#footstep4 a {color:#FF0000;display:block; width:100px; height:70px;background:none;}
#footstep4 a em{display:none; font-style:normal;}
#footstep4 a:hover em{display:block;}

#footstep5 {position:absolute; top:122px; left:555px; font-size:1.2em;}
#footstep5 a {color:#FFFF00;display:block; width:100px; height:70px;background:none;}
#footstep5 a em{display:none; font-style:normal;}
#footstep5 a:hover em{display:block;}

#footstep6 {position:absolute; top:155px; left:655px; font-size:1.2em;}
#footstep6 a {color:#FF8000;display:block; width:100px; height:70px;background:none;}
#footstep6 a em{display:none; font-style:normal;}
/*if line below commented out, link text doesn't appear on hover*/
#footstep6 a:hover em{display:block;}