/* =Notes
--------------------------------------------------------------------------
Hey, welcome in. This stylesheet uses rem values with a pixel
fallback, like how Mr Marcotte and Mr Snook recommend. Have a read
about them here:
http://snook.ca/archives/html_and_css/font-size-with-rem
http://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/

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

html { font-size: 62.5%; }

body {
	color: rgba(64, 68, 70, 0.95);
	background: #F6F6F6 url(bg-crossword.png) center center repeat;
	margin: 0px;
	padding: 0px;
}

div#wrapper {
	width: 100%;
}

div#core {  
    display: block;  
    clear: both;  
    margin-left: 250px;  
    margin-top: 52px;
    width: 550px;
}
  

nav#in-page {
display: block;
position: fixed;
top: 85px;
left: 40px;
width: 250px;
text-align: right;
}  

nav#in-page p {
width: 111px;
margin: 0px;
padding: 0px;
font-size: 1rem;
line-height: 30px;
line-height: 1.2;
font-family: 'Open Sans', Helvetica, sans-serif;
font-weight: 400;
}

nav#in-page p a {
color: rgba(88, 201, 66, 0.4);
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
}

nav#in-page p a:hover {
color: rgba(88, 201, 66, 0.85);
}

nav#in-page img {
position: absolute;
top: 2px;
margin-left: 5px;
}

nav#in-page ul {
list-style: none;
font-size: 14px;
font-size: 1rem;
line-height: 30px;
line-height: 2.1428571428;
font-family: 'Open Sans', Helvetica, sans-serif;
font-weight: 400;
width: 145px;
margin: 6px -2px;
padding: 0px;
}
  
nav#in-page ul li {
	display: inline;
}  
  
 
nav#in-page ul li a {
display: block;
color: rgba(64, 68, 70, 0.95);
background: none;
text-decoration: none;
transition: 1.2s;
-moz-transition: 1.2s;
-webkit-transition: 1.2s;
-o-transition: 1.2s;
}
  
nav#in-page ul li a:hover {
color: rgba(64, 68, 70, 1);
	background: rgba(197, 255, 152, 0.68);
	text-shadow: white 0 1px 0;
	transition: 0s;
	-moz-transition: 0s; /* Firefox 4 */
	-webkit-transition: 0s; /* Safari and Chrome */
	-o-transition: 0s; /* Opera */
	
}










   
p {
	margin: 0px;
	padding: 0px;
}  
  
section {  
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.8; 
	font-family: 'Open Sans', Helvetica, sans-serif;
	font-weight: normal;
	margin-bottom: 100px;
}

section strong {
	font-weight: 700;
	text-transform: uppercase;
}

section em {
	font-weight: 700;
	font-style: normal;
	background: rgba(197, 255, 152, 0.48);
	padding: 1px;
	margin: -1px;
}

 
section a {
	font-weight: 700;
	color: #58C942;
	text-decoration: none;
	rgba(221, 221, 221, 0.41) 2px 1px 2px;
	padding: 3px 7px;
	margin: -3px -7px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	transition: background 0.7s, color 0.7s;
	-moz-transition: background 0.7s, color 0.7s; /* Firefox 4 */
	-webkit-transition: background 0.7s, color 0.7s; /* Safari and Chrome */
	-o-transition: background 0.7s, color 0.7s; /* Opera */
} 

section a:hover {
	color: #3BAA26;
	background: rgba(197, 255, 152, 0.48);
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	padding: 3px 7px;
	margin: -3px -7px;
	transition: none;
	-moz-transition: none; /* Firefox 4 */
	-webkit-transition: none; /* Safari and Chrome */
	-o-transition: background 0 ease-in; /* Opera */
}

section a img {
	border: 10px solid rgba(197, 255, 152, 0.01);
	background: none !important;
	padding: 0x !important;
	margin: 0px !important;
}

section a img:hover {
border: 10px solid rgba(197, 255, 152, 0.48);
padding: 0px !important;
margin: 0px !important;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

section a.image {
background: none !important;
padding: 0px !important;
margin: 0px !important;
}

section a.image:hover {
background: none !important;
padding: 0px !important;
margin: 0px !important;
}


section#title {
margin-bottom: 40px;
}
 
