@charset "utf-8";
/* CSS Document */

html { font-size: 100%; /* IE hack */ }

p {font-family:Arial, Helvetica, sans-serif; font-size: .8em;}
a {font-family:Arial, Helvetica, sans-serif; font-size: .8em;}
body  {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 100%; /* for IE */
	margin: 0;
	padding: 0;
	text-align: center;
}
.pfmain #container { 
	width: 1024px;
	background: #FFFFFF;
	margin: 0 auto;
	text-align: left;
} 
.pfmain #sidebar1 {
	float: left; 
	width: 140px;
	padding: 15px 0;
	font-size:.75em;
}
.pfmain #sidebar1 h3, .pfmain #sidebar1 p {
	margin-left: 10px;
	margin-right: 10px;
}

.pfmain #mainContent {
 width:750px;
 margin: 0 0px 0 224px;
 padding: 15px 0;
 border:;
}
.text {margin-left:10px;}
.bullet{
font-family:Arial, Helvetica, sans-serif;
font-size:.75em;
padding: 0 10px 0 10px;
}
.hide
{display:none}
table
{
margin: 0 121px 0 121px;
}
.columnleft{
float:left;
width:340px;
margin: 0 5px 20px 5px;
}

.columnright{
float: right;
width:340px;
margin: 0 5px 20px 0;
}

.columncentre{
padding: 0 121px 0 121px;
}

/* Left Navigation */
.pfmain #nav{
width:140px;
padding: 10px 0 10px 0;
}
.pfmain #nav ul
{
list-style-type: none; /*turns off display of bullet*/
padding-left: 0; /*removes indent Mozilla and NN7*/
margin-left: 0; /*removes indent IE and Opera*/
}
.pfmain #nav li {
padding: 5px 0px 0px 0px; 
margin:0px;
}
.pfmain #nav a {
display: block;
padding: 0px 5px 0px 0px;
text-decoration: none;
text-color: #757575;
text-align: right;
font-size:1em;
background: #F9A230;
border-bottom: #707070 1px solid;
border-right: #707070 1px solid;
}
.pfmain #nav a:link, #nav a:active, #nav a:visited {
color: #757575;
}
.pfmain #nav a:hover {
background: #9C8C8C;
color: #ffffff;
}

/* Portfolio Sub Navigation */

#subnav {
	height:18px;
}
#subnavbuttons { }
#subnavbuttons ul {
	float:left;
	position: relative;
	list-style: none;
	margin: 0px;
	padding: 2px 2px;  
}
#subnavbuttons li {
	float: left;
	text-align:center;
}
#subnavbuttons a {
	background: #F9A230;
	text-decoration:none;
	font-size:.8em;
	color: #757575;
	padding: 2px 4px; 
	margin: 2px 2px; 
}
#subnavbuttons a:hover {
	background: #9C8C8C;
	color: #ffffff;
}

body#paul-featherstone-illustration-portfoliogreetings-cards .nav1 { background: #9C8C8C; color: #ffffff; }
body#paul-featherstone-illustration-portfolioillustration .nav2 { background: #9C8C8C; color: #ffffff; }
body#paul-featherstone-illustration-portfoliosketches .nav3 { background: #9C8C8C; color: #ffffff; }

/* About me styles */

.content{
float:right;
width:200px;
border-bottom:20px;
}
.button{
background-color:#F7931E;
margin: 20px 20px;
}
.buttontext{
padding: 5px;
font-size:12px;
}

/* Corner styles */

.t {background: url(/images/box-components/dot.gif) 0 0 repeat-x; height: 100%; width: 100%;}
.b {background: url(/images/box-components/dot.gif) 0 100% repeat-x; height: 100%; width: 100%;}
.l {background: url(/images/box-components/dot.gif) 0 0 repeat-y; height: 100%; width: 100%;}
.r {background: url(/images/box-components/dot.gif) 100% 0 repeat-y; height: 100%; width: 100%;}
.bl {background: url(/images/box-components/bl.gif) 0 100% no-repeat; height: 100%; width: 100%;}
.br {background: url(/images/box-components/br.gif) 100% 100% no-repeat; height: 100%; width: 100%;}
.tl {background: url(/images/box-components/tl.gif) 0 0 no-repeat; height: 100%; width: 100%;}
.tr {background: url(/images/box-components/tr.gif) 100% 0 no-repeat; height: 100%; width: 100%;}

