/* Joelle Gilmour 2010 Template for first page */

/*
Copyright Faye Brownbridge, FJB Consulting & Design.
Inspirations by Design 
http://WebnSpire.com
*/

body {
margin: 4px;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 100%;
background: #220a17; }

#container {
margin: 0 auto;
padding: 0;
width: 1000px;
height: 693px;
background: #761c26 url(images/Sunsetswirl.jpg) no-repeat; }

#logo {
width: 153px;
height: 170px;
position: absolute;
top: 4px;
left: 4px;
background-image: url(images/treelogo.png);
z-index: 1; }
 
#wrapper {
margin: 0px;
padding: 30px;
width: 800px;
height: 600px;
background: inherit; }

#linksframe {
margin-left: 160px;
padding-top: 50px;
width: 470px;
height: 300px; }

#linkpos1 {
margin-top: 20px;
margin-left: 70px;
width: 150px;
height: 45px;
background: url(images/star3.png) no-repeat; }

#linkpos2 {
margin-top: 15px;
margin-left: 150px;
width: 150px;
height: 45px;
background: url(images/star3.png) no-repeat; }

#linkpos3 {
margin-top: 50px;
margin-left: 20px;
width: 150px;
height: 45px;
background: url(images/star3.png) no-repeat; }

#linkpos4 {
margin-top: 1px;
margin-left: 290px;
width: 200px;
height: 45px;
background: url(images/star3.png) no-repeat; }

#imgpopup1 a:link {
color: #ccb3c6;
text-decoration: none;
letter-spacing: +1.0em; }

#imgpopup1 a:visited {color: #ccb3c6;
text-decoration: none;}

#imgpopup2 a:link {
color: #ccb3c6;
text-decoration: none;
letter-spacing: +1.0em;}

#imgpopup2 a:visited {color: #ccb3c6;
text-decoration: none;}

#imgpopup3 a:link {
color: #ccb3c6;
text-decoration: none;
letter-spacing: +1.0em; }

#imgpopup3 a:visited {color: #ccb3c6;
text-decoration: none;}

#imgpopup4 a:link {
color: #ccb3c6;
text-decoration: none;
letter-spacing: +1.0em; }

#imgpopup4 a:visited {color: #ccb3c6;
text-decoration: none;}

a:link {color: #5f193b;
text-decoration: none; }

a:hover {color: #0099CC;
text-decoration: underline;}

a:visited {color: #5f193b;
text-decoration: none;}

p { padding: 0 2em 0 1em; }

h2 {font-family: Garamond, "Times New Roman", Times;
font-size: 1.2em;
color: #ffffcc;}

h3 {font-family: "Comic Sans MS", Arial, Helvetica;
font-size: 1.1em;
color: #ffffcc;
font-style: italic;}

#bottom {
clear: both;
margin-top: 220px;
width: 950px;
height: 100px;
font-size: 0.9em;
color: #fff;
background: right url(images/JGname.png) no-repeat;}

#footer {
margin: 12px auto;
clear: both;
width: 1000px;
height: 3em;
font-size: 0.9em;
text-align: right;
color: #663300; }

#footer a:link, a:visited {
color: #0099CC;
text-decoration: none; }



/*css popup adapted from pure css popups by Eric A. Meyer. 
Check out ccc/edge for more great ideas: 
http://meyerweb.com/eric/css/edge/index.html */

#imgpopup1 a img {height: 0; width: 0; border-width: 0;}

#imgpopup1 a:hover img {
position: absolute; top: 40px; left: 130px; width: 350px; height: 204px; }

#imgpopup2 a img {height: 0; width: 0; border-width: 0;}

#imgpopup2 a:hover img {
position: absolute; top: 250px; left: 50px; width: 600px; height: 446px; }

#imgpopup3 a img {height: 0; width: 0; border-width: 0;}

#imgpopup3 a:hover img {
position: absolute; top: 10px; left: 470px; width: 500px; height: 402px; }

#imgpopup4 a img {height: 0; width: 0; border-width: 0;}

#imgpopup4 a:hover img {
position: absolute; top: 90px; left: 600px; width: 396px; height: 600px; }