#introduction {
margin: 80px 0px 90px 0px;
} 
 
section#opening-quote {
margin-bottom: 50px;
}  

section#gnostic {
margin-bottom: 120px;
}
  
  
section header {
	font-family: 'Yanone Kaffeesatz', serif;
	font-weight: bold;
	font-size: 66px;
	font-size: 6.6rem;
	text-shadow: rgba(124, 146, 119, 0.22) 2px 1px 2px;
	margin-bottom: 19px;
	line-height: 1;
	
}

section header#title {
font-size: 82px;
font-size: 8.2rem;
line-height: 0.8;
}

section header em {
	font-weight: 800;
	font-style: normal;
	color: #58C942;
	background: none;
}


h2 {
font-family: Dosis;
font-weight: 800;
font-size: 27px;
font-size: 2.7rem;
font-style: normal;
margin: 0px;
padding-top: 25px;
line-height: 1.2;
padding-bottom: 8px;
}

h3 {
	font-weight: 800;
	font-size: 23px;
	font-size: 2.3rem;
	margin-bottom: 0px;
	font-family: 'Yanone Kaffeesatz', serif
}


section p {
margin-bottom: 22px;
}

section span#number {
margin-left: -23px;
padding-right: 7px;
position: relative;
top: 1px;
}


section ol {
margin-left: -40px;
margin-bottom: 35px;
}

section ol li {
margin: 0px -20px 20px 0px;
list-style-type: none;
}

section ol li span#caps {
font-size: 12px;
font-size: 1.2rem;
text-transform: uppercase;
position: relative;
top: -2px;
}

section ul {
margin: 15px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

section ul li {
margin: 5px 0px;
list-style-type: disc;
}

aside {
font-size: 13px;
font-size: 1.3rem;
line-height: 1.6;
}

aside p {
margin-bottom: 8px;
}

blockquote {
margin: 0px 0px 0px -37px;
padding: 14px 0px 16px 25px;
font-family: Dosis, Helvetica, Arial, Sans-Serif;
font-weight: 200;
font-size: 24px;
font-size: 2.4rem;
border-left: rgba(197, 255, 152, 0.48) 25px solid;
background: rgba(197, 255, 152, 0.48);
line-height: 1.5;
}

blockquote.twitter-tweet {
margin: 0px;
padding: 0px;
font-family: inherit;
border-left: none;
background: none;
line-height: inherit;
}

cite {
font-family: Dosis;
font-weight: 500;
font-size: 17px;
font-size: 1.7rem;
font-style: normal;
}



footer {
width: 100%;
background: rgba(197, 255, 152, 0.48);
border-top: 1px silver solid;
padding: 20px 20px 40px 20px;
font-size: 12px;
font-size: 1.2rem;
line-height: 1.66666667; 
font-family: 'Open Sans', Helvetica, sans-serif;
font-weight: normal;
}

footer a {
font-weight: 700;
text-decoration: none;
color: #58C942;
padding: 3px 7px;
margin: -3px -7px;
}

footer a:hover {
text-decoration: underline;
}

div#left-border {
padding-left: 19px;
position: relative;
left: -16px;
}

div#left-border-wide {
border-left: 3px rgba(197, 255, 152, 0.22) solid;
padding-left: 19px;
position: relative;
left: -19px;
margin-bottom: 50px;
}

div#left-border-wide span#number {
margin-left: -33px;
padding-right: 5px;
position: relative;
top: 1px;
}

div.notes p {
margin-bottom: 0px;
}


p.sidebar {
float: right;
font-size: 11px;

}


p.tacit {
margin-top: 40px;
}

div#cv, div#brief {
background: #FFF;
padding: 45px;
font-size: 14px;
font-size: 1.4rem;
font-family: 'Vollkorn', Georgia, Serif;
border: 1px solid silver;
-moz-box-shadow:    6px 6px 14px 6px rgba(204, 204, 204, 0.52);;
-webkit-box-shadow: 6px 6px 14px 6px rgba(204, 204, 204, 0.52);;
box-shadow:         6px 6px 14px 6px rgba(204, 204, 204, 0.52);;
}



