INSPIRATION:
I love sitting listening to people play guitar and sing while gathered around a bonfire.. Singing and playing music is a great way to bring people together. But so often the guitarists only know a few songs. So, I decided to invent a way for guitarists to always have new music on hand for occasions like these.

The Website is broken down into 3 main sections. The Learn section includes Instructor photos and bios, a forum, and interviews with famous musicians and Academy Alum. The Share section is where students can post photographs of their own bonfires and adventures, share tabs and songs they’ve written. The Play section contains online supplemental lessons, an events calendar that sincs with the user’s iCal to keep track of which days they have lessons at the Academy. It also has a timer that records how long a student has been practicing for.

The mobile site has 3 main sections: Beat, Tune, Play. The Beat section is a metronome. The strings can be easily tuned by listening to the correct pitch by pressing on the tuning machine on the site. The Tune section can be used for tuning both guitar and voice. The play section shows the tabs for a selected song, and can be played with or without the accompanying metronome beat. The sound can be recorded or the user can also choose to hear the original song.

SKETCHES:

AUDIENCE:
The site is designed for anyone really, but is specifically targeting the students at the Academy.
Here are my 3 customer profiles:

Mary Anderson (52). Mary is an elementary school teacher and single mother of 3. She requires that each of her children play 2 instruments because she values the commitment and dedication it teaches her children. She has also read many books that suggest it helps with their brain development and social interactions. She allows her children special privileges only after they have done their lessons.

Suzanne Waters (34). Suzanne is a stay-at-home mom/PTA president/soccer mom/Brownie area rep/go-to gal. She participates in every facet of the lives of her 2 children. She cannot miss an episode of her favorite soap and dreams of someday meeting Oprah. Her son, Jimmy, expressed an interest in learning to play guitar, so she’s researching all of the local studios and academies.

Mikey Howard (13). Mikey’s parents make him go to lessons at the Academy and play acoustic guitar. But he and his friends from the Academy like to get together in the garage and rock out on the electric guitar. Mikey has had difficulty in the past with making friends, so he needs a way to interact with others, share his experiences, and find a place where he can feel like he in parts of something and belongs. He is practically plugged in to his home computer.

COMPANY OBJECTIVES:
Track each student’s progress by monitoring practicing and participation in forums.
Prompt response to students’ questions.

INFORMATION DESIGN:
I decided to create pages packed with information, rather than create lots of individual pages to reduce the number of times a user has to click through to find what they want. The young students are used to the look and functionality of a forum and social networking sites with lots of information vying for their attention. The parents need something organized and informative. So I packed as much useful information as I could on the site while keeping it organized and neat. I didn’t want to place too much focus on the About or Contact sections, so I left them out of the main nav and delegated them to the footer, where curious parents could click on them to research more about the company or to find out how to sign their kid up. But I purposely made 3 broad category nav buttons that contain several sections within each and mode those the only ones available fromthe index page.
The index page is supposed to have a little fun and a little mystery. It should be fun for the students to find the buttons and watch the kids around the campfire sing and talk.

VISUAL DESIGN:
I used a grey, black, and grey-blue palette with orange accents. I tried to reduce the visual clutter and create a tidy, organized site.

SITE MAP:
With so many things to click on and change within a single page, I’m not sure if my site map is accurate. I only included pages where by clicking the user would be taken to a separate page, not changing something within a page. The act of putting so much content on each page seems to have shrunk my site map!

STRUGGLES:
With such a complex site and mobile site it was difficult to choose what to make function and what would be best to leave alone until I learn more. I laid out my pages in a table using images to simplify the process, but that made it difficult to make any of the buttons in those sections/images work. For demonstration purposes I figured it would be ok to make the entire image swap on click instead of making a button. I also thought of using hotspots, but they make you go to a new page, which would mess up my site map.

See the finished product at http://www.everythingaboutweb.com/artcenterdev.
Hints: On the Learn page, you can click once on the instructors section to switch it to Sort by Name, then double click to switch back to Sort by Genre.
On the flash mobile site after it runs through the clip you can click on the Play Original button and it will play another short clip.

I did the Flash exercise: I made a portfolio site of different mixed drinks, with buttons. But WordPress doesn’t accept .swf files. Hmmm.

