/* -------------- STRUCTURE */

html {
	max-height: 100000000px;
}
body {
	/*background-color: #dddddb;*/
	color: #000;
	background-image:  url('images/whitegridfade.jpg');
	background-repeat: no-repeat;
	background-color: #FFF; 
	width: 80%;
	/*This is size of background image*/
	max-width:1920px;
	margin: 0 auto;
	font-family: "Open Sans", Verdana, Arial, sans-serif;
	font-size: 100%;
}
header {
	padding: 5px 5px 5px 0px;
	color: #603;
}



#main {
	border: medium solid #CC4545;
	background-color:#EDEDF4;
	/*background-image:  url('images/Connected-White-Pattern-for-tech-websites.jpg'); */
	/*max width was disabled because doing so improved behavior with mobile devices*/
	/*max-width: 1000px;*/

	margin-top: 10px;
	margin-bottom: 10px;
	color: #000;
	padding-left: 1em;
	padding-right: 1em;
	padding-top: 0;
	max-width:1000px;
}


#title {
	font-size: 4em;
	color: #000;
}

#subtitle {
		font-size: 3em;
		color: #000;
}

#intro {
	 font-size:1.4em;
	 margin-bottom:1em;
	 margin-top:0.4em;
	 color: #000; 
}


/* -------------- FIGURES */




/*Removes border from QuikScan logo*/
a img {
border: none;
}

figure {
	margin-right: 0;
	margin-left: 0;/*min-width: 200px;*/
	/*max-width: 700px;*/
	text-align:center;
}

.responsive {
	max-width: 100%;
	height: auto;
	border: thin solid #000;
	width: 90%;
}

#RuskinImage {
border: thin solid #603;
}



figcaption {
	color: #039;
	font-family: "Open Sans", Verdana, Arial, sans-serif;
	text-align: left;
	font-size: 1em;
}
/* You can customize each figure with an individual id
#figure-1 {
	
}
*/

.graphicBorder {
	border: #333;
	border-width: thin;
	border-style: solid;
}



/* Prevents a graphic from floating outside of its module.*/
.clearBoth {
	clear: both;
}
/* -------------- LINKS including hover effect */


header a:link, header a:visited {
	/*color: inherit;*/
	color: #000;
	
}
header a:hover, header a:active {
	color: #268bd2;
}
section a:link, section a:visited, section a:active {
	color: #323d47;
	padding-bottom: 0;
	margin: 0;
	
}
section a:hover {
	/* border-bottom: 2px dotted #ccc; */
	/* color: #268bd2; */
	/* color: #0066FF; */
	padding-bottom: 1px;

}


#welcomeMessage {
	color: #000;
	padding-top: 0.8em;
	padding-bottom: 0;
}

	

/* -------------- TEXT */

/* Used to space out the links at the top and also in the TOC  */
.barspacer {
	margin-right: 2%;
}
.blueText {
	color: #36C;
}
header h1, header h2, header h3 {
	font-family: "Roboto", Verdana, Arial, sans-serif;
	padding-bottom: 6px;
	margin: 0 auto;
}
section h1, section h2, section h3 {
	color: #323d47;
	font-family: "Roboto", Verdana, Arial, sans-serif;
	padding-top: 0;
	padding-bottom: 0;
	margin-top: 0;
	margin-bottom: 0;
	font-weight: 700;
	text-align: left;
}
section h1 {
	font-size: 1.4em;
	color: #000;
}
section h2 {
	font-size: 1.1em;
	color: #603;
}
section h3 {
	font-size: 1em;
color: #603;
}



p, dd, ul {
	text-align: left;
	list-style-type: square;
}

dd, ul {
	line-height: 1.2em;
}
dt {
	font-weight: bold;
	line-height: 2em;
	text-align: left;
}





/* -------------- TABLE OF CONTENTS */



