/*  

Theme Name: Journal

Theme URI: http://journal.thinkingmatters.org.nz
Description: Developed from Phoenix and inspired by the Amazing Grace theme them, by Vladimir Prelovac theme.
Author: Dominic Bnonn Tennant
Author URI: http://bnonn.thinkingmatters.org.nz

Brown paper norm: #9b7954;
Brown paper dark: #74543c;

*/

@import url('hacks.css') screen; /* include non-standard CSS3 (-moz and -webkit prefixes on border-radius etc) */
@import url('wp.css') screen; /* includes standard WordPress classes */
@media screen{

/* ======= GENERAL TEXT CLASSES WHICH CAN BE USED ANYWHERE ======= */

a:link,
a:visited{
   border-bottom:1px solid #d0bb94;
   text-decoration:none;
   color:#9b3700;
}

a:hover{
   border-bottom:1px solid #c88072;
}

.verse{ /* for rendering verse numbers in Bible passages differently from surrounding text */
   padding-right:0.1em;
   font-family:'Dejavu Sans Condensed',Arial,Helvetica,sans-serif;
   font-size:85%;
   color:#7c8257;
   font-style:italic;
   vertical-align:top;
}

a.footnote:link,
a.footnote:visited,
a.footnote:hover,
a.up:link,
a.up:visited,
a.up:hover{
   padding:0 2px 0 2px;
   border:none;
   background-color:#fff;
   vertical-align:top;
   font-size:9px;
   color:#160800;
}

.error{ /* can't even remember where this is used */
   padding:2em 0 2em 0;
}

.sans{ /* easily specify standard sans-serif font */
   font-family:'Dejavu Sans Condensed',Arial,Helvetica,sans-serif;
}

.mono{ /* easily specify standard monospace font */
   font-family:'Dejavu Sans Mono','Lucida Console',monospace;
}


/* ======= GENERAL OTHER CLASSES WHICH CAN BE USED ANYWHERE ======= */

img{
   margin:.5em 1em .5em 0;
   padding:7px;
   border:1px solid #95744f;
   background-color:#c2b298;
}

img.plain{
   padding:none;
   border:none;
   background:none;
}

/* img.clear, img.notextwrap{
   display:block;
   clear:both;
   margin-bottom:2em;
} */

.left{ /* easier than float:left in a separate style declaration */
   float:left;
}

.right{ /* easier than float:right in a separate style declaration */
   float:right;
}

.hidden{ /* easier than display:none in a separate style declaration */
   display:none;
}

.clear{
   clear:both;
}

.edit{ /* specifies the look of "edit" buttons on single posts */
   float:right; 
}

.edit a:link,
.edit a:visited{
   padding:5px;
   border:none;
   font:11px 'Dejavu Sans Condensed',Arial,Helvetica,sans-serif;
   color:#9b3700;
}

.edit a:hover{
   border:none;
   background-color:#9b3700;
   color:#eceddd;
}

/* ======= BASIC PAGE OUTLINE ======= */

body{
   margin:0;
   padding:0;
   background-color:#eceddd;
   font-family:'Dejavu Serif Condensed',Georgia,serif;
   font-size:62.5%; /* resets 1em to 10px */
}

#blog_wrapper{ /* container element for all other page elements */
   width:100%;
   height:100%;
   margin:0 auto;
}


/* ======= TOP MENU BAR ======= */

#blog_header_menu_bar{ /* complete bar with drop-down menus */
   position:fixed;
   height:40px;
   width:100%;
   top:0;
   left:0;
   margin:0;
   padding:0;
   background-color:#160800;
   border-bottom:1px solid #854500;
   opacity:0.8;
   z-index:2;
}

#search{ /* element which contains the search form fields */
   position:absolute;
   top:6px;
   right:10px;
   height:16px;
   padding:5px 3px 5px 5px;
   z-index:3;
}

ul#blog_menu_dropdown{ /* all dropdown menus are category listings; this is the listing on the top bar */
   width:100%;
   font:small 'Dejavu Sans Condensed',Arial,Helvetica,sans-serif;
   color:#fff;
}

ul#blog_menu_dropdown li{ /* links which expand into menus on the top bar are list items */
   float:left;
   padding:0 8px 0 0;
   list-style:square;
}

ul#blog_menu_dropdown a:link,
ul#blog_menu_dropdown a:visited{ /* links on the top bar */
   display:block;
   border:none;
   padding:10px 15px 5px 0;
   text-decoration:none;
   font-weight:bold;
   letter-spacing:-1px;
   color:#fff;
}

ul#blog_menu_dropdown a:hover{
   border:none;
   color:#fff;
}

