/*
Style Sheet For Open Humanities Press site
Version 0.2 (experimental code in progress) 
Release Date: 2011-01-05
Copyright 2009. Licensed under the GPL 3.0 -- http://www.gnu.org/copyleft/gpl.html
*/
/* 
Browser support
As of early 2011 I think I can stop supporting IE5, but IE6 still has
around 10% market share. MS recommends conditional comments over
hacks for IE nastiness, but I'm not so sure. The best solution is, of course, 
neither.

.one.two — Prior to IE 7.0, only .two is applied.

*/
/* 
Device Support
Try and reduce device support classes by creating a formula that accounts for
screen size, resolution and viewing distance. Don't forget accessibility!
In the meantime the rough guess is:
One column to 640 - Handhelds and Old Computers
Two columns to 960 
Three columns to 1280 - New Computers
Three columns plus to 1600 
*/
/*
Javascript
Javascript may be required for admins, editors and authors (for submission etc).
But for reader it must only be used for progressive enhancement. The baseline
experience should be great.
*/
/*
HTML 4 vs 5
I can't find a backwards compatible solution that will work for IE6 without
relying on Javascript. Perhaps write it in 4 but embed html5 semantics so the
HTML can be upgraded easily with XSLT? Also, mesh with semantics of OHP/MPub's 
publishing process if possible.
*/
/* 
CSS Cheat sheet
Attribute Shorthand Syntax Key
top right bottom left
top right/left bottom
top/bottom right/left
ems are always relative to font size, so use them for grid
my attribute order position box type decoration
font: font-style font-variant font-weight font-size/line-height font-family;
UA base is assumed to be 16px
8px  = 0.5em
11px = 0.6875em
12px = 0.75em
13px = 0.8125em
14px = 0.875em
15px = 0.9375em
16px = 1em
18px = 1.125em
24px = 1.5em
 */
 /* 
Efficiency
Minimal Rest, if any.
Smallest number of rules.
Prefer class and ID selectors over tag selectors.
a class is only used for one tag
ID selectors are unique by definition. Including tag or class qualifiers just 
adds redundant information that needs to be evaluated needlessly. 
Single linked sheet.
This will be ported to some CMS soon so I am keeping everything in one sheet
to ease the porting.
*/

/* Reset - gives a known baseline. Based on work by Eric Meyer.
----------------------------------------------------------------------------- */
/* First zero out values */
html,body,h1,h2,h3,h4,h5,h6,div,p,address,blockquote,pre,center,span,a,strong,em,abbr,acronym,dfn,q,cite,code,kbd,samp,var,ins,del,big,small,b,i,tt,sub,sup,img,canvas,time,mark,audio,video
nav,header,hgroup,footer,article,aside,details,section,summary,figcaption,figure,dl,dt,dd,ul,ol,li,table,caption,tbody,tfoot,thead,tr,th,td
	{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font-weight: normal;
	font: inherit;
	vertical-align: baseline;
}

/* Base - establishes the default styles for html elements */
body {
	font:13px/1.231 "myriad pro", "liberation sans", "helvetica neue", helvetica, arial, clean, sans-serif;
	*font-size:small; /* for IE */
	*font:x-small; /* for IE in quirks mode */
}
select, input, button, textarea { /* Nudge down to get to 13px equivalent for these form elements */
	font:99% arial, helvetica, clean, sans-serif;
} 
table { /* To help tables remember to inherit */
	font-size:inherit;
	font:100%;
}

dl {
	margin-top:13px;
}

dt {
	padding-top:0.5em;
	padding-bottom:0.2em;
	font-weight:bold;
	font-size:93%;
	font-family:"helvetica neue", helvetica, arial, sans-serif;
}

dd {
	padding-top:0.1em;
	padding-bottom:0.2em;
}

ol li {
	padding-top:0.3em;
	padding-bottom:0.2em;
	list-style:decimal;
}

