/*
STYLE SHEET FOR XXXXXX
Created by Kirsty Burgoine
www.xxxxxxxx.co.uk
ToC
	1.  defaults
	2.  structure
	3.  links and navigation
	4.  fonts
	5.  images
	6.  hacks
Notes
*/

/* ------- 1. defaults ------- */

* {
	margin: 0;
	padding: 0;
}

body {
	width: 100%;
	height: 100%;
	background: url(../site_images/bdy_bckgrd_wide.jpg) no-repeat top center;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	
}

/* ------- 2. structure ------- */

#wrapper {
background: url(../site_images/body_bckgrnd_grunge.gif) no-repeat top center;
border: solid 1px #cccccc;
min-width: 1024px;
max-width: 1280px;
margin: 0 auto;
}


#container {
	margin: 0 auto;
	width: 1024px;
	overflow: hidden;
}



#left { /*includes navigation and RSS feed */
float: left;
width: 180px;
margin: 370px 0 0 20px;
height:800px;
}


#content {
float: left;
width: 800px;
margin: 220px 0 0 0px;
overflow: hidden;
background: url(../site_images/nav_bckgrd_curved.png) no-repeat top center;
}

#content_inner {
float: left;
width: 700px;
height: 100%;
padding: 25px 50px;
background: url(../site_images/content_shadow.png) repeat-y top center;
}

#content_footer {
float: left;
background: url(../site_images/footer_bckgrd-curved.png) no-repeat bottom center;
width: 800px;
/* overflow: hidden; */
color: #ffffff;

}


#content_footer_inner {
margin-bottom: 34px;
background: url(../site_images/footer_bckgrnd_grunge.png) no-repeat top center;
height: 400px;
overflow: hidden;
}


.content {
width: 700px;
margin: 30px auto 10px auto;
font-size: 14px;
}

#right { /* content images, parts numbers and external links */
float: right;
margin-right: 30px;
width: 140px;
}




#footer {
width: 800px;
}

.seperator {
	clear: both;
	height: 0;
}

/* ------- 3. links and navigation ------- */

a {
	font-family: Arial, Helvetica, sans-serif;
	font-size:15px;

}

a:visited {
}

a:hover {
}

a:active {
}

#navigation {
width: 800px;
height: 50px;
float: left;

}

#navigation ul {
list-style-type: none;
margin: 0;
padding: 0;
float: right;
margin: 21px 30px 0 0;
}

#navigation ul li {
display: inline;

}

#navigation ul li a {
color: #ffffff;
text-decoration: none;
width: 120px;
display: block;
float: left;
text-align: center;
}

/*
#navigation ul li a.cat2 { /* contact link */
/*
width: 230px;

}
*/

#navigation ul li a.cat7 { /* contact link */

width: 230px;

}

#navigation ul li a.cat6 { /* about me link */

width: 120px;

}

#navigation ul li a.cat26 {
width: 100px;
}

#navigation ul li a:hover span, #navigation ul li a.cat2selected span, #navigation ul li a.cat6selected span, #navigation ul li a.cat7selected span, #navigation ul li a.cat8selected span, #navigation ul li a.cat26selected span, #navigation ul li a.cat27selected span {
visibility: hidden;
}

#navigation ul li a.cat1selected span {
visibility: hidden;

}

#navigation ul li a.cat1:hover, #navigation ul li a.cat1selected { /* home link */
background: url(../site_images/nav_1_hover.jpg) no-repeat center;
overflow: hidden;
}

#navigation ul li a.cat2:hover, #navigation ul li a.cat2selected  { /* portfolio link */

text-decoration: none;
background: url(../site_images/nav_2_hover.jpg) no-repeat center;

}

#navigation ul li a.cat6:hover, #navigation ul li a.cat6selected { /* contact link */

text-decoration: none;
background: url(../site_images/nav_6_hover.jpg) no-repeat center;

}


#navigation ul li a.cat7:hover, #navigation ul li a.cat7selected { /* contact link */
width: 230px;
text-decoration: none;
background: url(../site_images/nav_7_hover.jpg) no-repeat center;

}

#navigation ul li a.cat8:hover, #navigation ul li a.cat8selected { /* about me link */

text-decoration: none;
background: url(../site_images/nav_8_hover.jpg) no-repeat center;

}

#navigation ul li a.cat26:hover, #navigation ul li a.cat26selected { /* extra stuff link */