I did a redesign of my mobile site for www.united.com/mobile.

I added some Smart Applications and Clever Devices- it should be able to recognize the user and know which flights he will be on. So, with this redesign the site would tell the user what the weather is like at their destination. Also, it would be linked to their iCal. That way they could view their flight information and their travel plans (flights on time are in green, tours, meetings, etc.) all in one place. It would be ideal if it could also link up to GPS with their hotel and car rental reservations so the user could get directions to the hotel or to a car rental place and so that the hotel would know to keep the reservation if a flight is delayed.

Here is the companion website redesign that reflects these changes.

I kept all of the essentials from their current website www.united.com, but I moved some of the advertising and removed the sign in area. The information displayed would be user specific depending on their destination, their preferences, etc. The clever application could make this information more prominent as the user’s travel dates gets closer.

The United Airlines mobile web site is boring and has no flair. It’s not organized into groups of information. The Best and Worst of the Mobile Web pdf consistently listed airline sites as the worst. I looked at the Delta and American sites and they looked much better. So I took my visual cues from them. The BofA and Facebook mobile sites are very functional and aesthetically pleasing. They also use the same bar/buttons to organize info, so I made my menus like that.

So, I used the template to create a more updated site that groups info inder red bars.

I started this project by first doing some research about Industrial Design and by investigating as industrial design sites (www.usa.phillips.com, www.rnrassociates.com, www.idealogicdesign.com, www.baren-boym.com, www.altitudeinc.com), an Industrial Design magazine site (http://www.core77.com/), and the IDSA (Industrial Designers Society of America) site and past award winners. I also found it helpful to look at portfolio sites for other types of design firms. I looked at hellomonday.net, www.brandever.com, www.hatchsf.com, www.zaum.com.uk, www.tbdadvertising.com, among others. All of these sites were very graphic, have very minimal text, and have saturated color schemes with lots of negative space.

3 business objectives for the site:
Content can be easily updated.
Clearly describe and portray our services.
Add a user login to increase traffic on the site.

I developed 3 personas for my site:

1. Larry Winthrop, age 64. Larry is the President of Prime Technologies, a company specializing in optical technologies for the life sciences. He loves to read autobiographies and historical fiction and records CSI and The Daily Show on his DVR. He enjoys sailing on his yacht with his wife, Judy, and their Jack Russell terrier, Max. Larry doesn’t have much free time to surf the net. He prefers sites the present information clearly with succinct descriptions to support images. He wants to be able to find information quickly and easily. Too many videos and animations distract and annoy him.

2. Mark Monrose, age 37, and Tim Maloney, age 42. Unhappy with their previous job, Mark and Tim started their own industrial design firm in 1998. They are excited to announce that they will be opening a second branch in San Francisco next year. They are researching local firms, making contacts, and checking out the competition. Tim does all of their renderings and CAD file creation, while Mark does most of the research and paperwork. They joke that Tim is the brains (computer geek, blogger, and gamer) and Mark is the braun (he is preparing for an Iron Man competition in the Fall). They are both advanced web users that spend hours on the Internet or downloading the latest iPhone app. They have both vowed never to grow up.

3. Rachel Blackstone, age 39. Rachel is currently climbing the corporate ladder in the Diagnostics Division of Bayer. Her company is searching for a new firm to work with and she is charged with scouting out the possibilities. She is a strong-willed and determined single mother of three, ages 4, 5, and 12. She reads home decorating magazines, Business Week and Forbes. She likes to relax and browse the web once her children are asleep for a little “me time” as she calls it. She is not very computer savvy, but she loves to Google and has her own Flickr account full of family photos. She prefers very graphic heavy sites with clear, simple navigation.

SKETCHES:

In my initial sketches I played with different logo graphics and several themes, including a calendar or office supply themed site. The first design I mocked up is the one depicted below, with wide diagonal nav buttons in the left column. I quickly realized, however, that this design left little room for subnav or much content, so I went ahead with another idea, bottom photo. This two column layout has two headers, one for the main nav and logo, and another one for sub nav. This clean, simple design seemed like if would be very easy to navigate and would be enjoyed by my personas.

INFORMATION DESIGN:

I followed the sitemap that was provided to organize the pages.

WIREFRAME:

The wireframe gives a basic idea of what info needs to fit on the page, but does not depict the final design or the final location of information (which is why the sidebar is on the right).

VISUAL DESIGN:

Both of these initial ideation comps utilized bright color schemes- too bright I decided. I felt they didn’t fit my audience, so I tried something else, grayscale.

I really liked this idea at first, so I further developed the design…

INTERFACE DESIGN and PROTOTYPING:

This comp started out as a great concept and has a strong aesthetic, but I felt like it wasn’t fulfilling the goal and needs of the company or personas. And trying to figure out the navigation for this layout was a nightmare. Back to the drawing board…

I decided on a design that had a bright, soothing green palette, not the garishly bright scheme some of my initial comps had.

Ahh, much better. This time I made sure I thought ahead to the HTML and how I was going to slice the page. I decided to start this comp by designing what I felt was going to be the most difficult page, the What We Do page, because it is the deepest nav on the site and it has the most content. By figuring out this Interface Design challenge right away and designing a strong framework/grid, the other pages fell into place. All of the necessary Information Design for the site could be easily located on this design. The design was flexible enough to allow for changes in location of hierarchical elements between pages (ie. text or images, buttons, could be placed interchangeably in the sidebar or in the main content area.

CHALLENGES:

I struggled with writing the CSS and combining that with writing the HTML code so that the div that I just added would appear in the correct spot, or even just appear at all. It was a very positive experience. I would like to study some more examples of CSS to further understand the syntax and hierarchy.

I ended up with a few minor glitches while presenting the site in class:
I used an AP div tag for the image in the main content area on the home page. Since the sight is auto centered, the AP div tag isn’t always in the correct place.
My roll-overs spazzed out on the What We Do subpages; apparently because they need to be in a table.

But hey, even with all the struggles and what I’m sure is very poorly written code…the site actually works!!!
See for yourself: http://www.everythingaboutweb.com/artcenterdev/midterm_geddes/index.html

Code=
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<title>2-column web page</title>
<meta http-equiv=”Content-type” content=”text/html; charset=iso-8859-1″ />
<meta http-equiv=”Content-Language” content=”en-us” />
<link href=”styles.css” rel=”stylesheet” type=”text/css” />
<style type=”text/css”>

</style>
</head>

<body>

<div id=”wrapper”>

<div id=”header”>
<h1>Welcome!</h1>

<p> Jeepers, this is a really spiffy header. Oh boy!</p>
</div>

<div id=”navigation”>
<h2>Music </h2>
<h2>Photos </h2>
<h2>Blogerrific</h2>
<h2>Other </h2>
</div>

<div id=”content”>
<h1>LITTLE BOXES</h1>

<p> Little boxes on the hillside,
Little boxes made of ticky tacky,
Little boxes on the hillside,
Little boxes all the same.
There’s a green one and a pink one
And a blue one and a yellow one,
And they’re all made out of ticky tacky
And they all look just the same.</p>

<p> And the people in the houses
All went to the university,
Where they were put in boxes
And they came out all the same,
And there’s doctors and lawyers,
And business executives,
And they’re all made out of ticky tacky
And they all look just the same.</p>

<p> And they all play on the golf course
And drink their martinis dry,
And they all have pretty children
And the children go to school,
And the children go to summer camp
And then to the university,
Where they are put in boxes
And they come out all the same.</p>

<p> And the boys go into business
And marry and raise a family
In boxes made of ticky tacky
And they all look just the same.
There’s a green one and a pink one
And a blue one and a yellow one,
And they’re all made out of ticky tacky
And they all look just the same.</p>

</div>

<div id=”footer”>
<h2>And this little piggy went wee wee wee all the way home!</h2>
</div>

</div>

</body>

</html>

CSS=
body { font-size: 62.5%;
}

#wrapper {
max-width:990px;
min-width:720px;
margin-left:auto;
margin-right:auto;
text-align:left;
background:url(images/faux_column.gif) repeat-y;
}

#header {
height: 125px;
background-color: #4F4F4F;
}

