/*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, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}

/*MAIN*/



body { 
	font-size: 1.05em;
	line-height: 1.25em;
	font-family: Garamond, "Book Antiqua", serif;
	background: #fdfbfb;
	color: #555;
	text-align: center;
	
}

.clear {
	clear: both;
} 

a:link {
	text-decoration: underline;
	color: #000;
}

a:visited {
	text-decoration: underline;
	color: #333;
}

a:hover {
	text-decoration: none;
}

a:active {
	text-decoration: none;
	color: #333;
}

a.fans, span.fans {
	background-color: #021f59;
	color: #f9f9f9;
	padding: 0 2px;
}

a.methods, span.methods {
	background-color: #4a2727;
	color: #f9f9f9;
	padding: 0 2px;
}

a.inter, span.inter {
	background-color: #5e5046;
	color: #f9f9f9;
	padding: 0 2px;
}

img {
	width: 100%;
	margin: 0;
	padding: 0;
}

.block-color {
	width: 98%;
	background-color: #ecf1fd;
	padding: 0 1% 1% 1%;
	margin: 1em 0;
}

.underline {
    color: #c60;
    border-bottom:1px dotted #333;
}​

.orange {
	background-color: #B95835;
}

.example {
	margin: auto;
	margin-top: 0;
	border: 1px solid #ccc;
	background-color: #fff;
	width: 98%;
	padding: 0 1% 0 1%;
	-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px; /* future proofing */
    -khtml-border-radius: 10px; /* for old Konqueror browsers */
}

.example p.ex {
	font-family: Helvetica, verdana, arial, sans-serif;
	color: #666;
	font-weight: bold;
	font-size: 1em;
	font-variant: small-caps;
	padding-top: .5%;
	margin: 0;
}
	
.example p.tweet {
	font-family: Helvetica, verdana, arial, sans-serif;
	color: #666;
	font-size: 1em;
}

#opencoding, #axialcoding {
	margin: auto;
	width: 90%;
	border: 1px solid #ccc;
	background-color: #fff;
	}
	
#axialcoding {
	padding: 5px;
	padding-bottom: 0;
}
	
.section p.large {
	text-align: center;
	font-size: 1.30em;
	line-height: 1em;
	color: #333;
}

p span.smallcaps {
	font-family: Helvetica, verdana, arial, sans-serif;
	font-weight: normal;
	font-size: .75em;
	font-variant: small-caps;
	margin-top: 0;
}


.blinks {
	width: 100%;
}

.blinks p.linkleft {
	float: left;
}

.blinks p.linkright {
	float: right;
	text-align: right;
	margin-left: 20%;
	}

/* min-width 320px begins*/

@media only screen and (min-width : 320px) { /* screens with a min width of 320px */

#header {
	/*background: #000 url('images/springsteen-bw-bg-2.png') no-repeat;*/
	width: 100%;
	border-top: 2px solid #828dab;
	border-bottom: 1px solid #828dab;
	padding: 0;
	}
	
#header img {
	float: none; 
	width: 100%;
	margin: 0;
	margin-bottom: 0;
	padding: 0;
}
	
#title-box {
	padding: .25em 0 .25em 0;
	width: 100%;
	margin: auto;
}

h1 {
	font-size: 1.15em;
	font-weight: normal;
	letter-spacing: .06em;
	line-height: 100%;
	display: block;
	color: #333;
}

h1 span {
	font-size: 75%;
}

h2 {
	font-size: .95em;
	font-weight: normal;
	letter-spacing: .06em;
	color: #333;
	}
	
h3 {
	text-align: left;
	font-size: 1.20em;
	color: #333;
	font-family: Helvetica, verdana, arial, sans-serif;
	font-variant: small-caps;
	}

h4 {
	text-align: left;
	font-family: "Book Antiqua", Palatino, "Times New Roman", serif;
	font-size: 1.25em;
	font-weight: bold;
	letter-spacing: .06em;
	line-height: 140%;
	margin-bottom: 0;
}

#nav {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 1000;
	text-align: center;
}

#menu-icon {
	width: 40px;
	height: 40px;
	background: #828dab url(images/guitar-sm.png) center center no-repeat;
	padding: 1px;
}

a:hover#menu-icon {
	background-color: #828dab;
	border-radius: 4px 4px 0 0;
}

#menu-icon {
	display:inline-block;
}

