@charset "UTF-8";

/* CSS Document */

/* CSS Reset 

* { outline: 0; }

html, body { min-height: 100%;  }

body, ul, ol, dl { margin: 0; }

img { border: 0; }

article, aside, audio, footer, header, nav, section, video { display: block }

img.right { float: right; margin-left: 2em; clear: right; }

img.left { float: left; margin-right: 2em; clear: left; }

table { border-collapse: collapse; }

th { background: #000; color: #fff; }

td { padding: 1em; border: 1px solid black; }

*/
html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed,  
figure, figcaption, footer, header, hgroup,  
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure,  
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 

table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 



#wrapper
{
    width:960px; /*960 is common "Grid System */
	padding:0px 0px;
	margin-left:auto; /* Centers the Wrapper in the page */
	margin-right:auto; /* Centers the Wrapper in the page */
    margin-top:55px; /* Moves the Wrapper down the page */
	margin-bottom:20px;
	border:groove;  /* Styles of the black Boarder */  
    background-repeat:no-repeat;
/*	background-color: #FFF; /* Colour of the Background Grey */
	border: 1px ridge #000;
	
}


#accesability
{
margin-top:10px;
}
#branding
{

		background: url(http://www.jamesfarrington.co.uk/applied-art/profile/img/pinboard-top.jpg) no-repeat;
		height:47px;

	
}

#contentwrapper
{
	
	clear:both;
	padding:0px 0px;

}

#content
{
	
	width:960px;
	float:left;

background: url(http://www.jamesfarrington.co.uk/applied-art/profile/img/board.jpg) repeat;
}


#footer
{
	text-align:center;
	font-size:11px;
	
}


#shop
{
	background: url(http://www.jamesfarrington.co.uk/applied-art/profile/img/shop.png) no-repeat;
	
	width:200px;
	display:inline-block;
}

#polaroid
{
	background: url(http://www.jamesfarrington.co.uk/applied-art/profile/img/polaroid.png) no-repeat;
	
	width:200px;
	display:inline-block;
	
}

#head

{
	
	width:600px;
	margin-left:170px;
	
	
}

 p.logo
{

	background: url(http://www.jamesfarrington.co.uk/applied-art/profile/img/head.png) no-repeat;
	height:140px;
	width:600px;
	margin-left:190px;
	padding:40px 0px 0px 60px;
	font-family: Dakota, Casual, Times New Roman, serif;
	font-size:44px;
	color:#000000;
	
}


#footer
{
	
	background: url(http://www.jamesfarrington.co.uk/applied-art/profile/img/pinboard-bottom.jpg) no no-repeat;
}

/*
h2,p{
  font-size:100%;
  font-weight:normal;
  padding:5px 5px;
} */
ul,li{
  list-style:none;
 
}
ul{
  overflow:hidden;
  padding:5px;
}
ul li a{
  text-decoration:none;
  color:#000;
  background:#ffc ;
  display:block;
 /* height:10em; */
  width:230px;
  padding:5px 5px;
  /* Firefox */
  -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
  /* Safari+Chrome */
  -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  /* Opera */
  box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  -webkit-transform:rotate(-6deg);  
  -o-transform:rotate(-6deg);  
  -moz-transform:rotate(-6deg);
}
ul li{
  margin:5px;
  float:left;
  padding-top:10px;
  
}
/* change the colour of the even numbered li's */
ul li:nth-child(even) a{
  -o-transform:rotate(4deg);
  -webkit-transform:rotate(4deg);
  -moz-transform:rotate(4deg);
  position:relative;
  top:5px;
  background-color:#F90;
  }
ul li:nth-child(3n) a{
  -o-transform:rotate(-3deg);
  -webkit-transform:rotate(-3deg);
  -moz-transform:rotate(-3deg);
  position:relative;
  top:-5px;
  background-color:#F90;
}
ul li:nth-child(5n) a{
  -o-transform:rotate(5deg);
  -webkit-transform:rotate(5deg);
  -moz-transform:rotate(5deg);
  position:relative;
  top:-10px;
  background-color:#FFFF66;
}
ul .pin
{
	position:absolute;
	top:0px;
	margin-top:-27px;
	left:170px;
	z-index:1000;
	height:auto;
	padding-top:20px;
}
ul .pin:nth-child(even) a
{
	    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

h1
{
	font-size:16px;
	padding:10px 10px 10px 10px;
}
 li p
{
	font-size:12px;
	font-style:oblique;

	font-family: Dakota, Casual, Times New Roman, serif;
}

h2
{
	font-size:16px;
	font-style:oblique;
	text-align:center;
	font-family: Dakota, Casual, Times New Roman, serif;
}

h3
{
	font-size:14px;
	font-style:italic;
	font-weight:bold;
	text-align:center
}

h4
{
	float:right;
}

h5
{
	font-size:11px;
}

h6
{
	float:right;
	font-size:11px;
}
#postit ul
{
	text-decoration:none;
	display:inline;
}

/* Accessability Access Key */

.skip 
{ 
	position:absolute; 
	top:0; 
	left:-9999px; 
}

.skip:focus,.skip:active 
{
	 position:absolute;
	 top:7px; 
	 left:26px; 
	 background:#585F69; 
	 color:#000; 
}
/* Accessability Access Key END */


/* Add Font from web extention */
@font-face
{
font-family: Dakota;
src: url('http://jamesfarrington.co.uk/applied-art/profile/font/Dakota.ttf');




   font-family: Casual;
    src: url('casual.eot');
    src: url('casual.eot?#iefix') format('embedded-opentype'),
         url('casual.woff') format('woff'),
         url('casual.ttf') format('truetype'),
         url('casual.svg#casual_perfectionistregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
/* Add Font from web extention END*/


/**
 * Grid
 */
#grid{

    /* Dimensions - same width as your grid with gutters */
    width: 980px;

    /* Grid (left-aligned)
    position: absolute;
    top: 0;
    left: 0;
    */

    /* Grid (centered) */
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -490px;

}

/**
 * Vertical grid lines
 *
 * Set the column width taking the borders into consideration,
 * and use margins to set column gutters.
 */
#grid div.vert{

    width: 139px;
    border: solid darkturquoise;
    border-width: 0 1px;
    margin-right: 19px;

}

#grid div.vert.first-line{

    margin-left: 19px;

}


/**
 * Horizontal grid lines, defined by your base line height
 *
 * Remember, the CSS properties that define the box model:
 * visible height = height + borders + margins + padding
 */
#grid div.horiz{

    /* 20px line height */
    height: 19px;
    border-bottom: 1px dotted darkgray;
    margin: 0;
    padding: 0;

}

/**
* Classes for multiple grids
*
* When using more than one grid, remember to set the numberOfGrids 
* option in the hashgrid.js file.
*/
#grid.grid-1 div.vert{

    /* Vertical grid line colour for grid 1 */
    border-color: darkturquoise;

}
#grid.grid-2{

    /* Adjustments */
    padding: 0 160px;
    width: 660px;

}
#grid.grid-2 div.vert{

    /* Vertical grid line colour for grid 2 */
    border-color: crimson;

}