div#cv h4, div#brief h4 {
font-size: 23px;
font-size: 2.3rem;
text-transform: uppercase;
margin: 0px;
color: #3c3c3c;
}


div#cv h5 {
font-size: 16px;
font-size: 1.6rem;
margin: 10px 0px 0px 0px;
color: #161616;
font-style: italic;
padding-top: 25px;
}

div#brief h5 {
font-size: 19px;
font-size: 1.9rem;
margin: 10px 0px 0px 0px;
color: #161616;
font-style: italic;
padding-top: 25px;
line-height: 1.4
}

div#brief div#answer {
padding: 25px;
background: rgba(197, 255, 152, 0.22);
}

div#brief div#answer h5 {
font-family: Dosis, Helvetica, Arial, Sans-Serif;
font-weight: 800;
font-style: normal;
color: rgba(64, 68, 70, 0.95);
margin-top: 0px;
padding-top: 0px;
}


div#brief div#answer p {
font-size: 13px;
font-size: 1.3rem;
line-height: 1.6;
font-family: 'Open Sans', Helvetica, sans-serif;
font-weight: normal;
margin: 7px 0px;
}

section div#cv ol li {
margin: 0px 0px 14px 15px;
list-style-type: disc;
line-height: 1.5;
font-size: 14px;
font-size: 1.4rem;
}

div#brief p {
font-size: 13px;
font-size: 1.3rem;
line-height: 1.5;
}

section div#brief ul li {
margin: 0px 0px 7px 15px;
list-style-type: disc;
line-height: 1.5;
font-size: 13px;
font-size: 1.3rem;
}

div#brief ul li.first {
margin: -18px 0px 7px 15px;
}

div#gnostic {
font-family: 'Vollkorn', Georgia, Serif;
font-size: 14px;
font-size: 1.4rem;
margin: 0px 0px 20px 0px;
padding: 25px;
background: rgba(197, 255, 152, 0.48);
}

div#gnostic h5 {
font-size: 20px;
font-size: 2rem;
margin: 0px 0px 10px 0px;
color: #161616;
font-style: italic;
padding-top: 0px;
}

div#gnostic p {
margin-bottom: 10px;
}


p#word-count {
font-family: 'Vollkorn', Georgia, Serif;
font-size: 14px;
font-size: 1.4rem;
margin: -4px 0px 12px 0px;
}



   
/* clearfix */  

.clearfix:after {  
    content: ".";  
    display: block;  
    clear: both;  
    visibility: hidden;  
    line-height: 0;  
    height: 0;  
}  
.clearfix {  
    display: inline-block;  
}  
   
html[xmlns] .clearfix {  
    display: block;  
}  
* html .clearfix {  
    height: 1%;  
}  










/* adaptive layouts */  

@media (min-width: 955px) 
{
		body {background: #F6F6F6 url(bg-crossword.png) center center repeat;}
}

@media (max-width: 955px) 
{
		div#core {width: 460px;}
		section header, section header#title {font-size: 66px;font-size: 6.6rem;}
}


@media (max-width: 780px) 
{
		div#wrapper {width: auto;}
		div#core {width: 85%; max-width: 350px; margin: 30px auto;}
		nav#in-page {display:none;}

}


@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {

div#wrapper {width: auto !important;}
		div#core {width: 85% !important; margin: 30px auto !important;}
		section header, section header#title {font-size: 120px !important; font-size: 12rem !important;}
		section {font-size: 46px !important; font-size: 4.6rem !important;}
nav#in-page {display:none !important;}
h2, cite, div#gnostic, div#gnostic h5 {font-size: 46px !important; 4.6rem !important;}
blockquote {font-size: 46px !important; 4.6rem !important; font-weight: 400 !important;}
section ol li span#caps {font-size: 16px !important; font-size: 1.6rem !important;}
div#cv h4, div#brief h4 {font-size: 46px !important; 4.6rem !important;}
div#cv h5, div#brief h5 {font-size: 40px !important; 40rem !important;}
div#cv, div#cv ol li, div#brief p, aside {font-size: 36px !important; 3.6rem !important;}
footer {font-size: 30px !important; 3rem !important;}

}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
nav#in-page {display:none !important;}

}