ul#blog_menu_dropdown ul{ /* the actual drop-down menu */
   position:absolute;
   left:-999em;
   height:auto;
   width:170px;
   margin:0;
   padding:0;
   border-top:none;

   background-color:#160800;
   font-weight:normal;
   line-height:1;
   list-style:none;
}

ul#blog_menu_dropdown li li{ /* links on the menu are list items */
   width:168px;
   margin:0;
   padding:0;
   font:normal small 'Dejavu Sans Condensed',Arial,Helvetica,sans-serif;
   color:#fff;
   list-style:none;
}

ul#blog_menu_dropdown li li a:link,
ul#blog_menu_dropdown li li a:visited{ /* links on the menu */
   width:152px;
   margin:1px;
   border:none;
   padding:5px 8px 5px 8px;
   font-weight:normal;
   color:#fff;
}

ul#blog_menu_dropdown li li a:hover{
   border:none;
   background-color:#854500;
}

ul#blog_menu_dropdown li ul ul{ /* sub-menus on the menu */
   margin:-21px 0 0 150px;
   padding:0;
   background-color:#6d4903;
}

ul#blog_menu_dropdown li li:hover{
}

ul#blog_menu_dropdown li ul li:hover a,
ul#blog_menu_dropdown li ul li li:hover a,
ul#blog_menu_dropdown li ul li li li:hover a,
ul#blog_menu_dropdown li ul li li li:hover a{
   border:none;
   color:#fff;
}

ul#blog_menu_dropdown li:hover a{
   border:none;
   color:#fff;
}

ul#blog_menu_dropdown li:hover li a,
ul#blog_menu_dropdown li li:hover li a,
ul#blog_menu_dropdown li li li:hover li a,
ul#blog_menu_dropdown li li li li:hover li a{
}

ul#blog_menu_dropdown li:hover ul ul,
ul#blog_menu_dropdown li:hover ul ul ul,
ul#blog_menu_dropdown li:hover ul ul ul ul{
   left:-999em;
}

ul#blog_menu_dropdown li:hover ul,
ul#blog_menu_dropdown li li:hover ul,
ul#blog_menu_dropdown li li li:hover ul,
ul#blog_menu_dropdown li li li li:hover ul{
   left:auto;
}

ul#blog_menu_dropdown li:hover{
}


/* ======= HEADER SECTION ======= */

#blog_header{ /* contains the actual header, but not the top menu bar */
   width:100%;
   height:220px;
   left:0;
   margin:-10px 0 0 0;
   padding:0;
   border-bottom:15px solid #a99e84;
   background:url('http://thinkingmatters.org.nz/images/brown_paper.png');
   background-color:#9b7954;
   z-index:1;
}

#blog_header h1 a:link,
#blog_header h1 a:visited,
#blog_header h1 a:hover{ /* main heading with the name of the blog */
   float:left;
   height:190px;
   width:600px;
   margin:20px auto auto 10px;
   padding:0;
   border:none;
}

h1 img{
   border:none;
   padding:none;
   background:none;
}

#blog_header_links{
   position:absolute;
   top:190px;
   left:100px;
   width:800px;
}

#blog_header_links ul{
   margin:0;
}

#blog_header_links li{
   float:left;
   margin:0;
   padding:0;
   border:none;
   list-style:none;
}

#blog_header_links a:link,
#blog_header_links a:visited{
   height:22px;
   margin:0 4px 4px 4px;
   padding:9px 15px 10px 15px;
   border:none;
   border-radius:4px;
   background:url('http://thinkingmatters.org.nz/images/brown_paper_dark.png');
   font:12px 'Dejavu Sans Condensed',Arial,Helvetica,sans-serif;
   letter-spacing:1px;
   color:#d9d1bf;
}

#blog_header_links a:hover{
   background:none;
   background-color:#e9ead1;
   color:#683600;
}


/* ======= SIDEBAR ELEMENT ======= */

#sidebar{ /* main container for the sidebar */
   float:right;
   width:29%;
   margin:50px 10px auto 0;
   color:#642c06;
}

.sidebar_wrapper{ /* another, rather superfluous container for "futureproofing" */
}

#blog_about{ /* block on the front page, containing text saying what the blog is about */
   float:right;
   margin:-60px auto 40px auto;
   padding:40px 11px 30px 11px;
   border:1px dashed #b4d22b;
   border-top:none;
   border-bottom-right-radius:6px;
   border-bottom-left-radius:6px;
   background-color:#d3dcb9;
   text-align:justify;
}

