/* ====================================================
TITLE: Trash Design, Web Design and New Media Development
DATE: October 2007, version 2.0
AUTHOR: Alex Kilgour - http://www.alexkilgour.co.uk
==================================================== */

/* ======================================
	GLOBAL SETTINGS
======================================= */

h2 {
	padding: 15px 0;
	color: #ed0a7d;
	font-size: 16px;
}
p {
	padding: 8px 0;
	line-height: 20px;
	color: #fff;
	font-size: 12px;
	text-align: left;
}

/* ======================================
	HEADER
======================================= */

#headlink {
	width: 800px;
	height: 100px;
	visibility: visible;
	background-color: transparent; 
}
#headlink a {
	width: 800px;
	height: 100px;
	display:block;
	outline: none;
	background-image: url(header.gif);
	background-position: 0px 0px; 
}
/* ADD THIS TO MAKE THE HEADER GO PINK ON MOUSE OVER
#headlink a:hover { background-position: 0px -100px; }*/

/* ======================================
	LINKS
======================================= */

#link-left { width: 250px; height: 25px; float: left; display:block; background-image: url(link-left.gif); }
#link-right { width: 250px; height: 25px; float: left; display:block; background-image: url(link-right.gif); }

#link01 {
	width: 100px;
	height: 25px;
	float: left;
	visibility: visible;
	background-color: transparent; 
}
#link01 a {
	width: 100px;
	height: 25px;
	display:block;
	outline: none;
	background-image: url(about.gif);
	background-position: 0px 0px; 
}
#link01 a:hover { background-position: 0px -25px; }

#link02 {
	width: 100px;
	height: 25px;
	float: left;
	visibility: visible;
	background-color: transparent; 
}
#link02 a {
	width: 100px;
	height: 25px;
	display:block;
	outline: none;
	background-image: url(portfolio.gif);
	background-position: 0px 0px; 
}
#link02 a:hover { background-position: 0px -25px; }

#link03 {
	width: 100px;
	height: 25px;
	float: left;
	visibility: visible;
	background-color: transparent; 
}
#link03 a {
	width: 100px;
	height: 25px;
	display:block;
	outline: none;
	background-image: url(contact.gif);
	background-position: 0px 0px; 
}
#link03 a:hover { background-position: 0px -25px; }

/* ======================================
	CONTENT
======================================= */

.spacer { clear:both; }
.header-image{ text-align: left; width: 800px; padding-left: 20px;}
html>body .header-image { padding-left: 0px; } /* FIX FOR OLDER IE BROWSERS */
.header-image img{ width: 333px; height: 124px; padding-left: 20px; }

/* ---------- HOME ---------- */
#img-holder{ margin: 0 auto; width: 600px; }
.home-image { float: left; }

/* ---------- ABOUT ---------- */
.text { padding: 20px 30px 50px 30px; float: left; }

/* ---------- PORTFOLIO ---------- */
#portfolio-holder{ margin: 0 auto; clear: both; }
.table { float: left; display: inline; }
.portfolio-box { width: 400px; height: 268px; background-image: url(portfolio-backer.gif); }
.port-link { padding: 28px 0px 0px 315px; }
html>body .port-link { padding: 28px 0px 0px 344px; } /* FIX FOR OLDER IE BROWSERS */
.port-link a { width: 28px; height: 28px; background-image: url(link.gif); display: block; outline: none; }

#port01-top { width: 400px; height: 83px; margin: 0px 0px 0px 0px; background-image: url(portfolio01head.gif);}
#port01 { width: 333px; height: 220px; margin: 0px 0px 0px 0px; border: thin solid #1a1817; }
html>body #port01 { margin: 0px 0px 0px 32px; } /* FIX FOR OLDER IE BROWSERS */
#port01 a { width: 333px; height: 220px; background-image: url(portfolio01.gif); background-position: 0px 0px; display:block; outline: none; }
#port01 a:hover { background-position: 0px -220px; }

#port02-top { width: 400px; height: 83px; margin: 0px 0px 0px 0px; background-image: url(portfolio02head.gif); }
#port02 { width: 333px; height: 220px; margin: 0px 0px 0px 0px; border: thin solid #1a1817; }
html>body #port02 { margin: 0px 0px 0px 32px; } /* FIX FOR OLDER IE BROWSERS */
#port02 a { width: 333px; height: 220px; background-image: url(portfolio02.gif); background-position: 0px 0px; display:block; outline: none; }
#port02 a:hover { background-position: 0px -220px; }

#port03-top { width: 400px; height: 83px; margin: 0px 0px 0px 0px; background-image: url(portfolio03head.gif); }
#port03 { width: 333px; height: 220px; margin: 0px 0px 0px 0px; border: thin solid #1a1817; }
html>body #port03 { margin: 0px 0px 0px 32px; } /* FIX FOR OLDER IE BROWSERS */
#port03 a { width: 333px; height: 220px; background-image: url(portfolio03.gif); background-position: 0px 0px; display:block; outline: none; }
#port03 a:hover { background-position: 0px -220px; }

#port04-top { width: 400px; height: 83px; margin: 0px 0px 0px 0px; background-image: url(portfolio04head.gif); }
#port04 { width: 333px; height: 220px; margin: 0px 0px 0px 0px; border: thin solid #1a1817; }
html>body #port04 { margin: 0px 0px 0px 32px; } /* FIX FOR OLDER IE BROWSERS */
#port04 a { width: 333px; height: 220px; background-image: url(portfolio04.gif); background-position: 0px 0px; display:block; outline: none; }
#port04 a:hover { background-position: 0px -220px; }

/* ---------- CONTACT ---------- */
.contact { padding: 10px 0px 50px 80px; float: left; line-height: 20px; font-size: 14px; text-align: left; }
.contact p { line-height: 20px; font-size: 14px; }
.contact a { color: #ed0a7d; text-decoration: none; outline: none; }
.contact a:hover { background-color: #ed0a7d; color: #fff;}

/* ======================================
	FOOTER
======================================= */

.footer h3 {
	color: #fff;
	text-align: center;
	line-height: 20px;
	font-size: 12px;
	font-weight: bold;
	padding-top: 25px;
	background-color: transparent;	
}
.footer h3 a { color: #ed0a7d; text-decoration: none; outline: none; }
.footer h3 a:hover { background-color: #ed0a7d; color: #fff;}
.footer h4 {
	color: #fff;
	text-align: center;
	line-height: 20px;
	font-size: 9px;
	font-weight: normal;
	background-color: transparent;	
}