#nav ol, #nav:active ol { 
	display: none;
	position: absolute;
	padding: 5px;
	background: #ecf1fd;
	border: 1px solid #333;
	left: 0;
	top: 42px;
	width: 280px;
	border-radius: 0 4px 4px 4px;
	color: #333;
}

#nav:hover ol {
	display: block;
}

#nav ol {
	list-style: none;
}


/*#nav li {
	text-align: center;
	width: 100%;
	padding: 2px 0 2px 1em;
	margin: 0;
	font-size: .95em;
}*/

#nav li.setlist, #nav li.setlisttop {
	font-weight: bold;
	font-variant: normal;
	text-align: center;
	font-size: .75em;
	padding: 1px;
}

#nav li.setlist {
	padding-top: 7px;
}

#nav li {
	font-family: Helvetica, verdana, arial, sans-serif;
	color: #009;
	font-weight: bold;
	font-size: .75em;
	font-variant: small-caps;
	text-align: center;
	padding: 1px 0;
}	


#nav li a:link {
	font-weight: bold;
	color: #333;
	text-decoration: none;
}

#nav li a:visited {
	color: #333;
}

#nav li a:hover {
	text-decoration: underline;
}

#nav li a:active {
	text-decoration: none;
} 


.current {
	color: #2262AD;
}

.section {
	position: relative;
	margin: auto;
	margin-top: 10px;
	width: 96%;
	}
	
.section p {
	font-size: 1em;
	letter-spacing: .06em;
	line-height: 1.15em;
	text-align: justify;
	margin-bottom: .5em;
	margin-top: .5em;
}

/*.section p.large {
	text-align: center;
	font-size: 1em;
	line-height: 1em;
}

p span.smallcaps {
	font-family: Helvetica, verdana, arial, sans-serif;
	color: #666;
	font-weight: normal;
	font-size: .75em;
	font-variant: small-caps;
	margin-top: 0;
}*/

.section p.first {
	margin-top: 0;
}

.section blockquote p {
	margin: auto;
	font-size: 1em;
	letter-spacing: .06em;
	line-height: 1.15em;
	text-align: justify;
	width: 90%;
}

.section ol {
	list-style: decimal;
	font-size: 1em;
	letter-spacing: .06em;
	line-height: 1.15em;
	text-align: justify;
	margin-bottom: 1em;
	margin-left: 8%;
	font-family: Garamond, "Book Antiqua", serif;
}

.midsection {
	background-color: #000; 
	width: 100%;
	position: relative;
	border-top: 2px solid #828dab;
	border-bottom: 2px solid #828dab;
	margin-bottom: 1em;
}

.midsection img {
	max-width: 100%;
}

.callout-left {
	background-color: #fffaef;
	background-color: #ecf1fd;
	background-color: transparent;
	margin: auto;
	margin-bottom: 1em;
	width: 96%;
	border: 1px solid #828dab;
	padding: 4px;
	text-align: justify;
}

.callout-right {
	background-color: #fffaef;
	margin: auto;
	margin-bottom: 1em;
	width: 96%;
	border: 1px solid #828dab;
	padding: 4px;
	text-align: justify;
}

.callout-left p, .callout-right p {
	font-size: 1em;
	letter-spacing: .06em;
	line-height: 1.05em;
	text-align: justify;
	margin: 0;
}

.callout-left p.bold, .callout-right p.bold {
	font-family: Futura, Arial, sans-serif;
	text-transform: uppercase;
	font-weight: bold;
	margin-bottom: 0;
	padding-bottom: 0;
}

.callout-left ul, .callout-right ul {
	list-style: disc;
	margin-left: 5%;
}


img.call {
	margin-top: 2px;
	border: 1px solid #999;
	padding: 2px;
	background-color: transparent;
}


#footer {
	background-color: #ecf1fd;
	width: 100%;
	border-top: 1px solid #ccc;
	padding-bottom: 1em;
	
}

#footer p.foot {
	margin-left: 1%;
	margin-top: 1em;
	text-align: left;
	float: left;
	padding-left: 4.5em;
}

#footer p.cc {
	margin-top: 1em;
	margin-right: 1%;
	float: right;
	text-align: right;
	}

#footer img.valid {
	margin-right: 1%;
	float: right;
	margin-top: .5em;
}

	
} /* End min-width 320px */