.obl {background: url(/images/box-components/obl.gif) 0 100% no-repeat; height: 100%; width: 100%;}
.obr {background: url(/images/box-components/obr.gif) 100% 100% no-repeat; height: 100%; width: 100%;}
.otl {background: url(/images/box-components/otl.gif) 0 0 no-repeat; height: 100%; width: 100%;}
.otr {background: url(/images/box-components/otr.gif) 100% 0 no-repeat; height: 100%; width: 100%;}

.gbl {background: url(/images/box-components/gbl.gif) 0 100% no-repeat; height: 100%; width: 100%;}
.gbr {background: url(/images/box-components/gbr.gif) 100% 100% no-repeat; height: 100%; width: 100%;}
.gtl {background: url(/images/box-components/gtl.gif) 0 0 no-repeat; height: 100%; width: 100%;}
.gtr {background: url(/images/box-components/gtr.gif) 100% 0 no-repeat; height: 100%; width: 100%;}

.lgbl {background: url(/images/box-components/lgbl.gif) 0 100% no-repeat; height: 100%; width: 100%;}
.lgbr {background: url(/images/box-components/lgbr.gif) 100% 100% no-repeat; height: 100%; width: 100%;}
.lgtl {background: url(/images/box-components/lgtl.gif) 0 0 no-repeat; height: 100%; width: 100%;}
.lgtr {background: url(/images/box-components/lgtr.gif) 100% 0 no-repeat; height: 100%; width: 100%;}

/* Homepage styles */

#flash{
margin: 20px 0 0 0;
}
#heroslot {
padding: 0 10px 0 10px;
}
#heroslot img {padding: 10px 10px;}
/* New work box style */

#newwork{
	width:140px;
	height:150px;
	background-color: #F7931E;
	margin-top:20px;
}

#newworkflash {
	position:relative;
	font-size:0.75em;
	padding:5px;
}

/* Homepage slideshow styles */

#slideshow.js{
	width: 275px;
	padding:5px;
	background:#fff;
	margin:0 0 10px 0;
	color:#000;
}
.slidenav{
	width: 275px;
	padding:5px;
	margin:1em 0 0 0;
	text-align:center;
	font-weight:bold;
	font-size:90%;
}
.slidenav a{
	text-decoration:none;
	color:#000;
}
.slidenav span{
	padding:0 1em;
	color:#000;
}
#slideshow.js img{
	display:block;
	margin:0 auto;
}
#slideshow.js li{
	display:none;
	padding:0;
}
#slideshow.js li.current{
	display:block;
}

#slides
{
margin: 50px 0 0 0;
}

/* New work styles */

#workbox
{
position:relative;
width: 490px;
background-color: #757575;
}
.img-holder {
float: left;
width: 300px;
height: 300px;
margin: 10px 10px;
}
.skipnav {
display: block;
width: 0;
height: 0;
overflow: hidden;
}

/* Thumbs */

#thumbs {
float:left;
width:;
}
#thumbs li {
float: left;
display: inline;
margin:10px 5px 0 0;
}

#thumbs li a {
width: 100px;
height: 100px;
text-indent: -9999px;
display: block;
}

/* Web Design */
#thumbs li.name a {
	background-image: url(../illustration/thumbs/graphics1.jpg);
}
#thumbs li.name a {
	background-image: url(../illustration/thumbs/graphics1.jpg);
}

/* Greeting Cards Portfolio Section Styles */

#portfolio_right_col { position: relative; width:300px; padding-right:5px; }

#portfolio_right_col img { float:left; width:80px; margin:2px 2px; }

