/*
Goldilocks Approach to Responsive Web Design Boilerplate

Author: Design by Front - @designbyfront
Version: 0.1
URL: http://www.goldilocksapproach.com
----------------------------------------------------------------------------------------

CONTENTS - GLOBAL.CSS
-----------------------------------------
1. RESET
2. ROOT
3. CORE TYPOGRAPHY
4. LINKS
5. GLOBAL LAYOUT & GLOBAL CUSTOM TYPOGRAPHY
6. CUSTOM LAYOUT & TYPOGRAPHY (Baby bear)
7. BROWSER AND NON-SEMANTIC STYLING

CONTENTS - LAYOUT.CSS
-----------------------------------------
8. CUSTOM LAYOUT & TYPOGRAPHY (Daddy bear)
9. CUSTOM LAYOUT & TYPOGRAPHY (Mummy bear)

*/


/* 1. 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, ins, kbd, q, s, samp,
small, strike, strong, sub, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size:100%;
  font: inherit;
  vertical-align: baseline;
  }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
  }
  
  
/* 2. ROOT
----------------------------------------------------------------------------------------*/
html { 
  overflow-y: scroll;
  background: #FFF;
  }

/* /ht Ethan Marcotte - http://front.ie/l8rJaA */
img, embed, object, video { max-width: 100%; }
.ie6 img.full, .ie6 object.full, .ie6 embed, .ie6 video { width: 100%; }


/* 3. CORE TYPOGRAPHY
----------------------------------------------------------------------------------------*/
body {
  font-family: calibri, arial, verdana, sans-serif;
  font-size: 1em;
  line-height: 1.618em;
  color: #333;
  }

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 0.809em;
  line-height: 140%;
  }

/*this styles the container for page h2. Because the element above is floated and overflow can't be used, use clear:left to end float. Unfortunately the gap this creates to the header is a bit large*/

div.title {
clear:left;
padding:0em;
margin:0em;
margin-top:0em;
padding-top:0em;
height:1.6em;
  
}
sup {
    vertical-align: super;
    font-size: smaller;
}
.title h2 {
  
  
  font-size:1.6em;
  line-height:100%;
  padding:0em;
  margin:0em;
  
}


p, ul, ol, dl, blockquote {
    font-size: 1em;
    line-height: 1.618em;
    margin-bottom: 1.618em; 
    max-width: 30em; /* Optimal width for long-form text */
    
  }
    
ul { list-style-type: disc; margin-left: 1.618em; }
ol { list-style-type: decimal; margin-left: 1.618em; }
nav ul, nav ol { list-style: none; margin: 0; padding: 0;}

b, strong { font-weight: bold; }
i, em { font-style: italic; }
small { font-size: 80%; }


/* 4. LINKS
----------------------------------------------------------------------------------------*/
a, a:visited { outline: none; color: #439BBD; text-decoration: underline; }  
a:hover { outline: none; text-decoration:none; }  
a:active, a:focus { outline: none; }


/* 5. GLOBAL LAYOUT & GLOBAL CUSTOM TYPOGRAPHY
----------------------------------------------------------------------------------------*/

/* *********************************************************************************************** */
/* *********************************************************************************************** */
/* *********************************************************************************************** */
/* *********************************************************************************************** */












/* 6. CUSTOM LAYOUT & TYPOGRAPHY (Baby bear)

This defines the mobile layout.

See layout.css for overrides to style larger versions

----------------------------------------------------------------------------------------*/


body {
	
background-color:#efefef;
font-family: calibri, arial, verdana, sans-serif;

}



.boilerplate {
	
	display:none;
}

/*Hide skipnav*/
a#skipnav {position:absolute; left:-200000px;}
a#skipnav:focus, a#skipnav:active {position: absolute; left:0; border: 0 solid black; font-size: 125%}

/* addthis plug inserts social media buttons below post. Styling is applied via classes defined in plugin. Use view source to discover them
 * this margin positions buttons better */






/* special classes */

/* styles to support WP image alignment feature in the editor */

.alignleft {
   margin-right:1.2em; 
  float:left;  
}


.alignright {
    
  float:right;  
   margin-left:1.2em;  
}

/*styles for pagination */


.nav-next {
  
  margin-right:50px;
  margin-top:-30px;
  color:#b11c04;
    
}

.nav-next a {

color:#b11c04;	
}

.nav-previous{
  
  
  margin-top:-30px;
  
    
}

.nav-previous a {

color:#b11c04;	
}


/* header styling */


noscript {
  
  
}


/* wrapper for whole header */
#container { 
     
    border:0px solid green;
    padding: 0.809em;
    padding-left:0.1em;
    padding-right:0.1em;
    padding-top:0;
    max-width: 30em;
    margin: auto;
  }

