/*
CSS Layout Core by Tessa Blakeley Silver - Layout Core
version: 3.4

Layout Core is a very simple CSS "frame" which uses % widths instead of pixels. 
It Allows for easy, responsive, mobile-ready layouts to be created.
Find out more and download the lastest version:
http://csscheatsheet.net/layout-core/
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.
     | http://www.komodomedia.com
      --
     |Mimetypes by oZoopa, The Zoo Keepers
     |Creative Commons Attribution-Share Alike 3.0 Unported License
     | http://oZoopa.com/mime-types-svg/
   - Reusable Suckerfish Tab Horizontal and Verticle menu system with currentLevel display for verticle
     | original url
     | http://csscheatsheet.net/reusable-suckerfish/


NO: Typography, Colors, Borders or Background Images*! (add those yourself to your main style sheet)
    *other than mimetype and social stickers
    
Updates:
    3.4 - 2011-11-13 added media calls for responsive layout 
    3.3 - 2011-04-10 fixed three-quarter percentage
    3.2 - 2010-12-18 simplified suckerfish - sfList and sfTab
    3.0 - 2010-07-12 separated left right floats from percentage widths
    
    2.0 - added social icons and mimetypes
    1.5 - added suckerfish frame
    
Load this sheet up BEFORE your actual CSS style 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;}

/* 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----------------------*/
body{margin:0; padding: 0; font-size: .85em;}

#container{margin: 0 auto; padding: 0;}
#container2{margin: 0 auto; padding: 0;}

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

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


/*-------------------Flexi-grid containers--------------------*/
/*--//float left or right?--*/
.left{float: left;}
.right{float: right;}

/*--//object widths--*/
.full{width: 100%;}

.seven-eighths{width: 86.5%}

.three-quarters{width: 73%;}

.two-thirds{width: 67%;}

.half{width: 50%;}

.third{width: 30%;}

.quarter{width: 23.5%;}

.eighth{width: 11.5%}

.margin-left{margin-left: 1.25%;}
.margin-right{margin-right: 1.25%;}



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


/*-------------------------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;}

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

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

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

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

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

.grid8up li {width: 11%; float: left; padding: 0; margin-left: .75%}

/*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 10em;}

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

.sfTab  li:hover ul, .sfTab li li:hover ul, .sfTab li li li:hover ul, .sfTab li.sfhover ul, .sfTab li li.sfhover ul, .sfTab 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 oZoopa's mime-type-downloads-24.png graphic or a similar graphic set up to it*/

/*place .icon class FIRST,then annotate with one of the following classes
mime-type icons by ozoopa.com
*/

.icon{ /*pdf is native to this*/ display:block; background: url(images/mime-type-downloads-24.png) no-repeat left 5px; text-indent: 30px; line-height: 38px; height: 33px;}

.psd{background-position: 0 -39px;}
.xcf{background-position: 0 -79px;}
.jpg{background-position: 0 -119px;}
.png{background-position: 0 -159px;}
.doc{background-position: 0 -199px;}
.odt{background-position: 0 -239px;}
.mp3{background-position: 0 -279px;}
.mp4{background-position: 0 -319px;}
.ppt{background-position: 0 -359px;}
.odp{background-position: 0 -399px;}
.svg{background-position: 0 -439px;}

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

Delete extras from final sheet
social icon pack by komodomedia.com
*/

/*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;}

/*--------------@MEDIA QUERIS--------*/
/*These general media queries allow your site's structure to respond gracefully to diffrent screen widths and devices.
 Elaborate on these in your main CSS style sheet, especially if you'll be changing font sizes, colors etc.!
*/

@media (min-width: 1220px) {
    /*for very large screens*/
	#container, footer{width:1100px;}
}
@media (max-width: 1024px) {
	/*for laptop/netbook/tablet screens*/
	#container, footer{width: 950px;}
}
@media (max-width: 800px) {
	/*for netbook/tablet screens*/
	body{font-size: .75em;}
	#container, footer{width: 100%;}
}
@media (max-width: 640px) {
	/*for tablet screens*/
	body{font-size: .75em;}
	#container, footer{width: 100%;}
}
@media (max-width: 480px) {
	/*media players*/
	#container, footer{width:100%;}
	.left, .right {float:none; clear:both;}
	.seven-eighths, .three-quarters, .two-thirds, .half, .third, .quarter, .eighth{margin: 0 auto; width: 98%;}
		
}
@media only screen and (min-width: 320px) and (max-width: 480px) {
	/*phones*/
	#container, footer{width:100%;}
	.left, .right {float:none; clear:both;}
	.seven-eighths, .three-quarters, .two-thirds, .half, .third, .quarter, .eighth{margin: 0 auto; width: 98%;}
}