#navigation {
width:170px;
float:left;
background-color: #5AB75A;
}

#content {
width:820px;
float:left;
top:0px;
background-color: #D1D1D1;
}

#footer {
clear:both;
background-color: #4F4F4F;
}

h1 {
font-family:Georgia, Times, serif;
font-size:2.2em;
font-weight:bold;
letter-spacing:1px;
padding-left: 20px;
}

h2 {
font-family:Georgia, Times, serif;
font-size:1.8em;
font-weight:bold;
letter-spacing:1px;
padding-left: 20px;
}

p {
font-family:Arial, Helvetica, sans-serif;
font-size:1.4em;
line-height:1.8em;
padding-left: 20px;
}

Check out the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<title>3-column web page</title>
<meta http-equiv=”Content-type” content=”text/html; charset=iso-8859-1″ />
<meta http-equiv=”Content-Language” content=”en-us” />
<link href=”styles.css” rel=”stylesheet” type=”text/css” />
<style type=”text/css”>

</style>
</head>

<body>

<div id=”wrapper”>

<div id=”header”>
<h1> Three Column + Faux Columns</h1>
</div>

<div id=”threecolwrap”>

<div id=”twocolwrap”>

<div id=”navigation”>
<h3> Nav </h3>
<h3> +Nav </h3>
<h3> ++Nav </h3>
<h3> +++Nav </h3>
</div>