ul, ol {
	padding-left:2em;
	padding-right:2em;
}

ul li {
	padding-top:0.1em;
	padding-bottom:0.4em;
	list-style:disc;
}

h1, h2, h3, h4, h5, h6 {
	font-weight:bold;
	font-family:"helvetica neue", helvetica, arial, sans-serif;
	line-height:1.385;
}

h1 {
	font-size:182%;
	line-height:1.231;
}

h2 {
	font-size:138.5%;
}

h2.smaller {
	font-size:120%;
	line-height:1.5;
	padding-top: .5em;
	padding-bottom: .5em;
}

h3 {
	font-size:100%;
	margin-top:13px;
	margin-bottom:0.25em;
}

h4 {
	font-weight:normal;
	font-size:116%;
	margin-bottom:7px;
}

h5 {
	font-weight:bold;
	font-size:100%;
	margin-bottom:3px;
}

p {
	font-size:100%;
	margin-bottom:0.7em;
	line-height:1.385;
}

pre, code, kbd, samp, tt { /* Bump up IE to get to 13px equivalent for these fixed-width elements */
	font-family:monospace;
	*font-size:108%;
	line-height:100%;
}

em {
	font-style:italic;
}

strong {
	font-weight:bold;
}

a {
	color:#009;
	text-decoration:none;
}

a:visited {
	color:#009;
	text-decoration:none;
}

a:active, a:focus, a:hover {
	color:#00f;
}

/* pushes the link text down as its clicked to give it a tactile feel */
a:active {
  position: relative;
  top: 1px;
}

a:visited:hover {
	color:#00f;
	text-decoration:none;
}

/* Structure - the basic divisions that organize a page. These are all
   unique so we use ids rather than classes
----------------------------------------------------------------------------- */
#foreground { /* contains "page" and separates it from background (viewport) */
	margin-left:0;
	margin-right:0;
	padding-left:6%;
	padding-right:6%;
}

#header { /* contains the logo element */
	width:100%;
	overflow:hidden;
	border-bottom:double 3px #999;
}

#site-navigation { /* contains primary navigation */
	width:100%;
}

#main { /* contains primary content, related information and local navigation */
	width:100%;
	clear:both;
	overflow:hidden;
	padding-bottom:3.0em;
}

#footer {
	clear:both;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	margin-top:3.0em;
	padding-top:0.5em;
	padding-bottom:1.5em;
	border-top:solid 1px #ccc;
}

#content { /* contains primary information */
	width:60%;
	float:right;
	margin-left:1.5%;
	margin-right:0;
}

#related,
#page-navigation { /* contains related information */
	width:36%;
	float:left;
	margin-right:1.5%;
	padding-bottom:2.0em;
}

#content-wide {
	width:83%;
	float:right;
	margin-left:1.5%;
	margin-right:0;
}

#related-narrow { /* Containers - whose semanitcs these seem device specific? */
	width:14%;
	float:left;
	border-right:solid #ccc 1px;
	padding-right:1%;
}

/* Layout Classes - to ease layout expirments, should be replaced with more 
   semantic class.
------------------------------------------------------------------------------*/
.center {
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}

.emphasize {
	font-style:italic;
}

.ruled-above {
	border-top:#ccc solid 1px;
	padding-top:0.5em;
}

.ruled-below {
	border-bottom:#ccc solid 1px;
	padding-bottom:0.5em;
}

.hbox-right {
	float:right;
	text-align:right;
	margin-left:13px;
	margin-top:7px;
	margin-bottom:7px;
	padding-bottom:1.5em;
}

.hbox-left {
	float:left;
	text-align:left;
	margin-top:.25em;
	margin-right:2em;
	padding-bottom:2em;
}

.hbox-left-big {
	float:left;
	text-align:left;
	margin-top:.25em;
	margin-right:2em;
	padding-bottom:2em;
}