text-decoration: none;
background: url(../site_images/nav_26_hover.jpg) no-repeat center;

}
#navigation ul li a.cat27:hover, #navigation ul li a.cat27selected { /* friends link */

text-decoration: none;
background: url(../site_images/nav_27_hover.jpg) no-repeat center;

}

ul#side_nav {
	list-style: none;
	width: 180px;
	border:0;
	background-color:#ffffff;
	margin:20px 0;
}

ul#side_nav li {
	width: 180px;
	padding:0px;
	display:block;
	margin:0px;
}

ul#side_nav li a {
cursor:pointer;
	display: block;
	
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	margin:0;
	border:0;
	border-bottom:1px solid #cccccc;
	height:40px;
	padding: 0px 0 0 10px;
	line-height: 35px;
	color: #ffffff;
}

ul#side_nav li a.cat3 {
background-color: #8e53a1;
}

ul#side_nav li a.cat4 {
background-color: #d8c4df;
}

ul#side_nav li a.cat5 {
background-color: #8e53a1;
}

ul#side_nav li a:hover { 
	text-decoration:none;
	
	display: block;
	/* color: #8E53A1; */
	/* height:22px; */
		
}

ul#side_nav li a:hover span, ul#side_nav li a.cat3selected span,  ul#side_nav li a.cat4selected span,  ul#side_nav li a.cat5selected span  { 
visibility: hidden;
}

ul#side_nav li a.cat3:hover, ul#side_nav li a.cat3selected  { 
background: url(../site_images/web_hover_grunge.png) no-repeat bottom right;
	

}

ul#side_nav li a.cat4:hover, ul#side_nav li a.cat4selected { 
background: url(../site_images/print_hover_grunge.png) no-repeat bottom right;

}

ul#side_nav li a.cat5:hover, ul#side_nav li a.cat5selected { 
background: url(../site_images/case_hover_grunge.png) no-repeat bottom right;
	
}

ul#side_nav li a:active {
	background: url(../admin/images/catnav_bkgrd.png) repeat-x;
	/* color: #8E53A1; */
}

ul#side_nav li a.selected {
	background: url(../admin/images/catnav_bkgrd.png) repeat-x;
	/* color: #8E53A1; */
}
ul#side_nav li a.current {
	background: url(../admin/images/catnav_bkgrd.png) repeat-x;
	/* color: #8E53A1; */
}


a#twitter-link {
background: url(../site_images/twitter-icon-grunge.png) no-repeat top left;
padding: 15px 0 20px 70px;
display: block;
text-decoration: none;
color: #666666;

} 

a#twitter-link:hover {
color: #cccccc;
}

* html a#twitter-link {
width: 100px;
}

a#linkedin-link {
background: url(../site_images/linkedin-icon-grunge.png) no-repeat top left;
padding: 5px 0 30px 70px;
display: block;
text-decoration: none;
color: #666666;

} 

a#linkedin-link:hover {
color: #cccccc;
}


* html a#linkedin-link {
width: 100px;
}


a.rss-link {
background: url(../site_images/rss-icon.png) no-repeat left center;
padding: 10px 0 10px 40px;
color: #8e53a1;
text-decoration: none;
}

a.rss-link:hover {
color: #666666;
text-decoration: underline;
}

#content_footer_inner a:hover {
color: #4D2B4D;
}

#content_inner a.content_links {
color: #8e53a1;
text-decoration: none;
}

#content_inner a.content_links:hover {
color: #666666;
text-decoration: underline;
}

/* -------4. fonts ------- */

h1, h2, h3, h4, p, ul {
}



#tagline h1 {
color: #ffffff;
font-size: 17px;
padding: 10px 5px;
line-height: 26px;
}

#left h1 {
color:#666666;
font-size:24px;
font-weight:600;
padding: 0;
letter-spacing: -1px;
}

#content_inner h1 {
color: #58595B;
font-size: 15px;
padding-bottom: 10px;
}

#left h2 {
color:#666666;
font-size:14px;
font-weight:600;
padding: 0;
letter-spacing: -1px;
}

#middle h2 {
color: #58595B;
font-size: 13px;
padding-bottom: 10px;
}

#content_inner h2 {
color: #58595B;
font-size: 15px;
padding-bottom: 10px;
}

.content h2 {
font-size: 15px;
color: #ffffff;
padding-bottom: 7px;
}

#content_footer h2 { 
font-size: 15px;
padding-bottom: 10px;
}

h2.spotify {

background: url(../site_images/spotify.png) no-repeat left center;
padding-left: 25px;

}

