/* meline.css - stylesheet */

/* body */
body {
font-family: Helvetica, Ariel, sans-serif; 
word-spacing: 0.25 em;
font-size: 100%;
color: #3a414c;
background-image: url(images/grid-corner.gif);
background-repeat: no-repeat;
margin: 0;
padding: 20px 0 20px 0;
text-align:center;
} 

/* headers */
h1,h2,h3,h4,h5 {
font-family: "times new roman", times, serif;
font-weight: normal;
letter-spacing: 0.05em;
}

h1 {
font-size: 2.2em; 
margin: 0 0 10px 0;
}

h2 {
font-size: 1.5em; 
margin: 20px 0 10px 0;
}

h3,h4,h5 {
font-size: 1.1em; 
margin:  20px 0 10px 0;
}

/* paragraph and lists */
p,ul,ol {
font-size: 0.9em;
line-height: 1.5em;
margin: 0 0 10px 0;
word-spacing: 0.1em;
}

li {
margin: 0 0 5px 0;
}

/* links */
a {text-decoration: none;}

a:link {color: #41818e;}
a:visited {color: #41818e;}
a:hover, a:active, a:focus {
outline:none;
color: #9b9e3d;
}

img {border: none}

img.spaced {margin: 5px 0 10px 0}

/* overall container */
#container {
width: 900px;
margin-right: auto;
margin-left: auto;
margin-top: 10px;
padding: 0px;
text-align: left;
}
/* left and right auto margin centres the page in complient browsers */

#banner {
width: 880px;
height: 130px;
margin: 0 0 15px 0;
padding: 0;
}

#banner h1{
background-image: url(images/meline-banner.png);
background-position: 200px 50px;
background-repeat: no-repeat;
text-indent: -1000em;
width: 880px;
height: 130px;
display: block;
} 

#banner h1.graphic{
background-image: url(images/graphic.png);
} 

#banner h1.print{
background-image: url(images/print.png);
} 

#banner h1.web{
background-image: url(images/web.png);
} 

#banner h1.craft{
background-image: url(images/craft.png);
} 

#banner h1.ideas{
background-image: url(images/ideas.png);
} 

#banner h1.contact{
background-image: url(images/contact.png);
} 

/* local nav section */
#leftnav {
width: 180px;
padding: 0px;
float: left;
}

/* ********** local navigation menu style ********** */
#leftnav ul{
list-style: none;
margin: 0;
padding: 0;
}

#leftnav li{
display: inline;
margin:0;
padding:0;
}

#leftnav a{
float:left;
width:180px;
height:40px;
text-indent: -1000em;
overflow:hidden;
}

#menu1 a {
background-image: url(images/menu.gif);
}

#menu2 a {
background-image: url(images/menu.gif);
background-position: 0px -40px;
}

#menu3 a {
background-image: url(images/menu.gif);
background-position: 0px -80px;
}

#menu4 a {
background-image: url(images/menu.gif);
background-position: 0px -120px;
}

#menu5 a {
background-image: url(images/menu.gif);
background-position: 0px -160px;
}

#menu6 a {
background-image: url(images/menu.gif);
background-position: 0px -200px;
}

#menu1 a:hover {
background-image: url(images/menu.gif);
background-position: -180px -0px;
}

#menu2 a:hover {
background-image: url(images/menu.gif);
background-position: -180px -40px;
}

#menu3 a:hover {
background-image: url(images/menu.gif);
background-position: -180px -80px;
}

#menu4 a:hover {
background-image: url(images/menu.gif);
background-position: -180px -120px;
}

#menu5 a:hover {
background-image: url(images/menu.gif);
background-position: -180px -160px;
}

#menu6 a:hover {
background-image: url(images/menu.gif);
background-position: -180px -200px;
}

li#active1,li#active1 a {
float:left;
width:180px;
height:40px;
background-image: url(images/menu.gif);
background-position: -360px 0px;
text-indent: -1000em;
}

li#active2, li#active2 a {
float:left;
width:180px;
height:40px;
background-image: url(images/menu.gif);
background-position: -360px -40px;
text-indent: -1000em;
}

li#active3, li#active3 a {
float:left;
width:180px;
height:40px;
background-image: url(images/menu.gif);
background-position: -360px -80px;
text-indent: -1000em;
}

li#active4, li#active4 a {
float:left;
width:180px;
height:40px;
background-image: url(images/menu.gif);
background-position: -360px -120px;
text-indent: -1000em;
}

li#active5, li#active5 a {
float:left;
width:180px;
height:40px;
background-image: url(images/menu.gif);
background-position: -360px -160px;
text-indent: -1000em;
}

li#active6, li#active6 a {
float:left;
width:180px;
height:40px;
background-image: url(images/menu.gif);
background-position: -360px -200px;
text-indent: -1000em;
}

li#active1 a:hover {
float:left;
width:180px;
height:40px;
background-image: url(images/menu.gif);
background-position: -540px 0px;
text-indent: -1000em;
}

li#active2 a:hover {
float:left;
width:180px;
height:40px;
background-image: url(images/menu.gif);
background-position: -540px -40px;
text-indent: -1000em;
}

li#active3 a:hover {
float:left;
width:180px;
height:40px;
background-image: url(images/menu.gif);
background-position: -540px -80px;
text-indent: -1000em;
}

li#active4 a:hover {
float:left;
width:180px;
height:40px;
background-image: url(images/menu.gif);
background-position: -540px -120px;
text-indent: -1000em;
}

li#active5 a:hover {
float:left;
width:180px;
height:40px;
background-image: url(images/menu.gif);
background-position: -540px -160px;
text-indent: -1000em;
}

li#active6 a:hover {
float:left;
width:180px;
height:40px;
background-image: url(images/menu.gif);
background-position: -540px -200px;
text-indent: -1000em;
}

/* page content */
#content {
width: 360px;
height: 300px !important;
padding: 30px 0 0 40px;
float: left;
background-image: url(images/corner.png);
background-repeat: no-repeat;
background-position: 15px 5px;
}

/* thumbnail menu section */

#th-menu {
width: 300px;
padding: 0px;
float: left;
}

#th-menu ul {
display: inline;
list-style: none;
margin: 0;
padding: 0;
}

#th-menu li {
float: left;
display: block;
padding: 10px;
margin: 0 0 20px 20px;
}

/* thumbnails */

#th-menu li.th-1 {
background-image: url(images/th-1.png);
background-repeat: no-repeat;
}

#th-menu li.th-2 {
background-image: url(images/th-2.png);
background-repeat: no-repeat;
}

#th-menu li.th-3 {
background-image: url(images/th-3.png);
background-repeat: no-repeat;
}

#th-menu li.th-4 {
background-image: url(images/th-4.png);
background-repeat: no-repeat;
}

#th-menu li.th-5 {
background-image: url(images/th-5.png);
background-repeat: no-repeat;
}

#th-menu li.th-6 {
background-image: url(images/th-6.png);
background-repeat: no-repeat;
}

#th-menu li.th-7 {
background-image: url(images/th-7.png);
background-repeat: no-repeat;
}

#th-menu li.th-8 {
background-image: url(images/th-8.png);
background-repeat: no-repeat;
}