aside { width: 100%; }


header {
    
    
   border:0px solid blue;
   padding:0.809em;
   padding-left:0.1em;
   padding-right:0.1em;
   padding-top:0.0em;
   padding-bottom:0.0em;
    
    
}



#container header #headdiv {
    
 
 height:4.4em;
 /*background-color:rgb(153,32,13); */
 background-color:#E28432;
 margin:0;
 padding: 0;
 padding-top:0;
 
}

/* nao logo and link to mainsite not present in mobile version - see layout.css for large screen layout */
#container header #headdiv  #naologo {
  
  display:none;
  /*height:30px;
  width:100px; */
}


/* smartphone menu button - this is not present in larger screens */
#container header #headdiv #menubutton {
  
 
 margin-left:0.4em;
 margin-right:0.4em;
 margin-top:0.4em;
 margin-bottom: 0em;
 float:left;
 width:2.7em;
 height:2.5em;
 border:1px solid #000;
 background-color:#000;
 color:#fefefe;
 padding:0.3em;
 padding-bottom:0.6em;
 list-style-type:none;
 text-decoration:none; 
   
}

/* fake 3 line graphic illusion */
#container header #menubutton .menubar{
height:6px;
width:90%;
margin-left:5%;
border-bottom:2px solid white;

}


/* list-item contains div that is drop down menu that appears when pressed */
#container header #menubutton a{
  
  text-decoration: none;
  color:#efefef;
  display:block;
  font-size:0.8em;
  padding-left:0.3em;
  
}


#container header #menubutton a:hover{
  
  text-decoration: none;
  color:#efefef;
  display:block;
  font-size:0.8em;
  padding-left:0.3em;
  
}

#container header #menubutton a:visited{
  
  text-decoration: none;
  color:#efefef;
  display:block;
  font-size:0.8em;
  padding-left:0.3em;
  
}



/* end special mobile menu button code */



/* main site title*/
 #container header #headdiv  #blogname {
    
    font-size: 1.8em;
    color:#efefef;
    padding:0;
    padding-top:0.4em;
    margin:0;
    margin-top:0em;
    padding-left:0em;
    margin-left:0em;
    margin-bottom:0.0em;
    font-family: calibri, arial, sans-serif;
    
    
    
    
}

.search-form label{
  color:#fff;
}

#search-results-box {
	padding: 10px 25px;
    background-color: #fff;
    margin-right: 30px;
}



/* WP generated menu that hangs below mobile menu button - hide by default */

#container header li ul#menu-headermenu {
  
  display:none;
  background-color:#000;
  width:15em;
  padding:0.5em;
  line-height:300%;
  position:relative;
  margin-left:-0.3em;
  z-index:+5000000;
  list-style-type:none;
  
  
}




#container header li:hover ul#menu-headermenu li a:hover{
text-decoration: underline;
color:#efefef;

}

/* end WP generated mobile drop down menu code */


#headdivmenu {
  
    clear:both;
    display:none;
    background-color:#000;
    height:3em;
    width:100%;    
    margin:0;
    
    
  
  
  }

#container header #headdiv #headdivmenu li {
    
 float:left;
 list-style-type:none;
    
}

#container header #headdiv #headdivmenu a {


color:#fff;
padding-left: 1em;
font-family: calibri, arial, verdana, sans-serif;
font-size:0.9em;
line-height:100%;
text-decoration:none;
}


