/*

   Notes:
   A little wider than v9 and v10
   to make more room in the menu bar for the new african tab
   
*/

/*----------------------------------------------------------------------------------------------------
  General Reset
  ---------------------------------------------------------------------------------------------------*/
body { background: white; color: black; margin: 0; padding: 0; }
section { display: block; float: left; margin: 0; padding: 0; width: 100%; }
h1, h2, h3, h4 { font-family: arial, sans-serif; font-weight: normal; }
ol { padding-left: 0px; list-style-position: inside; }

/*----------------------------------------------------------------------------------------------------
  Top
  ---------------------------------------------------------------------------------------------------*/
#top { width: 1020px; margin: 0 20px; padding: 0px; }
header { margin: 0; padding: 0; background: #cccccc;}
header h1 { margin: 0; padding: 40px 20px; }

/* Font Selection */
#fonts { width: 940px;margin: 0;  padding: 0 10px; top: 0px; left: 20px; position: fixed; background: #F8F8F8; border-bottom: 1px solid #ccc; }
#fonts li { display: inline; list-style: none; margin: 0 16px 0 0; padding: 0; cursor: pointer; }
#fonts li.active { background: #CCCCCC; }

/* OT Features Panel */
#toggleotfeatures { float: left; width: 980px; margin: 0 20px; padding: 12px 20px; background-color: #bababa; font: normal 13px/13px "Lucida Grande","Lucida Sans Unicode", arial, sans-serif !important; }
#toggleotfeatures a { color: #fff; text-decoration:none; text-shadow: 1px 1px 2px black; }
#editions { float: right; }

/* OT Features Menu */
#otfeatures { float: left; width: 1020px; margin: 0px 20px 10px; padding: 0px 0px 8px; background: #bababa; font: normal 13px/13px "Lucida Grande","Lucida Sans Unicode", arial, sans-serif !important; }
#otfeatures table td { padding: 4px 20px;}
#csscode { margin: 0; padding: 0; font: normal 10px/10px "Lucida Grande","Lucida Sans Unicode", arial, sans-serif; }

/*-----------------------------------------------------------------------------------------------------
  Content
  ---------------------------------------------------------------------------------------------------*/
#custom { margin: 0; padding: 0; }
#custom p { margin: 0; padding: 0; }
#custom p.sizelabel { font: normal 10px/10px "Lucida Grande","Lucida Sans Unicode", arial, sans-serif !important; color: #666; }

/* Navigation */
ul.tabNavigation { width: 1020px; overflow: hidden;	list-style: none; margin: 2px 20px; padding: 0; font: normal 15px/15px "Lucida Grande","Lucida Sans Unicode", arial, sans-serif !important; }
ul.tabNavigation li { float: left; padding: 0; margin: 0; }
ul.tabNavigation li a { display: block; padding: 7px 5px; margin: 2px 4px 2px 0px; color: #000; text-decoration: none; background-color: #ccc; }
ul.tabNavigation li a.selected, ul.tabNavigation li a:hover { color: #fff; background-color: #333; }
ul.tabNavigation li a:focus { outline: 0; }

/* Default Styles for all tabs */
div.tabs > div { padding: 20px; }

/* Is this rule still used? If no longer used then it can be removed... */
div.tabs > div h2 { margin-top: 0; } 

/* Rules for changing case*/
.lowercase {
	text-transform: lowercase;
}
.capitalized {
	text-transform: capitalize;
}
.uppercase {
	text-transform: uppercase;
}

/*-----------------------------------------------------------------------------------------------------
  Tab Specific Rules:
  - If the rule is used in multiple tabs, put it here
  - If the rule is only used in one specific tab and nowhere else, put it inline into the tab html
  ---------------------------------------------------------------------------------------------------*/
  
/* Used in Text previews in multiple Tabs */  
.textsettingCol1 { width: 460px; float: left; }
.textsettingCol2 { width: 460px; float: right; }

/* Used for the Unicode Tables and Unicode Lists */
.bigslot { font-size: 50px; }

/* Used for the Layout tabs */
.multicolumn3 {
	-moz-column-count: 3;
	-moz-column-gap: 20px;
	-webkit-column-count: 3;
	-webkit-column-gap: 20px;
	column-count: 3;
	column-gap: 20px;
}

/* 100 pixel ruler background */
.ruler100pixels {
	background: #ffffff url('../images/100pixels.png') repeat-x left top;
}

/* This is only used in the "Ruder" tab, should be moved to inline css into the ruder.php include file */  
#ruder td { font-size: 32px; line-height: 1; margin: 0; padding: 4px; }

/* This is only used in the "Ngrams" tab, should be moved to inline css into the ngrams.php include file */  
#ngrams td { font-size: 32px; line-height: 1.4; margin: 0; padding: 4px; }

/*-----------------------------------------------------------------------------------------------------
  Footer
  ---------------------------------------------------------------------------------------------------*/
#footer { padding: 20px; width: 980px; }
#footer p { color: #666;  font-family: "Lucida Grande","Lucida Sans Unicode", arial, sans-serif !important;  font-size: 13px;  line-height: 1.5em;  font-style: normal; margin: 0; }
#footer p a { color: #666; }