/** RESET BROWSER DEFAULTS **/
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, font, img, ins, kbd, q, s, samp, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:Arial, Verdana, Helvetica, sans-serif;vertical-align:baseline;}

#wrapper {
width:800px;
height:590px;
position:absolute;
top:50%;
left:50%;
margin:-295px 0 0 -400px;
}

#home #wrapper {
background:url(../images/home.jpg) top left no-repeat;
}

#portfolio #wrapper {
background:url(../images/portfolio.jpg) top left no-repeat;
}

#contact #wrapper {
background:url(../images/contact.jpg) top left no-repeat;
}

#blog #wrapper {
background:url(../images/blog.jpg) top left no-repeat;
}

#info #wrapper {
background:url(../images/info.jpg) top left no-repeat;
}

#stockists #wrapper {
background:url(../images/stockists.jpg) top left no-repeat;
}


/** NAV **/

#nav {
list-style:none;
margin:10px 0 0 90px;
} 

#nav li {
float:left;
}

#nav li a {
display:block;
text-indent:-9999px;
height:50px;
}

#nav li a:focus {
outline:none;
}

#navHome {
width:83px;
}

#navPortfolio {
width:141px;
}

#navInfo {
width:70px;
}

#navBlog {
width:77px;
}

#navContact {
width:115px;
}

#navStockists {
width:133px;
}

.light #navHome {
background:url(../images/lightNavHome.png) top left no-repeat;
}

.light #navPortfolio {
background:url(../images/lightNavPortfolio.png) top left no-repeat;
}

.light #navInfo {
background:url(../images/lightNavInfo.png) top left no-repeat;
}

.light #navBlog {
background:url(../images/lightNavBlog.png) top left no-repeat;
}

.light #navContact {
background:url(../images/lightNavContact.png) top left no-repeat;
}

.light #navStockists {
background:url(../images/lightNavStockists.png) top left no-repeat;
}

.light #navHome:hover {
background:url(../images/lightNavHome.png) bottom left no-repeat;
}

.light #navPortfolio:hover {
background:url(../images/lightNavPortfolio.png) bottom left no-repeat;
}

.light #navInfo:hover {
background:url(../images/lightNavInfo.png) bottom left no-repeat;
}

.light #navBlog:hover {
background:url(../images/lightNavBlog.png) bottom left no-repeat;
}

.light #navContact:hover {
background:url(../images/lightNavContact.png) bottom left no-repeat;
}

.light #navStockists:hover {
background:url(../images/lightNavStockists.png) bottom left no-repeat;
}

.dark #navHome {
background:url(../images/darkNavHome.png) top left no-repeat;
}

.dark #navPortfolio {
background:url(../images/darkNavPortfolio.png) top left no-repeat;
}

.dark #navInfo {
background:url(../images/darkNavInfo.png) top left no-repeat;
}

.dark #navBlog {
background:url(../images/darkNavBlog.png) top left no-repeat;
}

.dark #navContact {
background:url(../images/darkNavContact.png) top left no-repeat;
}

.dark #navStockists {
background:url(../images/darkNavStockists.png) top left no-repeat;
}

.dark #navHome:hover {
background:url(../images/darkNavHome.png) bottom left no-repeat;
}

.dark #navPortfolio:hover {
background:url(../images/darkNavPortfolio.png) bottom left no-repeat;
}

.dark #navInfo:hover {
background:url(../images/darkNavInfo.png) bottom left no-repeat;
}

.dark #navBlog:hover {
background:url(../images/darkNavBlog.png) bottom left no-repeat;
}

.dark #navContact:hover {
background:url(../images/darkNavContact.png) bottom left no-repeat;
}

.dark #navStockists:hover {
background:url(../images/darkNavStockists.png) bottom left no-repeat;
}

/** FOOTER **/

#footer p {
font-size:70%;
text-align:center;
position:absolute;
bottom:5px;
left:0;
width:100%;
}

/** HOMEPAGE **/

#home #bubble1 {
width:275px;
height:135px;
position:absolute;
text-align:center;
top:110px;
left:405px;
}

#home #bubble2 {
width:170px;
height:85px;
position:absolute;
text-align:center;
top:300px;
left:496px;
}

#home #bubble1 h1 {
font-weight:bold;
margin:10px 0;
}

#home #bubble1 p, #home #bubble2 p {
font-size:87%;
margin:8px 0;
}


#home #bubble1 p a, #home #bubble2 p a {
font-weight:bold;
text-decoration:none;
color:#000;
}

#home #bubble1 p strong {
font-weight:bold;
}

#stockistsList {
position:absolute;
top:185px;
left:315px;
width:240px;
list-style:none;

}

#stockistsList li a {
text-indent:-9999px;
display:block;
margin:1px 0;
height:33px;
}

#stockistsList li a:focus {
outline:none;
}

#contact #mailto {
display:block;
position:absolute;
text-indent:-9999px;
width:140px;
height:60px;
left:385px;
top:370px;
}

#contact #mailList {
display:block;
position:absolute;
text-indent:-9999px;
width:105px;
height:60px;
left:565px;
top:340px;
cursor:pointer;
}

#stockists #mailto {
display:block;
position:absolute;
text-indent:-9999px;
width:185px;
height:50px;
left:340px;
top:370px;
}

#mailto:focus {
outline:none;
}

#portfolioNav {
width:740px;
position:absolute;
bottom:55px;
left:30px;
height:99px;
}

#portfolioNavPortal {
width:600px;
margin:0 auto;
overflow:hidden;
position:relative;
height:99px;
}

#portfolioNav #portfolioNavWrapper {
width:9999px;
position:absolute;
top:0;
}

#portfolioNav #portfolioNavWrapper  ul {
list-style:none;
}

#portfolioNav #portfolioNavWrapper  ul li {
   float:left; 
}

#portfolioNav #portfolioNavWrapper  ul li a{
color:#fff;
text-decoration:none;
display:block;
border:2px solid #fff;
margin:0 1px;
height:93px;
width:94px;
overflow:hidden;

cursor:pointer;
}

#portfolioNav #portfolioNavWrapper  ul li a:hover{
border:2px solid #9da149;
}

#portfolioNav #portfolioNavWrapper  ul li a:focus{
outline:none;
}

#portfolioNavLeft {
position:absolute;
top:36px;
left:6px;
background:url(../images/portfolioNavLeft.png) top left no-repeat;
width:44px;
height:28px;
cursor:pointer;
text-indent:-9999px;
display:none;
}

#portfolioNavRight {
position:absolute;
top:36px;
right:6px;
background:url(../images/portfolioNavRight.png) top left no-repeat;
width:44px;
height:28px;
text-indent:-9999px;
cursor:pointer;
display:none;
}

#portfolioNavRight.active, #portfolioNavLeft.active {
display:block;
}

#portfolioItem {
position:absolute;
top:70px;
left:143px;
}