<div id=”content”>
<h2> Rhyme Away! </h2>
<p>Row, row, row your boat, gently down the stream. Merrily, merrily, merrily, merrily. Life is but a dream.</p><br />
<p>Jack Sprat could eat no fat; his wife could eat no lean. And so, between the two of them, they licked the platter clean.</p><br />
<p> Jack and Jill went up the hill, to fetch a pail of water. Jack fell down and broke his crown, and Jill came tumbling after. </p>
</div>

</div>

<div id=”right_side”>
<h2> Column 3</h2>
<p> Look at this really spiffy information here. </p>
</div>

</div>

<div id=”footer”>
<h2>I am a footer. Oh yeah! </h2>
</div>

</div>
</body>
</html>

And the CSS:
body {
font-size: 62.5%;
margin-top:25px;
}

* {margin:0; padding:0;}

div#wrapper {
max-width:990px; min-width:760px;
margin-left:auto;
margin-right:auto;
}

div#header {
width:auto;
height: 100px;
background-color: #009966;
}

#threecolwrap {
float:left;
width:100%;
background:url(images/rightcolumn.gif) repeat-y right;
}

#twocolwrap {
float:left;
width:100%;
display:inline; /* stops IE doubling margin on float*/
margin-right:-170px; /* CWS – neg margin move */
background:url(images/navcolumn.gif) repeat-y left;
}

#navigation {
float:left;
width:150px;
background-color: #33CCCC;
display:inline; /* stops IE doubling margin on float*/
}

#content {
width:auto;
top:0px;
margin-left:150px;
margin-right:170px;
height:1%;
background-color: #f2f0f0;
}

#right_side{
float:left;
width:170px;
display:inline; /* stops IE doubling margin on float*/
background-color: #FFCC33;
}

#footer {
clear:both;
width:100%;
float:left;
background-color: #009966;
}

h1 {
font-family: Georgia, Times, serif;
font-size:2.2em;
font-weight:bold;
font-color: #ffffff
letter-spacing:1px;
padding-left: 20px;
color: #FFFFFF;
width: 100%;
}

h2 {
font-family:Georgia, Times, serif;
font-size:1.8em;
font-weight:bold;
letter-spacing:1px;
padding-left: 20px;
padding-right: 20px;
}

p {
font-family: Helvetica, Arial, sans-serif;
font-size:1.4em;
line-height:1.4em;
padding-left: 20px;
padding-right: 20px;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.8em;
padding-left: 20px;
}

Here’s the updated code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<title>3-column web page</title>
<meta http-equiv=”Content-type” content=”text/html; charset=iso-8859-1″ />
<meta http-equiv=”Content-Language” content=”en-us” />
<link href=”styles.css” rel=”stylesheet” type=”text/css” />
<style type=”text/css”>

</style>
</head>