#TOC {
	border: medium solid #36C;
	/* background-image:  url('images/bgtileVeryLtBrLowSat.png'); */
	max-width: 700px;
	background-color:#fff;
	/*background-image: url('images/summarytile.jpg');*/
	margin-top: 0.5em;
	margin-bottom: 0.8em;
}
#TOC h1 a {
 font-family: font-family: "Roboto", Verdana, Arial, sans-serif;
	font-size: 1.3em;
	padding-bottom: 3px;
	border-bottom: 0;
	margin-left: 0.6em;
}

.TOC_annotation {
	color: #36C;
	font-size:20px;
	margin-left: 0.6em;
	margin-top:0;
	padding-top:0;
	margin-bottom:0;
	padding-bottom:0;
	
}


/*Adds some spacing before "TABLE OF CONTENT" heading at the top of the TOC    */
#TOC h1:first-of-type {
	padding-top: 0.4em;
}

/*   You can add extra space below last TOC entry by specifying h3 (like here) or h2, or h1, depending on what level of heading is the last TOC entry. Otherwise, comment this out */
#TOC h1:last-of-type {
	padding-bottom: 0.4em;
}



/* -------------- SPACING */


#document-content h2 {
	margin: 0;
}

.tightSpacer {
	padding-top:0;
	padding-bottom:0;
	margin-top: 0;
	margin-bottom:0;
}


.tightSpacerWBottom {
	padding-top: 0;
	padding-bottom: 0;
	margin-top: 0;
	margin-bottom: 1em;
}

.tightSpacerWTop {
	padding-top: 0;
	padding-bottom: 0;
	padding-top: 0;
	margin-top: 1em;
}

/* -------------------- Viewing Options CSS */



/*  This is a class that's added by the toggleQSClasses function in the file "toggleQSClasses.js It toggles high contrast on or off for the Preferences feature.*/
.contrast {
	background-color: #FFFF00;
	border-color: 000;
}
/*
/*  This is a class that's added by the toggleQSClasses function in the file "toggleQSClasses.js It toggles the larger font size on or off for the Preferences feature.*/
.fontGrow {
	zoom: 120%;
	line-height: 120%;
}
/*  - - - Special optional display of first letters of list items - - */

/* Used optionally to style the number (or letter)that begins all list items.*/
section > ul.summary > li:first-letter {
	font-size: 100%;
	/* color: 0066FF; */
	color: #603;
}
/*  Apply this class manually to override an instance of styling of the letter (or number) that begins all list items */
/*  <Looks like this: <section class="module collapsible expanded no-first-letter">    */
/*   Chrome  37.0.2062.120 m appears to occasionally block the special styling of the first letter for no apparent reason */
section.no-first-letter > ul.summary > li:first-letter {
	font-size: 100%;
	color: inherit;/* color: #603; */
}
/*
 * Styles for the Viewing Options section
 */
#prefChoice input {
	margin-right: 0.5em;
}
#prefChoice input, #prefChoice label {
	cursor: pointer;
}
#prefChoice input.enabled+label {
	color: #268bd2;
	font-weight: bold;
	font-size: 110%;
}
#prefChoice input[type="checkbox"] {
	width: 0px;
	opacity: 0;
	display: none;
}
#prefChoice input[type="checkbox"] + label:before {
	background-image: url("images/checkbox.png");
	display: inline-block;
	height: 19px;
	width: 19px;
	margin-left: 0.25em;
	vertical-align: middle;
	color: transparent;
	margin: 0.3em;
}
#prefChoice input[type="checkbox"] + label:before {
	background-position: 0px -19px;
	content: "not checked";
}
#prefChoice input[type="checkbox"]:checked + label:before {
	background-position: 0px 0px;
	background-image: url("images/checkbox.png");
	content: "checked";
}
/*  This class indents the links "High contrast is Off", "Large font On Off", and "Hover Helper is On" within the Preferences feature */
#prefChoice p a {
	padding-left: 6.5%;
}
#prefChoice {
	background-color: #FFFF00;
	padding-top: 5px;
}