.shadow {
	-moz-box-shadow: 2px 2px 4px #999;
	-webkit-box-shadow: 2px 2px 4px #999;
	box-shadow: px 2px 4px #999;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#999999')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#999999');
}

.vbox-ruled {
	clear:both;
	border-top:#ccc solid 1px;
	margin-top:26px;
	padding-top:26px;
}

.vbox-ruled-below {
	border-bottom:#999 solid 1px;
	padding-bottom:57px;
}

.vbox {
	clear:both;
	margin-top:26px;
	padding-top:13px;
}

.vbox-first {
	margin-top:0;
	padding-top:0;
}

.quote-inline {
	padding-left:2em;
	padding-top:13px;
	padding-right:4em;
}

.callout {
	padding-left:13px;
	padding-right:7px;
	margin-bottom:26px;
	border-left:solid #999 1px;
}

.kludge {
	padding-left:15px;
	padding-top:1em;
	padding-right:7px;
}

.quote-callout {
	font-size: 123.1%;
}

.third {
	width:25%;
	float:right;
	/* border-left:solid #ccc 1px; */
}

.third-x2 {
	width:72%;
	float:left;
	margin-right:auto;
}

.pushdown1x {
	padding-top:13px;
}

.pushdown2x {
	padding-top:21px;
}

.spaceunder {
	padding-bottom:13px;
}

.pullup { /* for lists after paras; it stays for now */
	margin-bottom:0.2em;
}

.pullup2x { /* for lists after paras; it stays for now */
	margin-bottom:0;
}

pulluptop {
	margin-top:6px;
}

.loose { /* steering group this stays too */
	line-height:1.385;
}

.column-start { clear:left; }

/*
 * Widgets - named for UI function */
.menubar {
	padding-left:0em;
	padding-top:0.5em;
	padding-bottom:3em;
	padding-right:0em;
}

.menubar-item {
	list-style:none;
	font-size:108%;
	display:inline;
	padding-left:0.9em;
	padding-right:0.1em;
	line-height:1.385;
	white-space:nowrap;
}

.menubar-item-first {
	padding-left:0;
}

.menubar-item-last {

}

.menubar-itemselected {
}

.tabs {
	padding-left:0em;
	padding-top:39px;
	padding-bottom:0.2em;
	padding-right:0em;
	border-bottom:1px;
	border-bottom-style:solid;
	border-color:#999;
}

.tabs-item {
	list-style:none;
	font-size:108%;
	padding-top:0.5em;
	padding-bottom:0.3em;
	padding-left:1em;
	padding-right:1em;
	display:inline;
}

.tabs-selected { /* static fallback */
	border:1px;
	border-style:solid;
	border-bottom:0px;
	border-color:#999;
}

.menu {
	margin-top:0;
	padding-left:0;
/* 	padding-top:7px; */
	padding-right:0;
}

.menu-notabs {
	margin-top:4.4em;
	padding-left:0;
	padding-top:7px;
	padding-right:0;
	border-top:1px;
	border-top-style:solid;
	border-top-color:#999;
}

.menu-item {
	list-style:none;
	font-weight:normal;
	font-size:108%;
	margin-top:0.5em;
	margin-bottom:0.5em;
	padding-left:6px;
}

.menu-item-verbose {
	padding-top:0.7em;
	margin-bottom:0;
	border-top:1px;
	border-top-style:solid;
	border-top-color:#ccc;
}

.menu-note {
	font-size:93%;
	margin-left:0;
	padding-top:0.1em;
	padding-left:7px;
	padding-bottom:0.7em;
	font-weight:normal;
}

.menu-item-first {
	border-top:0
}

.accessibility-aids {
	padding-top:0.5em;
}

.skip {
	color:white;
}

.skip:hover, .skip:focus, .skip:active {
	color:blue;
}


.caption { /* Contents - named for role or content */
	padding-top:3px;
	padding-left:3px;
	padding-right:3px;
	margin-bottom:0;
	font-size:85%;
	line-height:150%;
}