#portfolio_right_col ul { list-style:none; }

#portfolio_left_col { width:435px; margin-left:10px; }

/* Illustration */

#thumbs li.illustration1 a {background-image: url(http://www.paulfeatherstone.co.uk/illustration/thumbs/graphics1.jpg);}
#thumbs li.illustration2 a {background-image: url(http://www.paulfeatherstone.co.uk/illustration/thumbs/graphics1.jpg);}
#thumbs li.illustration3 a {background-image: url(http://www.paulfeatherstone.co.uk/illustration/thumbs/graphics1.jpg);}
#thumbs li.illustration4 a {background-image: url(http://www.paulfeatherstone.co.uk/illustration/thumbs/graphics1.jpg);}
#worknav{
display: inline;
margin: 0 8px 8px 0;
}
#worknav li {
	float: left;
	display: inline;
	text-indent: -9999px;
	margin: 0 4px 4px 0;
}
#worknav li.previous, #nav li.next, #nav li.previous-dead, #nav li.next-dead {
	margin: 0 36px 4px 32px;
}
#worknav li.previous-dead, #nav li.next-dead {
	width: 28px;
	height: 28px;
	background-position: 0 -56px;
}
#worknav li a:hover {
	background-position: 0 -28px;
}
#worknav li a {
	display: block;
	width: 28px;
	height: 28px;
}
#worknav li.previous-dead a {
	background-image: url(../images/play_button_left_rw_dead.gif);
}
#worknav li.previous a {
	background-image: url(../images/play_button_left_rw.gif);
}
#worknav li.back a {
	background-image: url(../images/play_button_left.gif);
}
#worknav li.home a {
	background-image: url(../images/play_button_home.gif);
}
#worknav li.enlarge a {
	background-image: url(../images/play_button_right.gif);
}
#worknav li.next a {
	background-image: url(../images/play_button_right_ff.gif);
}

/*Illustration portfolio styles*/

#container2
{
position:relative; 
width: 370px;
height:300px; 
margin: 40px 0 10px 25px; 
background-color: #757575;
}
.title2 /*Used in Illustration & Web design portfolio sections*/
{
	font-family:Arial, Helvetica, sans-serif;
	font-size:18;
	color: #808080;
	border-bottom:2px solid #E6E6E6;
}

#jgal{float:left; width: 371px; height: 300px;}
#jgal li { list-style-type: none; opacity: .5; width: 60px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 2px solid #9C8C8C; margin-top: 4px; margin-left:255px;}
#jgal li img { list-style-type: none; position:absolute; top:0px; left:0px; margin-left:10px; margin-top:10px; padding-left:0px; border: 2px solid #9C8C8C;}
#jgal li.active img { display: block; }
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }

/* styling without javascript */

#gallery { list-style: none; display: block; padding-left: 0; margin-left: 0;}
#gallery li { float: left; margin: 0px 10px 10px 0px; }

/* Carousel styles */

#greybox
{
position:relative;
float:left;
width: 680px;
height: 176px;
background-color: #757575;
margin: 0px 10px 0px 10px;
}
#mygallery
{
position:absolute;
}
.stepcarousel{
position:relative;
background-color: #9C8C8C;
overflow: scroll;
width: 647px;
height: 120px;
margin: 5px 15px 20px 15px;

}

.stepcarousel .belt{
position:absolute;
top: 0px;
left: 0px;
width: 480px;
}

.stepcarousel .panel{
float: left;
overflow: hidden;
margin: 10px;
width: 105px;
}
.stepcarousel .panel img
{
border-color:#CCCCCC;
border-width:1px;
}
#remote{
float:right;
width:160px;
margin: 127px 10px 0 0;
}
#remote a 
{
margin-left: 2px;
border: 0px;
}
a:link img, a:visited img {
border: 0px;
}
#remotetext
{
	position:absolute;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12;
	left: 355px;
	top: 143px;
	width: 144px;

}

/* Twitter feed styles */

#twitter_div {padding: 10px 10px;}