h2.delicious-banner {

}

#left h3 {
color:#666666;
font-size:14px;
font-weight:600;
padding: 0;
margin: 0;
letter-spacing: 0px;
}

h4{
}

#rss p {
font-size: 11px;
line-height: 16px;
color: #ffffff;
padding: 0 0 5px 0;
}

#left p {
font-size: 12px;
line-height: 20px;
color: #58595B;
margin-bottom: 15px;
font-weight: 600;
}

#left p.testimonial {
font-style: italic;
font-weight: 500;
font-size: 11px;
line-height: 18px;
text-align: left;
}

#content_inner p {
font-size: 13px;
line-height: 20px;
color: #58595B;
margin-bottom: 15px;
}



#add_info p {
padding-bottom: 5px;

}

#content_footer p {
font-size: 13px;
line-height: 20px;
margin-bottom: 15px;
}

#content_inner ul {
color: #58595B;
list-style-type:none;
margin: 0 20px 10px 20px;
padding: 0;
}

#content_inner ul li {
font-size: 13px;
line-height: 20px;
padding-bottom: 15px;
display: block;
background: url(../site_images/bullet.gif) no-repeat left top;
padding-left: 30px;
}


#footer ul {
list-style-type: none;
margin: 0 auto;
padding: 0;
width: 700px;

}

#footer ul li {
display: inline;
float: left;
padding-right: 30px;
color: #939598;
font-size: 9px;
}

ol {
}

hr {
height: 3px;
background-color: #8e53a1;
border: none;
}

span.home { /* home link over logo */
width: 100px;
height: 100px;
}

span.downloads {
background: url(../site_images/icon-background.png) no-repeat;
width: 50px;
height: 50px;
color: #ffffff;
padding: 12px 5px;
font-size: 24px;
font-weight: 600;
}

#content_inner h1.thanks {
color: #8E53A1;
}

#content_inner p.thanks {
color: #8E53A1;
}

.purple {
color: #8E53A1;
font-weight: 600;
}

.date {
font-size: 10px;
font-style: italic;
}

#content_inner p.comments_link {
cursor: pointer;
color: #8E53A1;
font-weight: 600;
font-size: 14px;
}

#content_inner p.comments_link:hover {
color: #58595B;
}

/* ------- 5. images ------- */

a img {
	border: 0;
}


#right img {
border: dotted 2px #939598;
margin-bottom: 20px;
}

img.content_img {
border: solid 2px #cccccc; 


}

img.intro {
float: right;
margin-left: 10px;
border: none;
}

/* -------7. forms ------- */

form.enquiry {
width: 450px;
}

label {
float: left;
font-size: 11px;
line-height: 16px;
color: #58595B;
margin-bottom: 10px;
}


.textfield {
width: 350px;
height: 20px;
float: right;
border: solid 1px #cccccc;
}

.textarea {
width: 350px;
height: 125px;
float: right;
border: solid 1px #cccccc;
margin-bottom: 5px; 
}

.textfield:hover {
border: solid 1px #8E53A1;
}

.textarea:hover {
border: solid 1px #8E53A1;
}

.textfield_error {
width: 350px;
height: 20px;
float: right;
border: solid 1px #E95A38;
}


.notice {
float: right;
font-size: 10px;
color:#8E53A1;
}

#middle p.error {
font-weight: 600;
color: #E95A38;
}

.button {
cursor: pointer;
float: right;
border: solid 1px #8E53A1;
background-color: #8e53a1;
color: #ffffff;

height: 35px;
padding: 10px 50px;
text-align: center;
}

.button:hover {
border: solid 1px #cccccc;
background-color: #cccccc;
}


/* -------7. hacks ------- */

body {/*IE 5 centring bug fix */
text-align: center;
}

#container {
text-align: left;
}

* html #container { /* sets the page height in IE6 */
height: 2500px;
}

* html #left { /* positions left column */
margin-left: 15px;
}

* html #middle { /* posistions page content */

width: 500px;
}

* html #content_inner p {
/* float: left; */
}

* html #content_footer {
float: none;
height: 454px;
background-image: url(../site_images/footer_background-ie6.png);
background-repeat: no-repeat;
background-position: top;
}

* html #content_footer_inner {
background: none;
}

img, div, a, a:hover, a:active, .selected, li, a.me:hover, a.me:active, .tabnav li.ui-tabs-selected a.me { behavior: url(iepngfix.htc) }