@import "layout.css";

body, input, td, th, input, textarea { 
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Trebuchet MS", sans-serif; color: #555;
line-height: 1.4em; font-size: 14px;
}

h1, h2, h3, h4, h5 {
font-family: "Lucida Grande", "Trebuchet MS", sans-serif;
font-weight: bold; color: #777;
}

a:link, a:visited {
color: #11A322; text-decoration: none;
} 

a:hover, a:active { 
color: #D83188; text-decoration: underline; }

p { margin: 0.6em 0; }

strong { color: #696969; font-weight: bold; }

h1 {
position: relative;
top: 28px; left: 18px;
}

h1 a:hover, h1 a:active {
border-width: 0;
}

h1 a img {
border-width: 0;
}

h2 {
font-size: 140%;
margin-bottom: 0.5em;
}

h3 {
font-size: 120%;
margin-bottom: 0.5em;
}

h2 em { color: #D83188; font-style: normal; }

#feature h2 {
margin: 0;
padding-top: 28px; height: 0; /* Using LIR, separate file handles IE5 Win */
overflow: hidden;
background-position: left top;
color: #DDED93; /* Make same colour as panel incase the top peeps up */
}

.home #feature h2 {
background-image: url(../images/home-feature-title.gif);
}
.about #feature h2 {
background-image: url(../images/about-feature-title.gif);
}

.contact #feature h2 {
background-image: url(../images/contact-feature-title.gif);
}

#feature p { line-height: 1.5em; }
.about #feature p { margin-top: 0.4em; }

/* =nav */
#nav li {
display: block;
height: 22px; width: 91px;
margin-bottom: 7px;
background-position: left top;
}

li#homenav, li#homenav a { background-image: url(../images/home-nav.gif); }
li#portfolionav, li#portfolionav a { background-image: url(../images/portfolio-nav.gif); }
li#aboutnav, li#aboutnav a { background-image: url(../images/about-nav.gif); }
li#contactnav, li#contactnav a { background-image: url(../images/contact-nav.gif); }

#nav li a:link, #nav li a:visited {
display: block;
width: 91px;
padding-top: 22px; height: 0; /* Using LIR, separate file handles IE5 Win */
overflow: hidden;
background-position: left top;
}

#nav li.current a:link, #nav li.current a:visited { background-position: right top; }

#nav li a:hover, #nav li a:active {
background-position: right top;
border-width: 0;
}

/* =main */
#main h2, #main p, #main h3, #main ul, #main dl, form {
padding-left: 6px;
}

dl { font-size: 90%; }
dt { float: left; color: #999; margin-right: 0.4em; }

#main img {
display: block;
float: left; margin: 0 8px 4px 0;
}

#main a.screenshot {
display: block;
}

#main a.screenshot:hover, #main a.screenshot:active {
border-width: 0;
}

#main a.screenshot img {
float: none; border-width: 0;
}

a.external, a.more { 
background-image: url(../images/external-link.gif);
background-position: right center;
background-color: #11A322;
padding-right: 12px;
white-space: nowrap;
}

a.more { background-image: url(../images/highlight-link.gif); }

a.external:hover, a.external:active,
a.more:hover, a.more:active {
background-color: #D83188;
}

#sidebar a.external { background-image: url(../images/external-link-sidebar.gif); }

#sidebar a.more { background-image: url(../images/highlight-link-sidebar.gif); }

/* =sidebar */
#sidebar ul {
list-style-type: none;
}

#sidebar li, .newsitem {
display: block;
background-image: url(../images/divider.gif);
background-position: center bottom;
padding: 10px 0 10px;
font-size: 90%; line-height: 1.3em;
}

.portfolio #sidebar ul { padding-top: 10px; }

.portfolio #sidebar li { font-size: 120%; padding: 0 0 2px 0; }

.portfolio #sidebar li a, .portfolio #sidebar li span {
	display: block; padding: 10px 0;
}

.portfolio #sidebar li a:hover,
a.newsitem:hover { /*background-color: #D8E0DC; #DAE3DE;*/ }

.portfolio #sidebar li a:focus,
a.newsitem:focus { outline-width: 0; }

/* Underline only on heading */
a.newsitem:hover { text-decoration: none; }
a.newsitem:hover span.heading { text-decoration: underline; }

.newsitem span.heading { margin: 0; font-size: 120%; display: block; }

.newsitem span.desc { margin: 0.2em 0; display: block; color: #777; }

.note { font-size: 90%; }

#sidebar #top { padding-top: 0; }
#sidebar #bottom { background-image: none; }


p#feed {
margin: 14px 0 0;
width: 10em;
background-image: url(../images/rssicon-small.gif);
background-position: -234px 50%;
line-height: 1.6em;
}

p#feed a:link, p#feed a:visited {
font-size: 12px;
display: block; 
padding-left: 16px;
background-image: url(../images/rssicon-small.gif);
background-position: left center;
}

p#feed a:hover, p#feed a:active {
background-position: -234px 50%;
border-width: 0;
}

#sidebar h5 {
font-weight: normal; font-style: italic; font-size: 100%;
margin: 0 0 0.6em;
}

#footer p {
line-height: 1.6em;
margin: 0;
font-size: 80%; color: #aaa;
}

#footer a:link, #footer a:visited { color: #aaa; }
#footer a:hover, #footer a:active { color: #D83188; } 

/* contact page stuff */
fieldset { border-width: 0; }

label {
display: block;
font-size: 90%;
color: #777;
}

span.required, p.error { color: #D83188; }
p.success { color: #11A322; }

input.textbox, textarea {
width: 252px;
border: 1px solid #ddd;
margin: 0 0 5px;
font-size: 12px;
line-height: 1.6em;
padding: 0.2em 0 0.1em 2px;
background-color: #F0F5F2;
background-image: url(../images/textbox-background.gif);
background-position: left top;
}

input.textbox { 
}

input.button {
padding-left: 0.6em; padding-right: 0.6em;
}

textarea { 
width: 336px;
height: 15em;
}

.contact #sidebar {
line-height: 1.3em;
}

p#address span {
display: block;
line-height: 1.2em;
}

span.label { color: #999; font-size: 90%; }
span.tel { font-weight: bold; color: #696969; } 
p#vcard {
background-image: url(../images/vcard.png);
padding-left: 30px;
}