.logotype {
	float:right;
	padding-top:55px;
}

.logo {
	float:right;
}

.attribution {
	margin-top:0.5em;
	margin-bottom:1em;
	margin-right:20%;
	font-style:italic;
	text-align:left;
}

.fineprint {
	padding-top:1em;
	text-align:center;
	font-size:x-small;
	line-height:150%;
}

.demphisize {
	color:#888;
}

.marginal {
	clear:both;
	font-size:85%;
	color:#888;
}

.reversed {
	display:block;
	background-color:#666;
	color:#e2e2e2;
}

.kicker {
	margin-top:13px;
	margin-bottom:0.2em;
	font-weight:normal;
	color:#888;
}

.mailto {
	list-style-image:url(mail.png);
	padding-left:3px;
	padding-right:3px;
}

.address {
	line-height: 0.9;
}

/* Semantic Class - Most specific end of file to ensure they override
------------------------------------------------------------------------------*/
.journal-matrix{
	width:100%;
	text-align:center;
	padding-top:2em;
	padding-bottom:3em;
}

.journal-matrix-item {
	width:30%;
	padding-top:.25em;
	padding-bottom:.25em;
	margin-left:3%;
	margin-right:3%;
	text-align:center;
}

.book-promo-list {
	padding:0em;
	padding-bottom:0.25em;
	margin:0 auto 1em auto;
	text-align:center;
	width:85%;
	color:#888;
}
.block-link {
	
}

.book-promo {
	clear:both;
	padding-top:2em;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}

.book-matrix {
	overflow:hidden;
	margin-top:1.5em;
}

.book-matrix-item {
	float:left;
	width:30%;
	padding-top:2em;
	margin-left:1.5%;
	margin-right:1.5%;
	text-align:center;
	list-style:none;
}

.book-promo-cover {
/* 	width:68.75%; */
	width:50%;
}

.first {
	padding-top:0;
	margin-top:0;
}

.book-promo-title {
	padding-top:13px;
	margin-bottom:0;
	margin-left:auto;
	margin-right:auto;
	width:90%;
}

.book-promo-author {
	font-style:italic;
	margin-left:auto;
	margin-right:auto;
	color:black;
	width:90%;
}

.book-header-author {
	padding:0;
	margin:0;
	linehieght:0.5em;
}

.book-header-series {
	margin-top:0.5em;
}
.book-header-license {
	padding:0;
	margin-top:0;
	line-height:0.1em;
}

#book-header {
	margin-bottom:1.5em;
}

.book-header-menubar {
/* 	margin-left:auto;
	margin-right:auto;
	width:90%; */
	text-align:right;
	padding:0 0 2em 0.1em;
	font-size:85%;
}

.book-header-menubar li {
}

.author-bio {
	clear:both;
	margin-top:1.5em;
}

.design-credit {
	clear:both;
	margin-top:1.5em;
	padding-bottom:1.5em;
}

.isbn { /* Contents - named for role or content */
	padding-top:0.5em;
	padding-left:0.25em;
	padding-right:0.25em;
	margin-bottom:0;
	font-size:85%;
	line-height:150%;
}


/* Device specific layout s */
@media (max-width: 700px) { /* One column - Handhelds */
/* 	body {
		font-size:0.875em;
	} */
	
	#content,
	#content-wide,
	#page-navigation,
	#related-narrow,
	.third-x2,
	.third  {
		width:100%;
	}
	
	.book-promo {
	clear:none;
	float:left;
	padding-top:1.5em;
	margin-left:13px;
	margin-right:13px;
	text-align:center;
}
}
@media (max-width: 960px) { /* Two colums (1024?) Handhelds and Old Computers */
	#content-wide
	 {
		width:100%;
	}
	
	#related-narrow {
		display:none;
	}
}
@media (min-width: 1281px) { /* Three columns plus - Big Desktops */
	/* fixed width after this?  */
}