<body>

<div id=”wrapper”>

<div id=”header”>
<h1> A Three Column Liquid Layout</h1>
</div>

<div id=”threecolwrap”>

<div id=”twocolwrap”>

<div id=”navigation”>
<h3> Nav </h3>
<h3> +Nav </h3>
<h3> ++Nav </h3>
</div>

<div id=”content”>
<h2> Rhyme Away! </h2>
<p>Row, row, row your boat, gently down the stream. Merrily, merrily, merrily, merrily. Life is but a dream.</p>

<p>Jack Sprat could eat no fat; his wife could eat no lean. And so, between the two of them, they licked the platter clean.</p>

<p> Jack and Jill went up the hill, to fetch a pail of water. Jack fell down and broke his crown, and Jill came tumbling after. </p>
</div>

</div>

<div id=”right_side”>
<h2> Right column</h2>
<p> There is a paragraph of really spiffy information here. </p>
</div>

</div>

<div id=”footer”>
<h2>I am a footer. Oh yeah! </h2>
</div>

</div>
</body>
</html>

And here’s the updated CSS:
body {
font-size: 62.5%;
margin-top:25px;
}

* {margin:0; padding:0;}

div#wrapper {
min-width:760px; max-width:990px;
margin-left:auto;
margin-right:auto;
}

div#header {
width:auto;
height: 150px;
background-color: #0000FF;
}

#threecolwrap {
float:left;
width:100%;
background-color: #d4d4d4;
}

#twocolwrap {
float:left;
width:100%;
display:inline; /* stops IE doubling  margin on float*/
margin-right:-170px;  /* CWS – neg margin move */
}

#navigation {
float:left;
width:150px;
background-color: #890e01;
display:inline; /* stops IE doubling margin on float*/
}

#content  {
width:auto;
top:0px;
margin-left:150px;
margin-right:170px;
height:1%;
background-color: #f2f0f0;
}

#right_side{
float:left;
width:150px;
display:inline; /* stops IE doubling  margin on float*/
background-color: #999;
}

#footer {
clear:both;
width:100%;
float:left;
background-color: #0000FF;
}

h1 {
font-family: Georgia, Times, serif;
font-size:2.2em;
font-weight:bold;
font-color: #ffffff
letter-spacing:1px;
padding-left: 20px;
color: #FFFFFF;
width: 100%;
}

h2 {
font-family:Georgia, Times, serif;
font-size:1.8em;
font-weight:bold;
letter-spacing:1px;
padding-left: 20px;
}

p {
font-family: Helvetica, Arial, sans-serif;
font-size:1.4em;
line-height:1.4em;
padding-left: 20px;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.8em;
}

<head>
<title>3-column web page</title>
<meta http-equiv=”Content-type” content=”text/html; charset=iso-8859-1″ />
<meta http-equiv=”Content-Language” content=”en-us” />
<link href=”styles.css” rel=”stylesheet” type=”text/css” />
<style type=”text/css”>

</style>
</head>

<body>

<div id=”wrapper”>

<div id=”header”>
<h1> A Three Column Liquid Layout</h1>
</div>

<div id=”threecolwrap”><!–encloses the three columns–>

<div id=”twocolwrap”><!– encloses the left and center columns–>

<div id=”navigation”>
<h2> Navigation </h2>
<h2> More navigation </h2>
<h2> Even more navigation </h2>
</div>

<div id=”content”>
<h1> This is the content </h1>
<p>Row, row, row your boat, gently down the stream. Merrily, merrily, merrily, merrily. Life is but a dream.</p>

<p>Jack Sprat could eat no fat; his wife could eat no lean. And so, between the two of them, they licked the platter clean.</p>

<p> Jack and Jill went up the hill, to fetch a pail of water. Jack fell down and broke his crown, and Jill came tumbling after. </p>
</div>

</div><!–end of twocolwrap–>

<div id=”right_side”>
<h2> Right column</h2>
<p> There is a paragraph of really spiffy information here. </p>
</div>

</div><!–end of threecolwrap div–>

<div id=”footer”>
<h2>I am a footer. Oh yeah! </h2>
</div>

</div>
</body>
</html>