#blog_about small{
   font:bold 11px 'Dejavu Sans Condensed',Arial,Helvetica,sans-serif;
   color:#6a793e;
   line-height:1.5;
}

.sidebar p{
   font:12px 'Dejavu Sans Condensed',Arial,Helvetica,sans-serif;

}

.sidebar h2{ /* this is the header tab attached to the sidebar itself, saying "recent comments" */
   width:99%;
   font:normal 12px 'Dejavu Sans Condensed',Arial,Helvetica,sans-serif;
   letter-spacing:1px;
   text-transform:uppercase;
   text-align:center;
}

.sidebar ul{ /* all entries in the sidebar are unordered list items contained in this element */
   margin-top:20px;
   padding:7px;
   border-radius:6px;
   background-color:#fff;
   font:12px 'Dejavu Sans Condensed',Arial,Helvetica,sans-serif;
   color:#7c8257;
}

.sidebar li{ /* this contains both the title-link to recent comments/related articles, and the excerpts from these which sit below them */
   margin:0;
   padding:0;
   list-style:none;
}

.sidebar li a:link,
.sidebar li a:visited{ /* contains the link to recent comments or related articles, depending on whether we're on the home page, or a single page */
   display:block;
   height:100%;
   border-bottom:1px solid #d0d5af;
   margin:0;
   padding:6px 6px 6px 12px;
   font:12px 'Dejavu Sans Condensed',Arial,Helvetica,sans-serif;
   color:#7c8257;
}

.sidebar li a:hover{
   background-color:#eef1c7;
   color:#5b6133;
   text-decoration:none;
}

.sidebar li small{ /* displays either excerpts from recent comments or related articles, below the title-links to these */
   display:block;
   padding:0.4em 1.2em 1em 1.2em;
   color:#777;
   letter-spacing:-1px;
   text-align:justify;
}

/* ======= MAIN DISPLAY COLUMN (POST EXCERPTS ON THE FRONT PAGE; ENTIRE POST ON SINGLE PAGES ======= */

#main{
   float:left;
   width:70%;
   margin:20px 0 100px auto;
   padding:0;
   text-align:justify;
   font:small 'Dejavu Serif Condensed',Georgia,serif;
   color:#222;
}

.main_index_excerpt_wrapper{ /* posts are listed as excerpts on the main index; each one is contained in an excerpt_wrapper element */
   margin:30px 100px 30px 70px;
   padding-bottom:15px;
}

.main_index_excerpt_wrapper h2 a:link,
.main_index_excerpt_wrapper h2 a:visited{ /* this is just to tweak the positions of titles on the main index */
   line-height:1.2;
}

.main_index_excerpt_wrapper h2 a:hover{
   border-bottom:1px solid #a99e84;
}

.main_index_excerpt{ /* this is the actual excerpt itself on the main index, below the title and tags and date */
   height:100%;
   margin:0;
   font-family:small 'Dejavu Serif Condensed',Georgia,serif;
   line-height:1.4;
   color:#222;
}

.entry_wrapper{ /* this element contains the complete content of entries on single post pages; it is not used on the main index */
   margin:30px 100px 20px 70px;
   padding:0;
}

.entry_header{
   margin:0 0 10px 0;
}

h2.entry_title{
   margin-bottom:15px;
   font:11px 'Dejavu Sans Condensed',Arial,Helvetica,sans-serif;
   color:#683600;
   text-transform:uppercase;
   letter-spacing:1px;
   font-style:italic;
}

h2.entry_title a:link,
h2.entry_title a:visited{ /* defines what entry titles look like. H2 is the highest header level for normal text, since H1 is regarded as an exclusive header for the blog title */
   border:none;
   font:15px 'Dejavu Sans Condensed',Arial,Helvetica,sans-serif;
   color:#683600;
   text-transform:uppercase;
   letter-spacing:1px;
}

h2.entry_title a:hover{
   border-bottom:1px dotted #683600;
}

.entry_metadata_for_print{ /* shows different metadata text for use with print.css */
   display:none;
}

.entry_metadata_category{
   display:block;
   width:100%;
   float:left;
   margin:-10px 20px 10px 0;
}

.entry_metadata_category a:link,
.entry_metadata_category a:visited{
   border:none;
   font:12px 'Dejavu Sans Condensed',Arial,Helvetica,sans-serif;
   color:#9b3700;
   text-transform:uppercase;
}

.entry_metadata_category a:hover{
   border-bottom:1px dotted #c88072;
}

.entry_metadata_time{
   display:block;
   width:100%;
   float:left;
   margin:0 15px 20px 0;
   padding:15px 0 0 0;
   border-top:1px solid #cbc2ae;
   font:12px 'Dejavu Sans Condensed',Arial,Helvetica,sans-serif;
   color:#296b01;
   letter-spacing:1px;
   text-transform:uppercase;
}