#twitter_update_list {overflow:hidden; font-size:.8em;}	
#twitter-link { font-weight:bold; margin-top:10px; }

#twitter_box { }
#twitter_box a.roll1 { background:url('images/twitter_box.png') no-repeat top left; display:block; height:70px; width:170px; }

#linkedin_box { }
#linkedin_box a.roll2 { background:url('images/linkedin_box.png') no-repeat top left; display:block; height:70px; width:170px; }

a.rollover1 span {
    display:none;
}

/*Fonts*/

H1 {font-size:1.25em; padding:10px;color: #808080; margin: 10px 10px;}  /* displayed at ?px - for Mozilla browser*/
H2 {font-size:1em;color: #808080;margin: 10px 10px;}  /* displayed at ?px - for Mozilla browser*/
H3 {font-size:.9em;color: #808080;margin: 10px 10px;}  /* displayed at ?px - for Mozilla browser*/
H4 {font-size:.8em;color: #808080;margin: 10px 10px;}  /* displayed at ?px - for Mozilla browser*/

INPUT, SELECT, TH, TD {font-size:.75em} /* - for IE browser*/

/* web design thumb gallery */

#container1 /* used in web design thumb gallery */
{
position:relative; 
width: 340px;
height:400px; 
margin: 30px 0 0 0; 
background-color: #757575;
}

#copybox /* in illustration portfolio section */
{position:absolute;width: 280px;height: 71px;font-family:Arial, Helvetica, sans-serif;font-size:11px;background:#9C8C8C;margin-left: 10px;left: 0px;top: 210px;}
.copyboxtext
{padding:5px;color: #FFFFFF;}

#copybox2 /* in web design portfolio section */
{
	float:left;
	clear:both;
	height:100px;
	width: 330px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:0.75em;
	background:#9C8C8C;
	margin: 10px 5px 10px 5px;
	
}
.copybox2text
{
color: #FFFFFF;
padding:5px;
}

#rollthumb
{
float:left;
width:65px;
display: inline;
margin-left:5px;
margin-top:5px;
}
#rollthumb ul li a
{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFFFFF;
}

#loadarea1, #loadarea2, #loadarea3, #loadarea4, #loadarea5, #loadarea6, #loadarea7, #loadarea8
{
float:left;
height:192px;
width:256px;
margin: 10px 5px 10px 5px;
border: 2px solid #9C8C8C;
}
.mainthumb
{
list-style:none; 
display:inline; 
margin-left:0px;
padding:0px;
}
.mainthumb li
{
list-style:none; 
display:inline; 
margin-top:10px;
padding:0px;
}
.mainthumb li a
{
border: 1px solid #9C8C8C;
}
a:link img, a:visited img
{
border: 1px solid #9C8C8C;
}

/*Web design news styles*/

.headline
{
width:600px;
margin: 10px 10px 10px 10px;
}
.headline a p h3
{
margin: 10px 10px;
}
.headline img
{
float:left;
margin: 10px 10px;
}
.clearfloat {
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
#footernav {
	height:16px;
	margin: 50px 0 0 0;
	padding: 0;
  }
#footernav ul {
	list-style: none;/*goodbye bullets*/
	margin: 0;
	padding: 0;
} 
#footernav li {
	float:left;
	margin: 0 5px 0 0;
	padding: 0;
	display:inline;/*displays horizontal*/
} 
#footernav li a {
	margin: 0;
	padding:0;
	font-family:Tahoma, Verdana, sans-serif;
	font-size:.95em;
	letter-spacing:.6px;
	text-decoration:none;
	color:#333333;
} 
#footernav li a:hover {
	color:#000000;
} 
/* sliding doors technique used to avoid flicker as browser loads roll-over image*/

#footernav img {padding: 0 0 8px 0;}
.text-small { font-size: .9em;}

.centre {auto-margin:0; text-align:center;}
.float_left {float:left; width:50%;}
.float_right {float:right; width:50%;}
.text {padding: 10px 10px;}
.marginleft {margin-left:20px;}