/*
Theme Name: Starkers
Theme URI: http://elliotjaystocks.com
Description: The totally nude Wordpress theme. Phwoar! (Based on the famous <a href="http://binarybonsai.com/kubrick/">Kubrick</a> by <a href="http://binarybonsai.com/">Michael Heilemann</a>)
Version: 2 (WP2.6.2)
Author: Elliot Jay Stocks
Author URI: http://elliotjaystocks.com
Tags: starkers, naked, clean, basic
*/

@import "style/css/reset.css";
@import "style/css/typography.css";
@import "style/css/layout.css";

body { background:url(/images/bg2.jpg) repeat-x; min-width:900px;margin:0 auto;background-color:#6598ff; background-position: 50% 0px;font-family:calibri,arial,helvetica;font-size:12px;color:#000;padding-top:20px;}

#con{width:946px; margin:0 auto;}

#headcase{background:url(/images/headcase2.png) no-repeat;width:961px;height:119px; margin-top:10px;}

a{ color:#3d73e6; cursor:pointer;}

a:hover{color:#ccc;}

.outer{width:961px;height:100%;min-height:600px;background:url(http://beonscene.com/dev2/images/bodyborder.png) repeat-y;clear:both;}

#footer{position:realtive;background:url(/images/footcase.png) no-repeat;width:961px;height:119px;}

h2{font-size:21px;margin-bottom:5px;}

h3{font-size:16px;margin-bottom:15px;color:#0066cc;line-height:12px;text-transform:uppercase;}

p{margin-bottom:10px;color:#000;text-align:justify;}

/*--Nav--*/

#menu {position:relative;background:url(http://beonscene.com/dev2/images/woodbg.jpg) no-repeat;display:inline; float:left; margin-top: 75px; margin-bottom:10px;margin-left:8px; width:940px;padding:5px;clear:both;}

#menu .item { position:relative;display:inline;float:left;padding-top:0px;padding-left:0px;padding-right:60px;text-transform:uppercase;font-weight:normal;cursor:pointer; color: #000; font-size:16px;}

#menu .item img {position:relative;top:5px;}

#menu .item a {color:#fff;text-decoration:none;}

#menu .item a:hover {color:#ccc;}

#cssdropdown li.headlink { width: 120px; float: left; margin-left: -1px; border: 1px black solid; background-color: #e9e9e9; text-align: center; }
#cssdropdown li.headlink a { display: block; padding: 15px; }

li.headlink{display:inline;}
li.headlink ul { display: none; }
li.headlink:hover ul { display: block;clear:both;}

/*--Main Index--*/

.organic{position:absolute;display:inline;top:0;left:0;width:190px;padding-right:0px;padding-top:5px;}

.tea{position:absolute;display:inline;top:0;left:195px;width:190px;padding-right:0px;padding-top:5px;}

.smoothie{position:absolute;display:inline;top:0;left:390px;width:190px;padding-top:5px;}

/*--secnav--*/

.postfeed{background: url(http://beonscene.com/dev2/images/itemoday.jpg) no-repeat;width:299px;height:157px;padding:5px;}
.postfeed h3{color:#000;}
.postfeed p{color:#000;line-height:12px;}

/*--slider--*/

#s3slider { 
   width:300px; /* important to be same as image width */ 
   height: 270px; /* important to be same as image height */
   border: 1px solid #ccc;
   background-color: #000;
   position: relative; /* important */
   overflow: hidden; /* important */
}

#s3sliderContent {
   width: 300px; /* important to be same as image width or wider */
   position: absolute; /* important */
   top: 0; /* important */
   margin-left: 0; /* important */
}

.s3sliderImage {
   float: left; /* important */
   position: relative; /* important */
   display: none; /* important */
}

.s3sliderImage span {
   position: absolute; /* important */
   left: 0;
   font: 18px/24px Helvetica, sans-serif;
   text-align: center;
   padding: 10px 10px;
   width: 300px;
   background-color: #000;
   filter: alpha(opacity=70); /* here you can set the opacity of box with text */
   -moz-opacity: 0.7; /* here you can set the opacity of box with text */
   -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
   opacity: 0.70; /* here you can set the opacity of box with text */
   color: #fff;
   display: none; /* important */
   bottom: 0;

   /*
       if you put
       top: 0; -> the box with text will be shown at the top of the image 
       if you put
       bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}

.clear {
   clear: both;
} 

/*--TEST NAV--*/
#suckerfishnav {
    background:#transparent repeat-x;
    font-size:13px;
    font-family:verdana,sans-serif;
    font-weight:bold;
    width:100%;
    }
#suckerfishnav, #suckerfishnav ul {
    float:left;
    list-style:none;
    line-height:20px;
    padding:0;
    border:1px solid #aaa;
    margin:0;
    width:100%;
    }
#suckerfishnav a {
    display:block;
    color:#fff;
    text-decoration:none;
    padding:0px 10px;
    }
#suckerfishnav li {
    float:left;
    padding:0;
    }
#suckerfishnav ul {
    position:absolute;
    left:-999em;
    height:auto;
    width:101px;
    font-weight:normal;
    margin:0;
    line-height:1;
    border:0;
    border-top:1px solid #666666;
    }
#suckerfishnav li li {
    width:99px;
    border-bottom:1px solid #666666;
    border-left:1px solid #666666;
    border-right:1px solid #666666;
    font-weight:bold;
    font-family:verdana,sans-serif;
    }
#suckerfishnav li li a {
    padding:4px 10px;
    width:80px;
    font-size:13px;
    color:#fff;
    }
#suckerfishnav li ul ul {
    margin:-22px 0 0 100px;
    }
#suckerfishnav li li:hover {
    background:#99CCFF;
    }
#suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a {
    color:#fff;
    }
#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {
    color:#fff;
    }
#suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {
    color:#fff;
    }
#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul {
    left:-999em;
    }
#suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul {
    left:auto;
    background:#000;
    }
#suckerfishnav li:hover, #suckerfishnav li.sfhover {
    background:#transparent;
    }