.entry_metadata_read{
   float:right;
}

.entry_metadata_read a:link,
.entry_metadata_read a:visited,
a.buttonlink:link,
a.buttonlink:visited{
   padding:5px;
   border-top:1px solid #eceddd;
   font:11px 'Dejavu Sans Condensed',Arial,Helvetica,sans-serif;
   color:#9b3700;
   text-transform:uppercase;
}

.entry_metadata_read a:hover,
a.buttonlink:hover{
   border-bottom:1px solid #9b3700;
   border-top:1px solid #9b3700;
   background-color:#9b3700;
   color:#eceddd;
}

.single_post_excerpt{ /* the excerpt which appears on a single post, above the main entry */
   float:left;
   margin:20px 40px 30px 40px;
   padding:0;
   border-bottom:1px solid #ccc;
   border-top:1px solid #ccc;
   font:12px 'Dejavu Serif Condensed',Georgia,serif;
   letter-spacing:1px;
   line-height:1.5;
   color:#333;
   font-style:italic;
}

.single_post_excerpt a:link,
.single_post_excerpt a:visited,
.single_post_excerpt a:hover{ /* excerpts can't contain links in Wordpress, but RefTagger converts any verse reference into one, so this subdues them to better fit into the rest of the text */
   border:none;
   background:none;
   color:#333;
}

.entry{
   font:13px 'Dejavu Serif Condensed',Georgia,serif;
   line-height:1.4;
   color:#222;
}

.entry h2{ /* this describes any normal level-2 headings in the text; frequently used for demarkating sections */
   display:block;
   padding:1.7em 2em 0.7em 0;
   font-family:'Dejavu Sans Condensed',Arial,Helvetica,sans-serif;
   font-weight:normal;
   font-size:130%;
   letter-spacing:-1px;
   color:#6d4903;
}

.entry h2 cite{
   font-size:75%;
}

.entry h3{ /* third level headings, separating subsections in posts */
   display:block;
   padding:15px 20px 8px 15px;
   font-family:'Dejavu Serif Condensed',Georgia,serif;
   font-weight:normal;
   font-size:120%;
   letter-spacing:-1px;
   color:#6d4903;
}

.entry h4{
   padding:10px 20px 2px 15px;
   font-size:98%;
   color:#6d4903;
}

.entry h6{ /* used specifically for notification text above the main body of an entry; usually used either for mentioning something about the entry itself, linking to an original copy if it was first posted offsite, or for providing a list of other parts in a series */
   display:block;
   clear:both;
   margin:3em 0 3em 0;
   padding:1em 1.2em 1em 1.5em;
   border:1px dashed #e7680a;
   background-color:#444;
   font:small 'Dejavu Sans Condensed',Arial,Helvetica,sans-serif;
   color:#ccc;
}

.entry p{
   margin:0.5em 0 0.5em 0;
}

.entry blockquote{ /* quoted text in a post */
   margin:20px 20px 20px 7px;
   padding:0 0 0 15px;
   line-height:1.25;
   font-size:95%;
   color:#6b5c53;
}

.entry ul,
.entry ol{ /* unorded and ordered lists */
   margin:20px;
   padding:0 0 0 10px;
   line-height:1.2;
}

ol.major,
ol.upper-roman{ /* shorthand way of creating lists with Roman numerals */
   list-style-type:upper-roman;
}

ol.minor,
ol.lower-roman{
   list-style-type:lower-roman;
}

ol.upper-alpha{ /* shorthand for alphabetized lists */
   list-style-type:upper-alpha;
}

ol.lower-alpha{
   list-style-type:lower-alpha;

}

.entry ol.footnotes{ /* used for creating a list of footnotes at the bottom of an entry */
   margin:3em 0 2em 0;
   padding-left:2em;
   border-top:1px solid #aaa;
   font:90% 'Dejavu Sans Condensed',Arial,Helvetica,sans-serif;
   text-align:left;
}

.entry li{
   margin:0;
   padding:6px 0 0 6px;
}

abbr,
acronym{ /* primarily used for quick explanations of Latin phrases or obscure words when mousing over */
   border-bottom:1px dotted #9b3700;
   cursor:help;
}

#next_and_previous{ /* the "further back" and "further forward" buttons at the bottom of the main index, and on search pages */
   margin:60px 100px 20px 70px;
   padding-top:0.6em;
   border-top:1px solid #a99e84;
}