@media only screen and (min-width : 768px) { /* screens with a min width of 768px */

#header {
	background: #000 url('images/springsteen-bw-bg-280.png') no-repeat center center;
	width: 100%;
	position: relative;
	height: 280px;
	border-top: 2px solid #828dab;
	border-bottom: 3px solid #828dab;
}

#header img {
	display: none;
}

#title-box {
	padding-top: 80px;
	width: 95%;
	margin: auto;
	position: relative;
	top: 0;
	left: 0;
}

h1 {
	color: #828dab;
	font-size: 1.75em;
}

h1 span {
	font-size: 75%;
}

h2 {
	color: #fffaef;
	font-size: 1em;
}

.section {
	position: relative;
	margin: auto;
	margin-top: 10px;
	width: 80%;
	}
	
.section p {
	font-size: 1.15em;
	letter-spacing: .06em;
	line-height: 1.45em;
	text-align: left;
	margin-bottom: .75em;
	margin-top: .75em;
}

.section blockquote p {
	font-size: 1.15em;
	letter-spacing: .06em;
	line-height: 1.25em;
}

.section ol {
	list-style: decimal;
	font-size: 1.15em;
	letter-spacing: .06em;
	line-height: 1.45em;
	text-align: justify;
	margin-bottom: 1.15em;
	font-family: Garamond, "Book Antiqua", serif;
}

.section ul.stuff {
	list-style: disc;
	margin-left: 20%;
	text-align: left;
	font-size: 1.15em;
	letter-spacing: .06em;
	line-height: 1.45em;
	text-align: justify;
	font-family: Garamond, "Book Antiqua", serif;
}

.section img.results {
	margin: auto;
	width: 90%;
	border: 1px solid #ccc;
	padding: 2px;
}

.callout-left {
	background-color: transparent;
	float: left;
	margin: 5px 5px 5px -10%;
	width: 40%;
	border: 1px solid #828dab;
	padding: 4px;
	text-align: justify;
}

.callout-right {
	background-color: transparent;
	float: right;
	margin: 5px -10% 5px 5px;
	width: 40%;
	border: 1px solid #828dab;
	padding: 4px;
	text-align: justify;
}

.callout-left p, .callout-right p {
	font-size: 1em;
	letter-spacing: .06em;
	line-height: 1.1em;
	text-align: justify;
	margin: 0;
}

.callout-left p.bold, .callout-right p.bold {
	font-family: Futura, Arial, sans-serif;
	text-transform: uppercase;
	font-weight: bold;
	margin-bottom: 0;
	padding-bottom: 0;
}


}

/* End min-width 800px */

/* start min-width 960px */

@media only screen and (min-width : 960px) { /* screens with a min width of 960px */

#header {
	background: #000 url('images/springsteen-bw-bg-2.png') no-repeat center center;
	width: 100%;
	position: relative;
	height: 400px;
	border-top: 2px solid #828dab;
	border-bottom: 3px solid #828dab;
}

#header img {
	display: none;
}

#title-box {
	padding-top: 120px;
	width: 95%;
	margin: auto;
	position: relative;
	top: 0;
	left: 0;
}

h1 {
	font-size: 2.25em;
	font-weight: normal;
	letter-spacing: .06em;
	line-height: 120%;
	display: block;
	color: #828dab;
}

h1 span {
	font-size: 75%;
}

h2 {
	font-size: 1.25em;
	font-weight: normal;
	letter-spacing: .06em;
	color: #fffaef;
	}
	
h3 {
	text-align: left;
	font-size: 1.20em;
	color: #000;
}

#inner-page-title {
	padding-top: 360px;
	font-size: 2.25em;
	font-weight: normal;
	letter-spacing: .06em;
	margin: auto;
	display: block;
		
}

#nav {
	position: fixed;
	top: 20px;
	left: 20px;
	z-index: 1000;
}

#menu-icon {
	width: 40px;
	height: 40px;
	background: #828dab url(images/guitar-sm.png) center center no-repeat;
	padding: 1px;
}

.section {
	position: relative;
	margin: auto;
	margin-top: 10px;
	width: 80%;
	max-width: 840px;
	padding: 10px;
	}
	
.section p {
	font-size: 1.25em;
	letter-spacing: .06em;
	line-height: 1.45em;
	text-align: left;
	margin-bottom: .75em;
	margin-top: .75em;
}

