html {margin:0; padding:0;}
img {border:0; }
.clear {clear:both; height:0; font-size:1em; margin:0; padding:0;}

/******* FONT *******/
@font-face {
    font-family: 'delicious_proregular';
    src: url('fonts/DeliciousPro-webfont.eot');
    src: url('fonts/DeliciousPro-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/DeliciousPro-webfont.woff') format('woff'),
         url('fonts/DeliciousPro-webfont.ttf') format('truetype'),
         url('fonts/DeliciousPro-webfont.svg#delicious_proregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

h1 {
	font-family: 'delicious_proregular', 'Times New Roman', serif;
	font-weight: normal!important;
	color: #472A2B

}



/******* GENERAL *******/


body {
	background-color: #E6E6E6;
    border: 2px solid #D3D3D3;
    width: 1024px;
    margin: 0 auto;
} 

p {
	font-size: 1.1em;
	font-family: 'Sorts Mill Goudy', 'Times New Roman', serif;
	line-height: 1.5em;
	padding:0; margin:0; 	
}

.italicname {
	font-size: 1em;
	letter-spacing: .1em;
	font-family: 'Sorts Mill Goudy', 'Times New Roman', serif; font-style: italic;
	color: #000000
}
	
.coursetitle {
	font-size: 1em;
	font-family: 'Sorts Mill Goudy', 'Times New Roman', serif; font-weight: bold;
	color: #000000
} 

.wrapper {
	width: 1024px;
	height: auto;
	margin: 0 auto;
	background-color: #FFFFFF;
}


/******* HEADER *******/

.wrapper .header {
	padding: 0px;
	position: relative;
}

.wrapper .header .topnavigation {
	position: absolute;
	width: 700px;
	float:left;
	margin: 0;
	padding:0px 0px 0px 0px;
	top: -10px;
	left: 35px;
}

.wrapper .header .inkberrylogo {
	position: absolute;
	width: 529px;
	float:left;
	margin: 0;
	padding:0px 0px 0px 0px;
	top: 40px;
	left: 0px;
}

.wrapper .header .illustrationgallery {
	position: absolute;
	width: 327px;
	float:left;
	margin: 0;
	padding:0px 0px 0px 0px;
	top: 170px;
	left: 5px;
}

.wrapper .header .graphicdesigngallery {
	position: absolute;
	width: 327px;
	float:left;
	margin: 0;
	padding:0px 0px 0px 0px;
	top: 170px;
	left: 5px;
}

.wrapper .header .photographygallery {
	position: absolute;
	width: 327px;
	float:left;
	margin: 0 auto;
	padding:0px 0px 0px 0px;
	top: 170px;
	left: 5px;
}

.wrapper .header .sketchbookgallery {
	position: absolute;
	width: 327px;
	float:left;
	margin: 0;
	padding:0px 0px 0px 0px;
	top: 170px;
	left: 5px;
}

.wrapper .header .icon {
	position: absolute;
	width: 39px;
	float:left;
	margin: 0;
	padding: 0px 0px 0px 0px;
	top: 10px;
	left: 20px;
}


/******* HEADER / SOCIAL MEDIA *******/

.wrapper .header .socialmedia {
	padding: 0px;
	position: absolute;
	float:left;
	width: 300px;
	top: 10px;
	left: 725px;
}
	
.wrapper .header .socialmedia .facebook {
	position: absolute;
	width: 39px;
	float:left;
	margin: 0px;
	padding: 0px 0px 0px 0px;
}

.wrapper .header .socialmedia .twitter {
	position: absolute;
	width: 39px;
	float:left;
	left: 44px;
	margin: 0px;
	padding: 0px 0px 0px 0px;
}

.wrapper .header .socialmedia .wordpress {
	position: absolute;
	width: 39px;
	float:left;
	left: 88px;
	margin: 0px;
	padding: 0px 0px 0px 0px;
}

.wrapper .header .socialmedia .linkedin {
	position: absolute;
	width: 39px;
	float:left;
	left: 132px;
	margin: 0px;
	padding: 0px 0px 0px 0px;
}

.wrapper .header .socialmedia .email {
	position: absolute;
	width: 39px;
	float:left;
	left: 171px;
	margin: 0px;
	padding: 0px 0px 0px 0px;
}



/******* HEADER / TOP NAVIGATION *******/

.wrapper .header .topnavigation .nav li {
	display: inline;
  	padding: 0 1em 0 0;
  	font-family: 'Maven Pro', 'Arial', sans-serif;
 	font-size: .9em;
}

.wrapper .header .topnavigation .nav li a:link {
	color: #c8df8e;
	text-decoration: none;
}

.wrapper .header .topnavigation .nav li a:visited {
	color: #ffffff;
	text-decoration: none;
}

.wrapper .header .topnavigation .nav li a:hover {
	color: orange;
}

.wrapper .header .topnavigation .nav li a:active {
	color: #ffffff;
}



/******* ILLUSTRATION BODYCOPY - left column*******/



.leftcolumn {
	position: relative;	
	width: 240px;
	height: 700px;
	float:left;
	padding: 25px 0px 0px 0px;
	margin: 0px;
}

.wrapper .leftcolumn .thumbnails li {
	position: absolute;
	float:left;
	list-style-type: none;
	display: inline;
	margin: 0px;
	padding: 0px 0px 0px 0px;
}
	
.wrapper .leftcolumn .thumbnails li img {
	border: 0px solid black;
}
	
.wrapper .leftcolumn .thumbnails li a:link {
	color: #c8df8e;
	text-decoration: none;
}

.wrapper .leftcolumn .autumnleaf {
	float:left;
	position: absolute;
	padding: 0px 0px 0px 0px;
	left: 0px;
}

.wrapper .leftcolumn .clematis {
	float:left;
	position: absolute;
	padding: 0px 0px 0px 0px;
	left: 65px;
}

.wrapper .leftcolumn .clematissketch {
	float:left;
	position: absolute;
	padding: 0px 0px 0px 0px;
	left: 130px;
}

.wrapper .leftcolumn .daylily {
	float:left;
	position: absolute;
	padding: 0px 0px 0px 0px;
	left: 0px;
	top: 65px;
}

.wrapper .leftcolumn .fiveroses {
	float:left;
	position: absolute;
	padding: 0px 0px 0px 0px;
	left: 0px;
	top: 390px;
}

.wrapper .leftcolumn .fourroses {
	float:left;
	position: absolute;
	padding: 0px 0px 0px 0px;
	left: 130px;
	top: 65px;
}

.wrapper .leftcolumn .iris {
	float:left;
	position: absolute;
	padding: 0px 0px 0px 0px;
	left: 0px;
	top: 130px;
}

.wrapper .leftcolumn .leucadendron {
	float:left;
	position: absolute;
	padding: 0px 0px 0px 0px;
	left: 65px;
	top: 130px;
}

.wrapper .leftcolumn .marbacka {
	float:left;
	position: absolute;
	padding: 0px 0px 0px 0px;
	left: 130px;
	top: 130px;
}

.wrapper .leftcolumn .momentintime {
	float:left;
	position: absolute;
	padding: 0px 0px 0px 0px;
	left: 0px;
	top: 195px;
}

.wrapper .leftcolumn .oyster {
	float:left;
	position: absolute;
	padding: 0px 0px 0px 0px;
	left: 65px;
	top: 195px;
}

.wrapper .leftcolumn .pelargonium {
	float:left;
	position: absolute;
	padding: 0px 0px 0px 0px;
	left: 130px;
	top: 195px;
}

.wrapper .leftcolumn .pinkrose {
	float:left;
	position: absolute;
	padding: 0px 0px 0px 0px;
	left: 0px;
	top: 260px;
}

.wrapper .leftcolumn .quercus {
	float:left;
	position: absolute;
	padding: 0px 0px 0px 0px;
	left: 65px;
	top: 260px;
}

.wrapper .leftcolumn .rantasauna {
	float:left;
	position: absolute;
	padding: 0px 0px 0px 0px;
	left: 130px;
	top: 260px;
}

.wrapper .leftcolumn .rootsystem {
	float:left;
	position: absolute;
	padding: 0px 0px 0px 0px;
	left: 0px;
	top: 325px;
}

.wrapper .leftcolumn .seedpod {
	float:left;
	position: absolute;
	padding: 0px 0px 0px 0px;
	left: 65px;
	top: 325px;
}

.wrapper .leftcolumn .sunflower {
	float:left;
	position: absolute;
	padding: 0px 0px 0px 0px;
	left: 130px;
	top: 325px;
}

.wrapper .leftcolumn .suopursu {
	float:left;
	position: absolute;
	padding: 0px 0px 0px 0px;
	left: 65px;
	top: 65px;
}

.wrapper .leftcolumn .wisteria {
	float:left;
	position: absolute;
	padding: 0px 0px 0px 0px;
	left: 65px;
	top: 390px;
}

.wrapper .leftcolumn .kingfisher {
	float:left;
	position: absolute;
	padding: 0px 0px 0px 0px;
	left: 130px;
	top: 390px;
}

.wrapper .leftcolumn .bluetit {
	float:left;
	position: absolute;
	padding: 0px 0px 0px 0px;
	left: 0px;
	top: 455px;
}


/******* HOME/BIO PAGE - left column*******/

.wrapper .leftquotecolumn {
	position: relative;
	float:left;
	width: 240px;
	height: 550px;
	margin: 0px;
	padding: 200px 0px 0px 25px;
}
	
.wrapper .leftquotecolumn p > em  {
	color: orange;
	font-size: 1.4em;
	line-height: 1.2em;
}
	
	

/******* HOME/BIO PAGE  - center column *******/


.wrapper .biointro {
	width: 450px;
	margin: 0px;
	float:left;
	padding: 40px 10px 40px 10px;
}

.wrapper .biointro h1 {
	font-size: 2em;
	font-family: 'delicious_proregular', 'Times New Roman', serif;
	line-height: 2em;
	font-weight: normal;	
}

.wrapper .biointro p {
	width: 450px;
	margin: 0px;
	float:left;
	text-indent: 2em;
	padding: 0px 0px 10px 0px;
}

.wrapper .biointro .designstamp {
	width:450px;
	text-align:center;
	margin-top:20px;
}



/******* ILLUSTRATION/GRAPHIC DESIGN/PHOTOGRAPHY/SKETCHBOOK BODYCOPY - centre column *******/

.wrapper .gallerycontainer {
	position: relative;
	width: 450px;
	height: 700px;
	margin: 0px;
	float:left;
	padding: 40px 20px 0px 10px;
}

.wrapper .galleryframe {
	position: absolute;
	width: 450px;
	margin: 0px;
	float:left;
	padding: 0px 0px 0px 0px;
}

.wrapper .leftcolumn .thumbnails img {
 	opacity:0.4;
	filter:alpha(opacity=40); /* For IE8 and earlier */
}
 
.wrapper .leftcolumn .thumbnails img:hover {
	opacity:1.0;
	filter:alpha(opacity=100); /* For IE8 and earlier */
}



/******* BODYCOPY - right column *******/

.rightcolumn {
	position: relative;
	width: 240px;
	height: 712px;
	float: left;
	padding: 40px 0px 20px 10px;
}

.rightcolumn .intro {
	position: absolute;
	width: 240px;
	float:left;
}

.rightcolumn .intro p {
	text-indent: 0em;
	font-size: 1.1em;
	line-height: 1.5em;
	color: #122f50;
	margin:0px 0px 10px 0px;
	padding: 0px 0px 20px 0px;
}

.rightcolumn .contactme {
	position: absolute;
	width: 240px;
	float:left;
	top: 430px;
	padding: 60px 0px 0px 0px;
}

.rightcolumn .contactme p {
	text-indent: 0em;
	font-size: 1em;
	line-height: 1.2em;
	color: #122f50;
	margin:0px 0px 10px 0px;
	padding: 10px 0px 0px 0px;
}

.rightcolumn a:link {
 	color: #122f50;
}

.rightcolumn a:hover {
	color: orange;
}

.rightcolumn .brooklynartlibrary {
	padding:0;
	width:160px;
	text-align:center;
	margin:20px 0 0 0;
}

.rightcolumn .sketchbookproject {
	padding:0;
	width:160px;
	text-align:center;
	margin:20px 0 20px 0;
}

/******* HOME PAGE - right column *******/

.rightcolumn .rightcolumnimage {
	position: absolute;
	width: 240px;
	float:left;
	padding: 35px 0px 0px 0px;
}


/******* SUBNAV *******/

.subnav {
	margin: 0;
	padding-left: 120px;
    padding-bottom: 0px;
}

.subnav li {
	display: inline;
  	padding: 0 1em 0 0;
  	font-family: 'Maven Pro', 'Arial', sans-serif;
 	font-size: .9em;
 	color: #122f50;
}

.subnav li a:link {
	padding: 0.8em;
	color: #c8df8e;
	text-decoration: none;
}

.subnav li a:visited {
	color: #ffffff;
	text-decoration: none;
}

.subnav li a:hover {
	color: orange;
}

.subnav li a:active {
	color: #ffffff;
}

.wrapper .footer .subnavigation {
	position: absolute;
	width: 1024px;
	float:left;
	margin: 0;
	padding:0px 0px 0px 0px;
	top: 35px;
	left: -30px;
}



/******* FOOTER *******/

.footer {
	width:1024px;
	padding:25px 25px 20px 0px;
	position:relative;
	height:80px;
	margin-top:10px;
}

.footer .copyright {
	position: absolute;
	right: 90px;
	top: 6px;
}

.footer .copyright p {
  	font-family: 'Maven Pro', 'Arial', sans-serif;
  	font-size: .7em;
}