#container header #headdiv #headdivmenu a:hover {

color:yellow;
padding-left: 1em;
font-family: calibri, arial, verdana, sans-serif;
font-size:0.9em;
line-height:100%;
text-decoration:underline;
}


/* end header */




#container #cookiereports-badge {
  
 height:50px;
 width:100%;
 background-color:orange;
 position:fixed;
 bottom:0%;
 left:0%;
  
}

#container #cookiereports-badge a {


color:#fefefe;
line-height:200%;
font-size:120%

}


#container #cookiereports-badge a span {

display:inline;
margin-left:1em;


}




#container #cookiereports-badge a img {

display:none;

}


#CookieReportsButton {

border:2px red solid!important;

right:0%!important;

bottom:0%!important;
}







/* main block */

#main {
    
     /*margin-top:0.809em;*/
     margin-top:0.0em;
     border:0px solid red;
     padding:0.809em;
     padding-left:0.1em;
     padding-right:0.1em;
     padding-top:1em;
     
    
    
}





#leftcolumn {
    
  display:none;
  margin-top:0.809em;
  border:0px dotted purple;
  padding:0.809em; 
    
    
    
}


#middlecolumn  {
    
  margin-top:0.1em;
  border:0px dotted brown;
  padding:0.809em;
  padding-top:0.1em;
  padding-left:0.1em;
  padding-right:0.1em;
  background-color: #efefef;

    
}


/*posts*/


#container #main #middlecolumn #art {
  margin:0;
  margin-left:0px;
  margin-top:2em;
  background-color: #efefef;
  list-style-type:none;
}

/*post title*/
#container #main #middlecolumn #art .line1 {
 border:0px solid #000;
 border-bottom:0px;
 padding:1em;
 margin:0;
 font-size:1em;
 background-color:rgb(153,32,13);
 /*margin-right:1.4em;*/
 margin-right:0.1em;
 
    
}

/* post body */
#container #main #middlecolumn #art .line2 {
    
border:0 solid #000;
border-top:0;
margin-bottom:3em;
padding:1em;
margin-left:0;
font-size:1em;
background-color:#fff;
/*margin-right:1.4em;*/
margin-right:0.1em;
line-height:140%;
}


#container #main #middlecolumn #art .line1 img, #container #main #middlecolumn #art .line2 img {
    
 
 /*max-height:300px;*/
 padding:0;
 /* padding-bottom:1em;
 width:99%; removed as smaller images are being distorted*/
}

#container #main #middlecolumn #art .line1 p, #art .line2 p{
    
 font-size:1em;
 padding:0.3em;
 line-height:130%;
 font-family: arial, sans-serif;
}


   


#container #main #middlecolumn #art .line1 .blogtitle {
    
    font-size:1.3em;
    color:#fff;
    text-decoration:none;
    
}


#container #main #middlecolumn #art .line1 .blogtitle a {
    
    font-size:1.3em;
    color:#fff;
    text-decoration:none;    
}


#container #main #middlecolumn #art .line1 .blogtitle a:visited {
    
    font-size:1.3em;
    color:#ddd;
    text-decoration:none;
    
}

#container #main #middlecolumn #art .line1  .blogtitle a:active {
    
    font-size:1.3em;
    color:#ddd;
    text-decoration:none;
    
}

#container #main #middlecolumn #art .line1  .blogtitle:hover {
    
    font-size:1.3em;
    color:#ddd;
    text-decoration:underline;
    
}

#container #main #middlecolumn #art .postedbystyle {
/* controls styling of date and author at beginning of post */    
    
    margin-bottom: 1em;
}


#container #main #middlecolumn #art  .topicsstyle p {
/* styles topics links at end of post */    
 
 
 font-size:0.9em;
 
    
}

#container #main #middlecolumn #art  .topicsstyle a {
/* styles topics links at end of post */    
 
 margin-top:1em;
 margin-bottom:0.3em;
 color:#b11c04;
 font-size:0.9em;
 text-decoration:none;
 
    
}

