/************************************ Milk and Cookies Template Structure ****************************************
************************************ Milk and Cookies Template Structure ****************************************/
/***************************************************************************************
MILK AND COOKIES TEMPLATE DESIGN INFORMATION
***************************************************************************************/
body{
margin:0; /* copied, probably debug*/
padding:0; /* copied, probably debug */
border:0; /* Gets rid of border around viewport in old IEs */
width:100%; /* copied, probably debug */
height:100%;
background:url('images/Sky250x250.jpg') repeat fixed left top;
font-family: Georgia, serif;
position:relative; /* This fixes the IE7 overflow hidden bug */
/*overflow:hidden; /* Hides overflowing divs */
min-width:1024px; /* Min width of design, must assess design in lower IEs
as far as header, can go as low as 825- problem is
tabbed menu */
font-size:11pt;
}
/***************************************************************************************
BORDERS & RULES
***************************************************************************************/
/* TOP/BOTTOM DROP SHADOWS */
.tb1{ /* top black 9px drop shadow */
background:url('images/tb1.png') repeat-x left top;
width:100%; height:9px; /* 100% w, due to float */
float:left; clear:both; /* floated, so can be used in context of other floated boxes **/
margin-top:-9px; /* so it doesn't take up space */
position:relative; z-index:10;
}
.tb2{ /* top black 9px drop shadow */
background:url('images/tb1.png') repeat-x left top;
width:100%; height:9px; /* 100% w, due to float */
float:left; clear:both; /* floated, so can be used in context of other floated boxes **/
margin-top:-17px; /* so it doesn't take up space */
position:relative; z-index:1;
}
.bb1{ /* bottom black 9px drop shadow */
background:url('images/bb1.png') repeat-x left top;
width:100%; height:9px;
float:left; clear:both;
margin-bottom:-9px;
position:relative; z-index:1;
}
/* ZIG-ZAG HORIZONTAL RULE */
.hr1{ /* M&C zig-zag */
background:url('images/hr1.png') repeat-x center top;
height:25px;
position:relative; z-index:1;
}
/* TORN BORDER, BOTTOM */
.bbtorn{
background:url('images/bbtorn.jpg') repeat-x center top;
width:100%; height:26px;
margin-top:-26px; /* so it takes up no height */
float:left; clear:both;
}
/***************************************************************************************
HEADER - uses SIMPLE3COL for layout, see column layouts
***************************************************************************************/
/************************* BACKGROUNDS - HEADER ***************************************/
/* Logo */
#h-logo a{background:url('images/logo2.png') no-repeat left top;}
/* Buttons */
#h-spotlightbtn{background:url('images/buttons/spotlight.png') no-repeat left top;}
#h-storybtn{background:url('images/buttons/tellyourstory.png') no-repeat left top;}
#h-fbbtn{background:url('images/buttons/facebook.png') no-repeat left top;}
#h-twitbtn{background:url('images/buttons/twitter.png') no-repeat left top;}
#h-myspacebtn{background:url('images/buttons/etsy.png') no-repeat left top;}
/* Sidebox */
#h-sidebox{background:url('images/search_tab.png') no-repeat left bottom;}/*
/************************* LAYOUT - HEADER ***************************************/
/* (including over-rides of layout info to SIMPLE3COL basic layout) */
#header{
height:172px; width:95%; margin:auto;
overflow:hidden; position:relative; /* This fixes the IE7 overflow hidden bug */
}
/* LOGO */
#h-logo{
width:324px; /* Over-ride, width of lcol w/ width of logo */
}
#h-logo h1{
margin:0; /* Remove default margin */
}
#h-logo a{
width:324px; /* Width of logo */
height:172px; /* Height of logo */
}
/* BUTTONS */
#h-buttons{
margin: 0 auto; /* Over-ride greater or equal to width of rcol and lcol*/
overflow:hidden; /* Stop overflowing divs */
position:relative;
width:205px; /* */
margin-top:15px; /* Tweak down */
}
/* BUTTONS 1 */
#h-buttons1{
height:100%; width:145px;
float:left; clear:left; /* To align left, alongside buttons2 */
}
#h-spotlightbtn{
height:80px; width:145px;
clear:both;
}
#h-storybtn{
height:80px; width:125px;
position:relative; top:-5px;
}
/* BUTTONS 2 */
#h-buttons2{
width:90px; height:100%;
float:left; clear:right; /* To align right, alongside buttons1 */
position:relative; top:10px; /* tweaks the top down, for overlap w/ buttons 1 */
margin-left:-30px; /* tweaks left, for overlap with buttons 1*/
}
#h-fbbtn{
width:52px; height:60px;
float:right; clear:right;
}
#h-twitbtn{
width:38px;height:62px;
margin-top:30px;
}
#h-myspacebtn{
height:62px;
margin:-15px 0px 0px 35px;
}
/* SIDEBOX */
#h-sidebox{
height:172px;
margin-left:-648px; /* Over-ride = = -(width of rcol + lcol)*/
width:324px; /* Over-ride, width of rcol */
}
#h-quotebox{
padding:10px 10px 10px 25px;
height:65px;
/* position:relative; /* Debugging */
}
#h-searchbox{
position:absolute;
bottom:0px;
left:50px;
height:24px;
}
#h-searchbox label{ /* Wordpress default searchform comes with text label
"Search for:" which I do not wish to display.*/
display:none;
}
/***************************************************************************************
MAIN CONTENT - CONTENT WRAP
***************************************************************************************/
#contentwrap{ /* Main menu and all subsequent content excluding
footer are wrapped in #contentwrap, the black box
on the site. :D
*/
background:black;
width:100%; height:100%;
float:left; clear:both; /* since #header is floated, #contentwrap & #footer
must also be floated, for the clear propery to work
so that they don't lie on top of each other */
overflow:hidden; position:relative;
}
/***************************************************************************************
MAIN CONTENT - MAIN MENU
***************************************************************************************/
/************************* BACKGROUNDS - MAIN MENU ***************************************/
#rbird_tab{background:url('images/tabs/rbird.png') no-repeat right bottom;}
#lbird_tab{background:url('images/tabs/lbird.png') no-repeat left bottom;}
#home_tab{background:url('images/tabs/home.png') no-repeat left top;}
#news_tab{background:url('images/tabs/news.png') no-repeat left top;}
#events_tab{background:url('images/tabs/events.png') no-repeat left top;}
#about_tab{background:url('images/tabs/about.png') no-repeat left top;}
#storytelling_tab{background:url('images/tabs/storytelling.png') no-repeat left top;}
#the-cookie-jar_tab{background:url('images/tabs/thecookiejar.png') no-repeat left top;}
#fun-elsewhere_tab{background:url('images/tabs/funelsewhere.png') no-repeat left top;}
#shop_tab{background:url('images/tabs/shop.png') no-repeat left top;}
/************************* LAYOUT - MAIN MENU ***************************************/
#mainmenu{
height:54px; width:90%; /* Must have same width & margin as ocontentwrap */
overflow:hidden;
position:relative; /* This fixes the IE7 overflow hidden bug */
margin:5px auto 0px auto;
}
/*BIRDS*/
#lbird_tab{
width:110px; height:62px;
float:left; clear:left; /* To align left */
position:relative; /* To enable positioning */
z-index:2; /* To bring above drop shadow, .tb1 */
}
#rbird_tab{
width:110px; height:62px;
float:right;
position:relative;
z-index:2;
}
/* MAIN MENU */
#mainmenutabs{
height:54px;
text-align:center;
overflow:hidden; /* This fixes the IE7 overflow hidden bug */
}
#mainmenu a{
display:inline-block;
text-align:center;
height:54px;
vertical-align:top;
}
/* INDIVIDUAL MENU TABS */
/* Negative margins tweak so they overlap */
#home_tab{width:100px;}
#news_tab{width:80px; margin-left:-27px;}
#events_tab{width:94px; margin-left:-27px;}
#about_tab{width:95px; margin-left:-27px;}
#storytelling_tab{width:147px; margin-left:-35px;} /* Commented out in HTML currently */
#the-cookie-jar_tab{width:163px; margin-left:-30px;}
#fun-elsewhere_tab{width:146px; margin-left:-21px;}
#shop_tab{width:99px; margin-left:-39px;}
/***************************************************************************************
MAIN CONTENT - OUTER CONTENT
***************************************************************************************/
#ocontentwrapwrap{ /* In order, to use floats for to make columns,
this extra div became necessary
- to provide margins for ocontentwrap (for centering),
which can no longer do so for itself
- since it must be floated
to make the column layouts work*/
margin:0px auto 50px auto;
width:90%;
}
#ocontentwrap{ /* Outer content wrapper, contains all subsequesnt content, excluding footer.
Determines margins of submenu and content
ie. constrains the white box.
*/
margin-bottom:50px; /* For some reason, specifying this on ocontentwrawrap
doesn't work */
height:100%; width:100%;
background:white;
float:left; clear:both;
position:relative; overflow:hidden;
}
#ocontent{ /* This div exists so that the BG doodle
can be in a separate div from the white BG
and so can overlap the torn border */
padding-bottom:30px; /* Weird FF bug, where ocontent ends just above
the torn border, instead of overlapping it and
filling its container div, as it should.
Adding bottom border/padding seems to fix */
height:100%; width:100%;
background:url('images/doodle.png') repeat-y center top;
position:relative; z-index:10; /* Place on top of torn border */
float:left; clear:both;
}
/***************************************************************************************
MAIN-CONTENT - SUBMENU
***************************************************************************************/
/************************* BACKGROUNDS - SUBMENU ***************************************/
#submenuwrap{background:white;} /* Hide BG Doodle */
/************************* LAYOUT - SUBMENU ***************************************/
#submenuwrap{height:40px; zoom:100%; position:relative;}
#submenu{font-size: 12pt; width:100%; height:20px; padding:10px 0px 10px 0px; float:left; position:relative; overflow:hidden; zoom:100%;}
#submenu ul{clear:left; float:left; text-align:center; list-style:none; left:50%; position:relative; padding:0; margin:0; zoom:100%;}
#submenu ul li{display:block; float:left; right:50%; list-style:none; position:relative; vertical-align:top; height:100%; margin:0; padding:0;}
/* LINKS */
#submenu ul li a{display:block; color:black; text-decoration:none;
padding:3px 20px;
line-height:1.3em;}
#submenu ul li a:link{color:black; text-decoration:none;}
#submenu ul li a:visited{color:black; text-decoration:none;}
#submenu ul li a:hover{color:#2d503a;}
#submenu ul li a:active{color:#2d503a;}
/***************************************************************************************
MAIN-CONTENT - CONTENT
#content contains all actual site content
=> #main-content -> post/ page content
And (OPTIONAL) sidebars
=> #sidebar-l -> left sidebar - for categories, etra navmenus
=> #sidebar-r -> right sidebar - for special feature boxes etc.
There are four possible displays for the #content-
To define the display:
Use the correct internal div structure (see COLUMN LAYOUTS)
and apply one of three classes to #content.
=> .simple3col -> 3 column layout, fixed width left and right columns
=> .simple2col_l -> 2 column, fixed width left column
=> .simple2col_r -> 2 column, fixed wifth right column
=> no class defined -> 1 column layout
The behaviour of #content under each of these layout conditions
is defined in this section.
***************************************************************************************/
/* simple3col */
.simple3col #main-content{
margin-top:-10px;
padding-top:30px;
}
.simple3col #sidebar-l{
margin:-10px 15px 40px 20px;
padding-top:30px;
width:215px;
}
.simple3col #sidebar-r{
margin:-10px 20px 40px -485px;
padding-top:30px;
width:215px;
}
/* simple2col_l */
.simple2col_l #main-content{
margin-top:-10px;
margin-right:20px;
padding-top:30px;
}
.simple2col_l #sidebar-l{
margin:-10px 15px 40px 20px;
padding-top:30px;
width:215px;
}
/* simple2col_r */
.simple2col_r #main-content{
margin-top:-10px;
margin-left:40px;
margin-right:320px;
padding-top:30px;
}
.simple2col_r #sidebar-r{
margin:-10px 40px 40px -305px;
padding-top:30px;
width:265px;
}
/* single column */
.singlecolumn #main-content{
margin:-10px 25px 40px 25px;
padding-top:30px;
}
#sidebar-r h2{
font-size:1.2em;
}
.white80{ /* This div contains all of the actual site content
and determines the span of the transparent white box */
/* width:90%; height:auto;
margin:-10px auto 40px auto; /* Negative top, to pull under zig-zag border,
auto sides to center. */
/* padding: 30px 0px 20px 0px; /* So transparency stretches to the zig-zag
and below the site content */
background:url('images/white80.png') repeat left top;
}
/* page */
.page_content{
padding:0px 20px;
}
/***************************************************************************************
FOOTER
***************************************************************************************/
#footer {
clear:both;
width:100%; /*height: 20px;*/
position:relative;
text-align:center;
padding:15px 0px;
}
#footer p{
text-align:center;
margin:0;
clear:both;
}
#footer ul{
width:352px;
margin:0 auto;
}
#footer ul li{
float:left;
list-style-type:none;
padding: 0px 30px 0px 0px;
}