/* css Zen Garden submission - 'Ancient Greece', by Helen Di Giunta, http://helened12.wordpress.com/ */
/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/  */
/* All associated graphics copyright 2007, Helen Di Giunta */
/* Added: June 10, 2007 */


/* IMPORTANT */
/* This design is not a template. You may not reproduce it elsewhere without the 
   designer's written permission. However, feel free to study the CSS and use 
   techniques you learn from it elsewhere. */


/*************** Margin and Padding **************
Setting margin and padding to zero helped me to make the page render properly across all
browsers/platforms. 

I don't usually use the Universal Child Selector when building my CSS, but for this assignment, 
where I am not able to modify the HTML, I found that the best approach was to set all margin and
padding to zero, and then add padding or margins where required.

This method ensures that all browsers display the content in the same or a similar way. IE is always
going to handle padding/margins differently to other browsers like Firefox and Safari, an because 
most people use IE, I made sure that the page renders correctly in this and other popular browsers.

These are the sites I used to research the Universal Child Selector and its uses in CSS web design:

Black Widow Web Design
http://www.blackwidows.co.uk/resources/tutorials/css/css1.php

Sitepoint: Eric's Universal Child Selector
http://www.sitepoint.com/blogs/2005/06/20/erics-universal-child-selector/

W3.org Selectors
http://www.w3.org/TR/REC-CSS2/selector.html

/************** Browser Statistics **************

W3 Schools Browser Statistics
http://www.w3schools.com/browsers/browsers_stats.asp

Browser News: Statistics
http://www.upsdell.com/BrowserNews/stat.htm

WebReference.com Browser Statistics
http://www.webreference.com/stats/browser.html

/************************************************/

* {
margin: 0;
padding: 0;
}

/*************** Fonts and design *****************

I took the less is more approach with the font that I chose. My designs are always simple and 
usually minimalist. I don't really like to design pages that are too busy, because they take the
attention away from the purpose of the site.

Having said that, my first design for the CSS Zengarden assignment was a black and gold creation
that I loved.  Unfortunately, the only problem with this colour scheme was that I wasn't really
able to add many graphics to jazz it up without making the design look overdone.

I tried adding my Goddess Athena Photoshopped image using the following methods.

I made the image a translucent white, and had a bevelled olive green border around the picture.
It looked ok, but I still wasn't completely happy with the look and feel.

The Goddess Athena was to undergo another transformation. This time, I removed the background
using Photoshop, and added a black background which looked fine on its own. However, when I added
the image to the site, it seemed to fight for attention with the gold and black theme.

So, the only other thing I could try was to change the font I used in my title from Broadway to 
others in the Photoshop font list.

/*************** Body element ******************/
body {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 0.7em;
color: #000;
}

/*************** Research for the Ancient Greece look and feel ******************

I travelled to Greece in 1995, and the first thing that struck me was the antiquity of the place,
and in contradiction to this, the way that the people in Greece incorporate the old with the modern.

That is what inspired me to create this Ancient Greece design. 

My original Zengarden was a black and gold theme, which I found in a lot of artwork being sold in 
places like Athens, in Monastiraki. Monastiraki is a market place where you can find all manner 
of things, including some interesting pieces like a particular plate which gave me the idea for the gold and black font theme.

Using this online Photoshop Tutorial, I was able to fashion my first design which I have posted in 
my student webspace:

First Zen Garden attempt:
http://webct.curtin.edu.au/307947_e/student_pres/Helen%20Di%20Giunta/csszengarden/zengarden-sample.html

Photoshop Gold Effects Tutorial:
http://www.photoshopessentials.com/photoshop-text/text-effects/gold/


*/

#container {
padding: 0 0 10px;
width: 800px;
text-align: left;
background-attachment: scroll;
background-image: url(images/column-4.jpg);
background-repeat: no-repeat;
background-position: 0px 153px;
}

#preamble h3 span,
#explanation h3 span,
#participation h3 span,
#benefits h3 span,
#requirements h3 span,
#lselect h3 span,
#larchives h3 span,
#lresources h3 span,
#extradiv3,
#extraDiv4,
#extraDiv5,
#extraDiv6 {
color: #949273;
width: 340px;
height: 20px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
position: static;
}

#pageHeader span,  
#pageHeader h1, 
#pageHeader h2 {
text-align: center;
font-size: 1em;
font-weight: bold;
}

#pageHeader {
background-image: url(images/ancient-greece-gp-23.jpg);
background-repeat:no-repeat;
height: 180px;
width: 1000px;
background-attachment: scroll;
}

a, a:visited {
text-decoration: none;
color: #d7661c;
border-bottom: 1px dotted #ccc;
}

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

acronym {
text-decoration: none;
color: #d7661c;
border-bottom: 1px dotted #ccc;
cursor: help;
}

p {
margin-bottom: 10px;
color: #333333;
}


#quickSummary {
	padding-left: 130px;
	width: 575px;
}

#quickSummary .p1 {
text-align: left;
color: #949273;
font-size: 0.9em;
font-weight: lighter;
}

#quickSummary .p2 {
color: #949273;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 0.9em;
letter-spacing: -1px;
font-weight: lighter;
text-transform: uppercase;
text-align: left;
}

#linkList{
position: absolute;
left:auto;
right:auto;
top: 159px;
margin-left: 600px;
width: 250px;
background-attachment: scroll;
background-image: url(images/athena-7.jpg);
background-repeat: no-repeat;
background-position: 132px 2px;
padding-left: 132px;
}

#linkList2{
padding: 0;
margin: 0;
padding-bottom: 250px;
}

#linkList ul {
text-align: left;
list-style: none;
margin: 0;
padding: 0;
width: 248px;
}

#linkList ul li{
margin: 0;
padding: 3px 0 3px 9px;
border-bottom: 1px solid #ffffef;
}

#linkList ul li a, #linkList ul li a:visited {
border-bottom-style: none;
}

#linkList ul li a:hover {
color: #94ab36;
}

#lselect {
font-size: 0.9em;
padding-top: 10px;
}

#lselect ul li {
background: transparent url(none) 0%;
padding: 3px 0 3px 10px;
}

#lselect a {
display: block;
font-size: 1.1em;
color: #616F1B;
}

#lselect a.c {
display: inline;
line-height: 5px;
margin: 0;
padding: 0;
font-family: Verdana, Arial, Tahoma, sans-serif;
font-size: 1em;
color: #D66518;
letter-spacing: -1px;
}

#preamble, #explanation, #participation, #benefits, #requirements, #requirements p1 {
top: 0px;
position: relative;
padding-bottom: 5px;
padding-left: 130px;
width: 580px;
}

#requirements p2{
width: 650px;
padding-bottom: 15px;
padding-left: 130px;
}

#lselect, #larchives {
margin-bottom: 10px;
padding-left: 5px;
}

#lselect h3, #larchives h3, #lresources h3 {
width: 196px;
height: 15px;
padding-left: 5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#footer{
text-align: right;
padding-top: 15px;
padding-bottom: 15px;
}

#footer a, #footer a:visited {
padding: 5px;
border: 1px solid #f4f4f4;
background-color: #fff;
}

#footer a:hover {
padding: 5px;
border: 1px solid #930;
background-color: #d94904;
color: #fff;
}

#extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 { 
display:none 
}