#container #main #middlecolumn #art .topicsstyle a:hover  {
/* styles topics links at end of post */    
 
 margin-top:1em;
 margin-bottom:0.3em;
 color:blue;
 font-size:0.9em;
 text-decoration:underline;
 
    
}


#container #main #middlecolumn #art h3 {
    
    font-size:1.1em;
    margin:1em;
    margin-left:0;
}





/* for page template */


#container #main #middlecolumn #pagecontent {
/* area to hold the_content in pages */

background-color:#ffffff;
  
}


#container #main #middlecolumn #pagecontent h2 {

  background-color:#ffffff;
}


#container #main #middlecolumn #pagecontent p {

background-color:#ffffff;
        
  
}


#rightcolumn {


  margin-top:0.809em;
  border:0px dotted orange;
  padding:0.809em;
  padding-left:0.1em;
  padding-right:0.1em;


}


#container #main #rightcolumn h3 {
padding:0 0 10px 17px;
margin:0;
font-style:italic;
color:#fff;
}

#container #main #rightcolumn p {

padding:0 17px 14px 17px;
margin:0;
color:#fff;

}





/* .dsidebar is class applied to the UL of a widget */
#container #main #rightcolumn .dsidebar {    

border:0 solid black;
background-color:#fff;
margin:0;
margin-top:2em;
padding:0;
padding-bottom:1em;
list-style-type:none;
      
}


/* .dsidebar is class applied to the UL of a widget. .dsidebar li is each li within a sidebar  */
#container #main #rightcolumn .dsidebar li {

list-style-type:none;
font-size:1em;
padding-left:0;
line-height:200%;
font-family:arial, sans-serif;

	
}


/* .dsidebar is class applied to the UL of a widget. .dsidebar li a is each link within a li in a sidebar  */
#container #main #rightcolumn .dsidebar li a{

color:#b11c04;
font-size:1em;
font-family:arial, sans-serif;
	
}

#container #main #rightcolumn .dsidebar li a:visited{

color:#660e00;	
	
}







/* widget_archive is a class applied to each li within a .dsidebar */

#container #main #rightcolumn .dsidebar li.widget_archive  {
    font-size:1.0em;
    color:#888;
    border:0px solid #000;
    

}


/* widget_archive a is the links within each li  within a .dsidebar classed widget UL*/
#container #main #rightcolumn .dsidebar li.widget_archive a {
    
    
    font-family:arial, sans-serif;
    font-size:1.0em;    
    padding-left:0px;
    margin-left:0;
    line-height:200%;    
    
}


/* widgettitle is a class applied to each h2 within a .dsidebar widget*/

#container #main #rightcolumn .dsidebar .widgettitle  {
    
    display:block;
    font-family: arial, sans-serif;
    font-size:1em!important;
    color:#fff!important;
    font-weight:bold;
    padding:0.7em 1em 0.7em 1em;
    padding-right:0;
    margin-bottom:0.5em;
    background-color:rgb(153, 32, 13);
    height:1.6em;
    
}



/* .textwidget refers to divs with a class of .textwidget that are inside widget ULs with a .dsidebar class    */
#container #main #rightcolumn .dsidebar .textwidget {
    
    
    padding:0;
    
}


/* .textwidget refers to p tags inside divs with a class of .textwidget that are inside widget ULs with a .dsidebar class    */

#container #main #rightcolumn .dsidebar .textwidget p {
    
    
    color:#000;
    padding:1em;
    font-size:1em;
    line-height:130%;
    font-family:arial, sans-serif;
}



/* #authorslist is a div wrapped around a .dsidebar UL widget */

#container #main #rightcolumn #tagcloudlist .dsidebar .wp-tag-cloud{    

border:0 solid black;
background-color:#fff;
margin:0;
margin-top:0em;
padding:0;
padding-bottom:1em;
padding-top:0.5em;
list-style-type:none;
      
}
html.js body div#container.cf div#main div#rightcolumn.hometemplate div#tagcloudlist ul.wp-tag-cloud { margin-left: 0;}
/* delete the padding from left in the block in sidebar - tag cloud  */