And here is the CSS:
body {
font-size: 62.5%;
margin-top:25px;
}

* {margin:0; padding:0;}

div#wrapper {
min-width:760px; max-width:990px;
margin-left:auto;
margin-right:auto;
}

div#header {
width:auto;
height: 150px;
background-color: #fd1a02;
}

#threecolwrap {
float:left;
width:100%;
background-color: #d4d4d4;
}

#twocolwrap {
float:left;
width:100%;
display:inline; /* stops IE doubling margin on float*/
margin-right:-170px; /* CWS – neg margin move */
}

#navigation {
float:left;
width:150px;
background-color: #890e01;
display:inline; /* stops IE doubling margin on float*/
}

#content {
width:auto;
top:0px;
margin-left:150px;
margin-right:170px;
height:1%;
background-color: #f2f0f0;
}

#right_side{
float:left;
width:170px;
display:inline; /* stops IE doubling margin on float*/
background-color: #999;
}

#footer {
clear:both;
width:100%;
float:left;
background-color: #fd1a02;
}

h1 {
font-family: Georgia, Times, serif;
font-size:2.2em;
font-weight:bold;
font-color: #ffffff
letter-spacing:1px;
padding-left: 20px;
}

h2 {
font-family:Georgia, Times, serif;
font-size:1.8em;
font-weight:bold;
letter-spacing:1px;
padding-left: 20px;
}

p {
font-family: Helvetica, Arial, sans-serif;
font-size:1.4em;
line-height:1.8em;
padding-left: 20px;
}

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>

<head>
<title>2-column web page</title>
<meta http-equiv=”Content-type” content=”text/html; charset=iso-8859-1″ />
<meta http-equiv=”Content-Language” content=”en-us” />
<link href=”styles.css” rel=”stylesheet” type=”text/css” />
<style type=”text/css”>

</style>
</head>

<body>

<div id=”wrapper”>

<div id=”header”>
<h1>Welcome!</h1>

<p>Blah! Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </p>
</div>

<div id=”navigation”>
<h1>Music </h1>
<h2>Photos </h2>
<h2>Blogerrific</h2>
<h2>Other </h2>
</div>

<div id=”content”>
<h1>Little Boxes</h1>

<p> Little boxes on the hillside,
Little boxes made of ticky tacky,
Little boxes on the hillside,
Little boxes all the same.
There’s a green one and a pink one
And a blue one and a yellow one,
And they’re all made out of ticky tacky
And they all look just the same.</p>

<p> And the people in the houses
All went to the university,
Where they were put in boxes
And they came out all the same,
And there’s doctors and lawyers,
And business executives,
And they’re all made out of ticky tacky
And they all look just the same.</p>

<p> And they all play on the golf course
And drink their martinis dry,
And they all have pretty children
And the children go to school,
And the children go to summer camp
And then to the university,
Where they are put in boxes
And they come out all the same.</p>

<p> And the boys go into business
And marry and raise a family
In boxes made of ticky tacky
And they all look just the same.
There’s a green one and a pink one
And a blue one and a yellow one,
And they’re all made out of ticky tacky
And they all look just the same.</p>

</div>

<div id=”footer”>
<h2>And this little piggy went wee wee wee all the way home!</h2>
</div>

</div>

</body>

</html>

And here is the CSS:

body { font-size: 62.5%;
}

#wrapper {
width:990px;
margin-left:auto;
margin-right:auto;
}

#header {
height: 125px;
background-color: #4F4F4F;
}

#navigation {
width:30%;
float:left;
background-color: #5AB75A;
}

#content  {
width:70%;
float:left;
top:0px;
background-color: #D1D1D1;
}

#footer {
clear:both;
background-color: #4F4F4F;
}

h1 {
font-family:Georgia, Times, serif;
font-size:2.2em;
font-weight:bold;
letter-spacing:1px;
padding-left: 20px;
}

h2 {
font-family:Georgia, Times, serif;
font-size:1.8em;
font-weight:bold;
letter-spacing:1px;
padding-left: 20px;
}

p {
font-family:Arial, Helvetica, sans-serif;
font-size:1.4em;
line-height:1.8em;
padding-left: 20px;
}