/*
CSS Layout Core by Tessa Blakeley Silver - Project Clean Sheet
version: 2.1

http://csscheatsheet.net/project-clean-sheet/
http://tessablakeleysilver.com, http://hyper3media.com

This sheet for xhtml 1.0 trans and html5 markup
it contains: 
   - Meyer's Reset
     |http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded
   - Tessa's custom flexi-grid containers
     |http://csscheatsheet.net/css-flexi-grid
   - ul, ol and dt list set up
   - link annotation for standard file mimetypes and social stickers
     |Social Network Icon Pack by Komodo Media, Rogie King 
     |Creative Commons Attribution-Share Alike 3.0 Unported License.
     |www.komodomedia.com
      --
     |Mimetypes by oZoopa, The Zoo Keepers
     |Creative Commons Attribution-Share Alike 3.0 Unported License
     |oZoopa.com/mime-types-svg/
     |oZoopa.com
   - Suckerfish Tab Horizontal and Verticle menu system with currentLevel display for verticle


NO: Typography, Colors, Borders or Background Images*!.
    *other than mimetype and social stickers
    
Load this sheet up BEFORE your actual style.css design sheet.

*/

/*----------------------MEYERS RESET-----------------------*/

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,
small, 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;outline: 0;font-weight: inherit;font-style: inherit;font-size: 100%;font-family: inherit;vertical-align: baseline;}

/* remember to define focus styles! */
:focus {outline: 0;}

body {line-height: 1;color: black;background: white;}

ol, ul {list-style: none;}

/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: separate;border-spacing: 0;}

caption, th, td {text-align: left;font-weight: normal;}

blockquote:before, blockquote:after, q:before, q:after {content: "";}

blockquote, q {quotes: "" "";}

/* tells browsers that donÍt read HTML5 tags to render like divs */ 
header, footer, aside, nav, article, section { display: block; margin: 0; padding: 0;}
 
.clear:after { content: ñ.î; display: block; height: 0; clear: both; visibility: hidden;} 


/*----------------------Body and Containers----------------------*/
/*#container and #footer are just about the only places you should need set a pixel width!*/
body{margin:0; padding: 0;}

#container{margin: 0 auto; padding: 0; width:1000px;}
#container2{margin: 0 auto; padding: 0;}

/*---//Header--*/
header, #header{margin: 0; padding: 0;}

/*---//Footer--*/
footer, #footer{margin: 0 auto; width:1000px;}


/*-------------------Flexi-grid containers--------------------*/
/*--//quarter across*/
.left75{width: 73%; float: left; border:none;}

.right75{width: 73%; float: right; border:none;}

/*---//Two-thirds across--*/
.left66{width: 62%; float: left; border:none;}

.right66{width: 62%; float: right;}

/*---//Half split--*/
.left50{width: 48%; float: left;}

.right50{width: 48%; float: right;}

/*---//One-third across--*/
.left33{width: 31%; float: left;}

.right33{width: 31%; float: right;}

/*---//Quarter across--*/
.left25{width: 22%; float: left; border:none;}

.right25{width: 22%; float: right; border:none;}

/*Force full width*/
.full{width: 100%;}

/*Push to the bottom*/
.push{clear:both;}

/*--Floats--*/
.floatRight{margin: 10px 0 10px 10px; float: right;}

.floatLeft{ margin: 10px 10px 10px 0px; float: left;}


/*-------------------------LISTS---------------------------*/
ul {margin: 0; padding: 0 10px;}
ol {margin:0; padding: 0 10px;}
ol li{margin-left: 25px; list-style: lower-alpha;}

dl {padding-right: 10px;}
dt{font-weight: 600;}
dd{font-size: 95%;}

li {padding: 5px 0 0 10px; margin: 0 0 5px 0;}
li:last-child {padding-bottom: 5px;}

/*---//lists that float left horizontally*/
.list50 li {width: 49%; float: left; padding:0; margin-left: 1%;}

.list33 li {width: 32%; float: left; padding:0; margin-left: 1%;}

.list25 li { width: 23%; float: left; padding:0; margin-left: 2%;}

.list20 li { width: 18%; float: left; padding:0; margin-left: 2%;}

.list16 li {width: 15%; float: left; padding:0; margin-left: 1%;}

/*stop cascading and custom lists*/
.stopList li{width: 100%; clear:both; padding: 5px 0 0 10px; margin: 0 0 5px 0;}
ol.stopList li{margin-left: 25px; list-style: lower-alpha;}
.stopList li:last-child{padding-bottom: 5px;}


/*---//Navigation--*/
/*Suckerfish dropdown menus have been distilled down to their essence in .sfTab and .sfList. 
.dropRight & dropLeft can be added to the .sfList to pick which way it drops menu systems.
.currentLevel will display submenus only when the main menu li id has been slected with #current.

This is layout only. :hovers and #current are left out as those should be styled in the sytle.css sheet. 
*/


