@charset "utf-8";
/* CSS Document */
/*
Design: http://portman2.com
Author: Kate + Clive
Site: http://lizhollismedia.co.uk
Last updated: 26th April 2009 - 8pm
Last updated by: Kate
*/

/* RESETS */
body { margin: 0; text-align: center; background: #181818;}
h1, h2, h3, p, ol, ul {margin: 0; clear: both; text-align: left;}
ol, ul {list-style-type: none;}
img {border: none;}
a {text-decoration: none; outline: none;}


/* COMMON ELEMENTS */
p, li {font: 12px Arial, Helvetica, sans-serif; color: #333333; line-height: 18px;}
p a:link, p a:visited {color: #333333; text-decoration: none;}
p a:hover {color: #006666; text-decoration: none;}

/* COMMON CLASSES */
.hide {position: absolute; left: -9999px;} /* invisible but still presented by screen readers */
.noshow {display: none;} /* invisible, even to screen readers */

/* PAGE STRUCTURE */
#page {width: 810px; margin: 0 auto; padding: 0 0 25px 0; background-color: #ffffff; border: none;}

#header {width: 740px; height: 360px; margin: 0 35px; position: relative; background: url(../images/band.gif) 0 135px repeat-x;}
#header h1 {position: absolute; left: 0; top: 35px; background: url(../images/logo.gif) no-repeat; text-indent: -9999px;}
#header h1 a {display: block; width: 310px; height: 76px; }

#contactdetails {position: absolute; right: 0px; top: 35px;}
#contactdetails ol {list-style-type: none; padding: 0; margin: 0; font: 10px Arial, sans-serif;}
#contactdetails ol li {float: left; padding: 0; margin: 0; color: #666666;}
#contactdetails ol li.tel {border-right: 1px solid #666666; padding-right: 10px; margin-right: 10px;}
#contactdetails ol li a {color: #666666;}
#contactdetails ol li a:hover {color: #006666;}
#contactdetails ol li.email {}

/* NAVBAR */
#nav {width: 410px; height: 35px; background-color: #D2CDC8; position: absolute; right: 23px; bottom: 2px;}
#nav ol {list-style-type: none; padding: 0; margin: 0;}
#nav ol li {float: left; padding: 0; margin: 0; text-align: center; font: 14px strong Arial, Helvetica, sans-serif; color: #333; }
#nav ol li a {height: 35px; display: block; text-indent: -9999px; background-color: #D2CDC8;}

/* LINK BG IMAGES */
#nav ol li a#about:link, #nav ol li a#about:visited {width: 66px; background: url(../images/about.gif) no-repeat;}
#nav ol li a#services:link, #nav ol li a#services:visited {width: 79px; background: url(../images/services.gif) no-repeat;}
#nav ol li a#workshops:link, #nav ol li a#workshops:visited {width: 97px; background: url(../images/workshops.gif) no-repeat;}
#nav ol li a#portfolio:link, #nav ol li a#portfolio:visited {width: 83px; background: url(../images/portfolio.gif) no-repeat;}
#nav ol li a#resources:link, #nav ol li a#resources:visited {width: 85px; background: url(../images/resources.gif) no-repeat;}

/* LINK BG ROLLOVERS */
#nav ol li a#about:hover {background: url(../images/about_roll.gif) no-repeat;}
#nav ol li a#services:hover {background: url(../images/services_roll.gif) no-repeat;}
#nav ol li a#workshops:hover {background: url(../images/workshops_roll.gif) no-repeat;}
#nav ol li a#portfolio:hover {background: url(../images/portfolio_roll.gif) no-repeat;}
#nav ol li a#resources:hover {background: url(../images/resources_roll.gif) no-repeat;}

/* LINK BG ACTIVE IMAGES */
#nav ol li a#about.active {background: url(../images/about_roll.gif) no-repeat;}
#nav ol li a#services.active {background: url(../images/services_roll.gif) no-repeat;}
#nav ol li a#workshops.active {background: url(../images/workshops_roll.gif) no-repeat;}
#nav ol li a#portfolio.active {background: url(../images/portfolio_roll.gif) no-repeat;}
#nav ol li a#resources.active {background: url(../images/resources_roll.gif) no-repeat;}

#subheaderL_home {width: 250px; height: 285px; position: absolute; left: 20px; top: 160px;}
#subheaderL_about {width: 250px; height: 180px; position: absolute; left: 20px; top: 160px;}
#subheaderL_services {width: 250px; height: 180px; position: absolute; left: 20px; top: 160px;}
#subheaderL_workshops {width: 250px; height: 180px; position: absolute; left: 20px; top: 160px;}
#subheaderL_portfolio {width: 250px; height: 180px; position: absolute; left: 20px; top: 160px;}
#subheaderL_resources {width: 250px; height: 180px; position: absolute; left: 20px; top: 160px;}

#subheaderR {width: 420px; height: 160px; position: absolute; right: 20px; top: 165px;}
#subheaderR h2 {width: 420px; height: 45px;  background: url(../images/header_1.gif) no-repeat; text-indent: -9999px;}
#subheaderR p {margin-top: 15px; padding-left: 10px; padding-right: 10px; color:#ffffff;}


#content_home, #content_about, #content_services, #content_workshops, #content_portfolio, #content_resources    {width: 740px; margin: 0 35px 0 35px; padding: 10px 0 20px 0;  background-color: #ffffff;}
#signature_home {width: 120px; height: 40px; float: right;}


#left {width: 270px; float: left; background-color: #ffffff;}
#right {width: 440px; float: right; background-color:#ffffff; padding-top: 25px;}
.clearboth {clear: both;}
#right p {margin-bottom: 10px; padding-left: 10px;}
#right ul {list-style-type: disc;}
#right li {margin: 0 10px 12px 0;}

#postit_home {width: 270px; height: 250px; margin: 110px 0px 0 0; float: left; background:url(../images/post_it.png) no-repeat; clear: both; }
#postit_other{width: 270px; min-height: 260px; margin: 20px 0px 0 0; float: left; background:url(../images/post_it.png) no-repeat; clear: both; }

#postit_home p {font-size: 12px; padding: 0 25px 5px;}
#postit_other p {font-size: 12px; padding: 0 25px;}


/* HEADER PICS */
#subheaderL_home {width: 250px; height: 285px;}
#subheaderL_about {width: 250px; height: 180px; background: url(../images/pic2.jpg) no-repeat;}
#subheaderL_services {width: 250px; height: 180px; background: url(../images/pic3.jpg) no-repeat;}
#subheaderL_workshops {width: 250px; height: 180px; background: url(../images/pic4.jpg) no-repeat;}
#subheaderL_portfolio {width: 250px; height: 180px; background: url(../images/pic5.jpg) no-repeat;}

/* POST IT */
#postit_home h3 {width: 152px; height: 17px; margin: 35px 0 15px 25px; float: left; background: url(../images/services_h3.png) no-repeat; text-indent: -9999px;}
#postit_home h4 {width: 121px; height: 17px; margin: 20px 0 5px 25px; float: left; background: url(../images/home_h4.png) no-repeat; text-indent: -9999px;}
#postit_home h4 a {display: block; width: 121px; height: 17px;}
#postit_home h5 {width: 190px; height: 17px; margin: 20px 0 5px 25px; float: left; background: url(../images/home_h5.png) no-repeat; text-indent: -9999px;}
#postit_home h5 a {display: block; width: 190px; height: 17px;}

#content_about #postit_other h3 {width: 90px; height: 17px; margin: 35px 0 15px 25px; float: left; background: url(../images/about_h3.png) no-repeat; text-indent: -9999px;}
#content_services #postit_other h3 {width: 135px; height: 17px; margin: 35px 0 15px 25px; float: left; background: url(../images/services_h3.png) no-repeat; text-indent: -9999px;}
#content_workshops #postit_other h3 {width: 179px; height: 17px; margin: 35px 0 15px 25px; float: left; background: url(../images/workshops_h3.png) no-repeat; text-indent: -9999px;}
#content_portfolio #postit_other h3 {width: 121px; height: 17px; margin: 35px 0 15px 25px; float: left; background: url(../images/portfolio_h3.png) no-repeat; text-indent: -9999px;}
#content_resources #postit_other h3 {width: 179px; height: 17px; margin: 35px 0 15px 25px; float: left; background: url(../images/resources_h3.png) no-repeat; text-indent: -9999px;}


/* PAYPAL */
ol#paypal {padding-left: 20px;}
ol#paypal li { margin-bottom: 15px;}


/* FOOTER */
#footer {clear: both; width: 810px; margin: 0 auto; padding-top: 10px; height: 20px;}
#footer ul {padding: 0;}
#footer li {font-size: 8pt; float: left; color: #666666; line-height: 10px;}
#footer li a {color: #666666;}
#footer li.address {padding-left: 5px; padding-right: 30px; border-right: 1px solid #666666;}
#footer li.copyright {padding-left: 30px; padding-right: 30px; border-right: 1px solid #666666;}
#footer li.terms {padding-left: 30px; padding-right: 30px; border-right: 1px solid #666666;}
#footer li.p2 {padding-left: 30px; padding-right: 30px; border-right: 1px solid #666666;}
#footer li.homepage {float: right; margin-right: 5px;}