#container #main #rightcolumn #authorslist .widgettitle  {
    
    display:block;
    font-family: arial, sans-serif;
    font-size:1em!important;
    color:#fff!important;
    font-weight:bold;
    padding:0.7em;
    padding-right:0;
    margin-bottom:0.5em;
    background-color:rgb(153, 32, 13);
    height:1.6em;
    
}





#container #main #rightcolumn #authorslist li {
    
    
    font-family:arial, sans-serif;
    line-height:200%;
    font-size:1.0em;
       
}


#container #main #rightcolumn #authorslist li a {
    
    
    font-family:arial, sans-serif;
    line-height:200%;
    font-size:1.0em;
    padding-left:1em;
    
}


#container #main #rightcolumn #authorslist li a:visited {
    
    
    font-family:arial, sans-serif;
    line-height:200%;
    font-size:1.0em;
    padding-left:1em;
    
}


/*hide unused widgets*/
#dsidebar-middle11,#dsidebar-left10 {
    
    
    display:none;
}




/* class applied to category listing widgets by WP 
.cat-item {
 
 border:dashed 0px yellow;
 padding:0;
 padding-left:10px;
 margin:0;
 margin-bottom:5px;
    
    
}

.cat-item a {
    
    font-family:arial, sans-serif;
    font-size:1em;
    
    padding-left:0px;
    line-height:150%;
    
    
}


*/




#container footer {
	

clear:both;
background-color:#000;
text-align:right;
margin:0;
margin-bottom:50px;
overflow:auto;
height:4em;
max-width:29.8em;
}

#container footer #footdiv {

background-color:#000;
margin:0;

padding-top:0.8em;

	
}

#container footer ul {

border:0 solid pink;
padding-top:0;
padding-bottom:0;

margin-top:0;

margin-bottom:0;
margin-left:5em;

}	

#container footer li {
	
float:right;
margin-right:2em;

list-style-type:none;

	
}



#container footer a:link, #container footer a:visited, #container footer a:active {

font-weight:bold;
font-family: calibri, arial, verdana, sans-serif;
font-size:0.9em;
padding:0 4px 0 8px;
color:#fff;
border-left:solid 0 #fff;
text-decoration:none;

}


#container footer a:hover {

text-decoration:underline;

}










/* 7. BROWSER AND NON-SEMANTIC STYLING
----------------------------------------------------------------------------------------*/
.cf:before, .cf:after { content: ""; display: block; }
.cf:after { clear: both; }
.ie6 .cf { zoom: 1 }

/* Extras */

.archive-listing ul {
    list-style: none;
}

.cloud {
	text-align: center;
}

.cloud a {
	text-decoration: none;
}

.cloud a:hover {
    text-decoration: underline;
}

#showSearch {
    position: absolute;
    right: 20px;
    top: 50px;
    display: none;
    width: 13px;
    height: 13px;
    padding: 6px 27px;
    min-width: 13px;
    border-color: #abc0dc;
    border-radius: 2px;
    background-color: #abc0dc;
    background-image: none;
    filter: none;
}

input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
    background-color: #abc0dc !important;
    border-color: #abc0dc !important;
    background-image: none !important;
    filter: none !important;
}

li.year {
    color: #660e00;
    font-size: 16px;
    font-weight: bold;
    margin: 0.7em 0 0.7em 0;
}





@media screen and (min-width: 42.125em) and (max-width: 63.236em) {
    #nav-search {
        display: none;
        top: 90px !important;
        float: right;
    }
    #headdiv {
        /*height: 12em !important;*/
    }
    #headdivmenu {
        /*margin-top: 4.5em !important;*/
    }

    #main {
        margin-top: 2em !important;
    }
    #showSearch {
        display: block;
        top: 95px;
    }

}

@media screen and (max-width: 42.125em) {
    #nav-search {
        display: none;
        top: 70px !important;
        width: auto !important;
        margin-right: 20px;
        margin-left: 20px;
    }
    #container header #headdiv {
        height: 7.4em !important;
    }
    #showSearch {
        display: block;
    }
    #container header #headdiv #blogname {
        font-size: 1.6em;
    }
}