.section ol {
	list-style: decimal;
	font-size: 1.25em;
	letter-spacing: .06em;
	line-height: 1.45em;
	text-align: justify;
	margin-bottom: 1.15em;
	font-family: Garamond, "Book Antiqua", serif;
}

.section p.def {
	padding: 0 0 0 2%;
	margin-top: 0;
	margin-bottom: 0;
}

.journey {
	border: 1px solid #ccc;
	padding: 2px 2%;
	background-color: #fff;
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px; /* future proofing */
    -khtml-border-radius: 5px; /* for old Konqueror browsers */
}

.journey .jt {
	width: 99%;
	margin: 0 auto;
	border-bottom: 1px solid #009;
	padding: 0;
}

.journey p.jh {
	padding-bottom: 0;
	font-family: Garamond, "Book Antiqua", serif;
	color: #009;
	font-weight: bold;
	font-size: 1.25em;
	width: 100%;
	margin-bottom: 0;
}

.example {
	margin: auto;
	margin-top: .5em;
	margin-bottom: .5em;
	border: 1px solid #ccc;
	background-color: #fff;
	width: 75%;
	padding: 1.4%;
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px; /* future proofing */
    -khtml-border-radius: 5px; /* for old Konqueror browsers */
}

.journey .example {
	margin-top: 1em;
}

.orange {
	background: transparent url('images/orange-background.png') repeat;
	padding-left: .25em;
	padding-right: .25em;
	}

.example p.ex {
	font-family: Helvetica, verdana, arial, sans-serif;
	color: #666;
	font-weight: bold;
	font-size: 1em;
	font-variant: small-caps;
	padding-top: .5%;
	margin: 0;
}

.example p.tweet {
	font-family: Helvetica, verdana, arial, sans-serif;
	color: #666;
	font-size: 1em;
	margin: 0;
}

.midsection {
	background-color: #000; 
	width: 100%;
	border-top: 2px solid #828dab;
	border-bottom: 2px solid #828dab;
	margin-bottom: 1.15em;
	padding: 0;
	padding-bottom: 31.7965023847%;   /* 400/1258 * 100 */ /* h/t http://andyshora.com/css-image-container-padding-hack.html */
	position: relative;
	text-align: left;
		overflow: hidden;
}

.midsection img {
	width: 100%;
	position: absolute;
}

.callout-left {
	background-color: transparent;
	float: left;
	margin: 5px 4% 5px -10%;
	width: 40%;
	border: 1px solid #ccc;
	padding: 18px;
	text-align: justify;
}

.callout-right {
	background-color: transparent;
	float: right;
	margin: 5px -10% 5px 4%;
	width: 40%;
	border: 1px solid #ccc;
	padding: 18px;
	text-align: justify;
}

.callout-left p, .callout-right p {
	font-size: 1em;
	letter-spacing: .06em;
	line-height: 1.2em;
	text-align: justify;
	margin: 0;
}

.callout-left p.bold, .callout-right p.bold {
	font-family: Futura, Arial, sans-serif;
	text-transform: uppercase;
	font-weight: bold;
	margin-bottom: 0;
	padding-bottom: 0;
}

.side-image img {
    -webkit-transition: all 0.3s ease; /* Safari and Chrome */
    -webkit-transform-origin: top left;
  	-moz-transition: all 0.3s ease; /* Firefox */
    -moz-transform-origin: top left;
  	-o-transition: all 0.3s ease; /* IE 9 */
    -o-transform-origin: top left;
  	-ms-transition: all 0.3s ease; /* Opera */
    -ms-transform-origin: top left;
  	transition: all 0.3s ease;
}

.side-image:hover img {
    -webkit-transform:scale(1.75); /* Safari and Chrome */
    -moz-transform:scale(1.75); /* Firefox */
    -ms-transform:scale(1.75); /* IE 9 */
    -o-transform:scale(1.75); /* Opera */
     transform:scale(1.75);
}

#footer {
	background-color: #ecf1fd;
	width: 100%;
	border-top: 1px solid #ccc;
	padding-bottom: 1em;
}

#footer p.foot {
	margin-left: 1%;
	margin-top: 1em;
	text-align: left;
	float: left;
}

#footer p.cc {
	margin-top: 1em;
	margin-right: 1%;
	float: right;
	text-align: right;
	}

#footer img.valid {
	margin-right: 1%;
	float: right;
	margin-top: .5em;
}

}