#next_and_previous a:link,
#next_and_previous a:visited{ /* links for the above buttons */
   padding:5px;
   font:11px 'Dejavu Sans Condensed',Arial,Helvetica,sans-serif;
   color:#9b3700;
   text-transform:uppercase;
}

#next_and_previous a:hover{
   background-color:#9b3700;
   color:#eceddd;
}


/* ======= INPUT PROPERTIES ======= */

.searchform{ /* the actual search field where users type queries */
   float:right;
   height:16px;
   margin:0 0 auto auto;
   padding:3px;
   background-color:transparent;
   border:1px solid #854500;
   font:12px 'Dejavu Sans Condensed',Arial,Helvetica,sans-serif;
   color:#fff;
}

.searchform:focus{ /* highlight the field orange when selected */
   background-color:#854500;
}

.field{ /* define fields generically */
   background-color:#eee;
   border:1px solid #eee;
   font:small 'Dejavu Sans Condensed',Arial,Helvetica,sans-serif;
   color:#333;
}

/* .comments{
   background-color:#444;
   border:1px solid #ccc;
   color:#ccc;
} */

input.button,
a.button:link,
a.button:visited{ /* this defines the buttons used to dismiss "popup" overlays like those for searching, and category selection */
   margin:5px 5px 0 5px;
   padding:0.5em 1em 0.5em 1em;
   border:none;
   background-color:#444;
   font:small 'Dejavu Sans Condensed',Arial,Helvetica,sans-serif;
   color:#ddd;
}

input.button:hover,
a.button:hover{
   background-color:#e7680a;
   border:none;
   color:#eee;
   cursor:pointer;
}

a.button:link,
a.button:visited,
a.button:hover{
   float:right;
   margin-top:-2.5em;
}

#s{ /* necessary elements of the search function */
   width:180px;
}

#searchsubmit{ /* the button you click on to search */
   display:block;
   height:26px;
   width:20px;
   margin:-25px 2px 0 auto;
   padding:0;
   border:3px double #160800;
   background-color:#854500;
   color:#fff;
   line-height:0.5;
}


/* ======= FOOTER ELEMENT ======= */

#footer{ /* the container for the footer */
   float:left;
   width:70%;
   height:10px;
   margin:-90px 100px 0 auto;
}

#footer small{
   display:block;
   margin:0 130px 0 70px;
   font:9px 'Dejavu Serif Condensed',Georgia,serif;
   text-align:center;
   letter-spacing:1px;
   text-transform:uppercase;
   color:#222;
}

/* ======= OVERLAY ELEMENTS WHICH APPEAR WHEN FOOTER BUTTONS ARE CLICKED ======= */

.fullscreen{ /* this is the element which obscures the whole page behind a dark veneer, over which the actual messages and so on are superimposed */
   position:fixed;
   width:100%;
   height:100%;
   top:0;
   left:0;
   margin:0;
   padding:0;
   background-color:#160800;
   opacity:0.55;
   z-index:1;
}

.overlay_message_wrapper{ /* the container for the whole message; used for positioning purposes mostly */
   position:fixed;
   top:15%;
   left:11%;
   height:70%;
   width:65%;
   margin:auto;
   z-index:2;
}

.overlay_message{ /* container for the message which will appear overlaid */
   width:100%;
   margin:0;
   padding:1em 5em 5em 5em;
   border:2px solid #fff;
   background-color:#eceddd;
   background:url('http://thinkingmatters.org.nz/images/brown_paper_light.png');
   opacity:0.9;
}

.overlay_message h2{ /* the title of the overlay */
   width:90%;
   padding:2em 0 0.4em 0;
   font:20px 'Dejavu Sans Condensed',Arial,Helvetica,sans-serif;
   color:#683600;
   opacity:1;
}

.overlay_message p{ /* the text of the overlay */
   width:100%;
   margin:0 2em 2em 0;
   padding:1em 1em 1em 0;
   border-top:1px solid #cbc2ae;
   font:13px 'Dejavu Sans Condensed',Arial,Helvetica,sans-serif;
   color:#111;
   line-height:130%;
   opacity:1;
}

.overlay_message a.overlay_message_button:link,
.overlay_message a.overlay_message_button:visited{ /* link buttons which appear at the bottom; usually "OK" or "close" */
   position:relative;
   margin:0 -1em -1em 1.5em;
   padding:0.7em 1.7em 0.7em 1.7em;
   border-top:none;
   font:small 'Dejavu Sans Condensed',Arial,Helvetica,sans-serif;
   opacity:1;
}

.overlay_message a.overlay_message_button:hover{
}

} /* closes the opening media-type declaration brace */