/**sfTab suckerfish dropdowns ul id**/
.sfTab ul {margin: 0; padding: 0; list-style: none;}

/* all list items */
.sfTab  li {float: left; padding:0; margin: 0;}
.sfTab  a {display: block;}


/* second-level lists - using left instead of display to hide menus for screen readers*/
.sfTab  li ul { position: absolute; padding-bottom:4px; width: 200px; left: -999em;}


/* third-and-above-level lists */
.sfTab  li ul ul {margin: -1em 0 0 7em;}

/* lists nested under hovered list items */
.sfTab  li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em;}
.sfTab  li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {left: auto;}


/**.sfList suckerfish dropdowns ul id - remember to choose .dropLeft or .dropRight for dropdown alone will display entire menu inline** if you want to use in-line in a column add a push class underneath.*/

.sfList, .sfList ul {padding: 0; margin: 0;list-style: none; float: left;}

/* all list items */
.sfList li {position : relative; float : left; margin-bottom : -1px;}

.sfList li a {width: 227px; display : block; padding: 5px 30px 10px 10px;}

/* second-level lists*/
.sfList li ul{width: 85%;}
.sfList li ul li a{width: 200px; padding : 0 0.5em; padding-bottom: 15px;}

/* third-and-above-level lists */
.sfList li ul ul {right: -999em;}

/* lists nested under hovered list items */
.sfList li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em;}
.sfList li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {left: auto;}

/* second-level lists Left, Right and currentLevel possitions*/
.dropRight li ul {position : absolute; left: -999em; margin-left : 100px; margin-top : -28px;}
.dropLeft li ul {position : absolute; left: -999em; margin-left : -100px; margin-top : -28px;}
.currentLevel li ul{display:none;}
.currentLevel li#current ul{display:block;}


/*---//Link annotation--*/
/*This annotation REQUIRES the mime-type-downloads-24.png graphic or a similar graphic set up to it
you can download this file from the tessaract.info site*/

/*place .icon class FIRST,then annotate with one of the following classes*/
.icon{ /*pdf is native to this*/ display:block; background: url(images/mime-type-downloads-24.png) no-repeat left top; text-indent: 30px; line-height: 38px; height: 33px;}

.psd{background-position: 0 -49px;}
.jpg{background-position: 0 -99px;}
.doc{background-position: 0 -149px;}
.odt{background-position: 0 -199px;}
.mp3{background-position: 0 -249px;}
.ppt{background-position: 0 -299px;}

/*---Social Annotation*/
/*These Social annotations REQUIRE Fasticon.com's Social Pack, 24 pixle wide icons.
Or, you must the .soc rule for your own icons.

Delete extras from final sheet*/

/*place .soc class FIRST,then annotate with one of the following classes*/
.soc{ display:block; background: none; text-indent: 30px; line-height: 26px; height: 24px;}

.blinklist{background: url(images/soc/Blinklist_24x24.png) no-repeat left top;}
.blogmarks{background: url(images/soc/BlogMarks_24x24.png) no-repeat left top;}
.delicious{background: url(images/soc/delicious_24x24.png) no-repeat left top;}
.digg{background: url(images/soc/Digg_24x24.png) no-repeat left top;}
.diigo{background: url(images/soc/Diigo_24x24.png) no-repeat left top;}
.facebook{background: url(images/soc/FaceBook_24x24.png) no-repeat left top;}
.favs{background: url(images/soc/Favorite_24x24.png) no-repeat left top;}
.rss{background: url(images/soc/Feed_24x24.png) no-repeat left top;}
.feedburner{background: url(images/soc/FeedBurner_24x24.png) no-repeat left top;}
.flicker{background: url(images/soc/Flickr_24x24.png) no-repeat left top;}
.furl{background: url(images/soc/Flickr_24x24.png) no-repeat left top;}
.google{background: url(images/soc/Google_24x24.png) no-repeat left top;}
.myspace{background: url(images/soc/MySpace_24x24.png) no-repeat left top;}
.netvibes{background: url(images/soc/Netvibes_24x24.png) no-repeat left top;}
.newsvine{background: url(images/soc/Newsvine_24x24.png) no-repeat left top;}
.reddit{background: url(images/soc/Reddit_24x24.png) no-repeat left top;}
.simpy{background: url(images/soc/Simpy_24x24.png) no-repeat left top;}
.stumble{background: url(images/soc/Stumbleupon_24x24.png) no-repeat left top;}
.technorati{background: url(images/soc/Technorati_24x24.png) no-repeat left top;}
.twitter{background: url(images/soc/Twitter_24x24.png) no-repeat left top;}
.youtube{background: url(images/soc/Youtube_24x24.png) no-repeat left top;}