/* -----------------------------------------
	Table of Contents: 

	Scale
	Tag Resets
	Normalize CSS
	Web Fonts
	Fluid Media
	Custom Styles
	Media Queries

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

/* -----------------------------------------
	Scale
----------------------------------------- */

/* 
font-size: 17px target / 16px default = 1.063em
line-height: 20px target / 16px font = 1.25em

Scale: 1.063 x 1.25 = 1.32875, round to 1.3 

3/4 scale = 0.975
1/2 scale = 0.65
1/4 scale = 0.325
*/


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

	Tag Resets

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

body,
div,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
th,
td,
article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	margin: 0;
	padding: 0;
	border: 0;
}


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

	Normalize CSS
	http://necolas.github.com/normalize.css/

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

html {
	height: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body {
	min-height: 100%;
	height:100%;
	font-size: 100%;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
audio,
canvas,
video {
	display: block;
}

iframe {
	border:none;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

pre {
	white-space: pre;
	white-space: pre-wrap;
	word-wrap: break-word;
}

b,
strong {
	font-weight: bold;
}

em {
	font-style: italic;
}

abbr[title] {
	border-bottom: 1px dotted;
}

textarea {
	overflow: auto;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* this is taken from an article about correcting a problem where Apple mobile devices wouldn't play iframe videos: */

a,
object,
input,
a:active,
a:focus,
input:active,
input:focus {
	outline:none;
}


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

	Web Fonts

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


@font-face {
	font-family:"lato";
	font-weight: normal;
	font-style: normal;
	src: url('../fonts/lato-regular-webfont.eot');
	src: url('../fonts/lato-regular-webfont.eot?#iefix') format('embedded-opentype'),
	     url('../fonts/lato-regular-webfont.svg#lato-regular') format('svg'),
	     url('../fonts/lato-regular-webfont.ttf') format('truetype'),
	     url('../fonts/lato-regular-webfont.woff') format('woff');
}

@font-face {
	font-family:"lato";
	font-weight: bold;
	font-style: normal;
	src: url('../fonts/lato-bold-webfont.eot');
	src: url('../fonts/lato-bold-webfont.eot?#iefix') format('embedded-opentype'),
	     url('../fonts/lato-bold-webfont.svg#lato-bold') format('svg'),
	     url('../fonts/lato-bold-webfont.ttf') format('truetype'),
	     url('../fonts/lato-bold-webfont.woff') format('woff');
}

@font-face {
	font-family:"lato";
	font-weight: normal;
	font-style: italic;
	src: url('../fonts/lato-italic-webfont.eot');
	src: url('../fonts/lato-italic-webfont.eot?#iefix') format('embedded-opentype'),
	     url('../fonts/lato-italic-webfont.svg#lato-italic') format('svg'),
	     url('../fonts/lato-italic-webfont.ttf') format('truetype'),
	     url('../fonts/lato-italic-webfont.woff') format('woff');
}

@font-face {
	font-family:"lato";
	font-weight: 300;
	font-style: italic;
	src: url('../fonts/lato-lightitalic-webfont.eot');
	src: url('../fonts/lato-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),
	     url('../fonts/lato-lightitalic-webfont.svg#lato-lightitalic') format('svg'),
	     url('../fonts/lato-lightitalic-webfont.ttf') format('truetype'),
	     url('../fonts/lato-lightitalic-webfont.woff') format('woff');
}

@font-face {
	font-family:"lato";
	font-weight: bold;
	font-style: italic;
	src: url('../fonts/lato-bolditalic-webfont.eot');
	src: url('../fonts/lato-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
	     url('../fonts/lato-bolditalic-webfont.svg#lato-bolditalic') format('svg'),
	     url('../fonts/lato-bolditalic-webfont.ttf') format('truetype'),
	     url('../fonts/lato-bolditalic-webfont.woff') format('woff');
}




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

	Fluid Media

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


figure {
	position: relative;
}

figure img,
figure object,
figure embed,
figure video,
figure iframe {
	display: block;
	max-width: 100%; 
	margin:.65em auto;
}

/* 
interpolation-mode
http://css-tricks.com/ie-fix-bicubic-scaling-for-images/
 */

img {
	border: 0;
	-ms-interpolation-mode: bicubic;
}


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

	Custom Styles

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


body {
	font-family:"lato",Arial,sans-serif;
	font-weight:normal;
 	line-height: 1.5em;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	*behavior: url('../js/boxsizing.htc');
}
/* Prefix the 'behavior' property with a star, so it will only be seen by IE6 & IE7, not by IE8+ who already implement box-sizing. The URL to the HTC file must be relative to your HTML(!) document, not relative to your CSS. That's why I'd advise you to use absolute paths like in the example. */

.container {
	/*position:relative;*/
	width:90%;
	padding:0 1em 1em;
	margin:1em auto;
}

.colorgrid {
	width:100%;
	max-width:1040px;
	/*max-width:960px;*/
	font-size: 1.2em;
	padding:0 1em;
	margin:0 auto;
}

.mission {
	width:55%;
	padding:1em;
	margin:1em auto;
}

.mission ol {
	list-style-position: outside;
}

header {
	text-align:right;
	/*margin-bottom:.65em;*/
	padding-right:.975em;
	/*background: #FFB300;*/
}

nav {
	font-weight: normal;
	/*color:#FFF;*/
	width:90%;
	padding:1em;
	margin:0 auto;
	/*background-image:url('../img/beta.png');*/
	/*background-repeat: no-repeat;*/
}

nav a {
	/*color:#FFF;*/
	font-style: italic;
	padding:0 8px;
}

nav a:hover,
nav a:active {
	/*color:#FFF;*/
	text-decoration: underline;
}

nav a img:hover,
nav a img:active {
	opacity: .6;
	text-decoration: underline;
}

h1 {
	text-align: center;
	font-size: 2.5em;
	line-height: 1.063;
	margin:.5em 0 .25em;
}

h2 {
	text-align: center;
	display:block;
	margin-top:.965em;
	margin-bottom:1.65em;
	font-size: 1.7em;
	font-weight: bold;
	/*color:#53290B;*/ /* dark brown like arguments */
}

/* orange start button(s) */
.orange {
	text-transform: uppercase;
	line-height: 1.8em;
	cursor:pointer;
	padding:1em;
	border-radius:20px;
	width: 190px;
	margin:4.65em auto;
	text-align: center;
	color:white;
	background: #FFB300;
	
}

/* Definition */
h3 {
	font-weight: normal;
	font-size: 1.1em;
	padding-top:1em;
	border-top:2px solid #CBBFB6; /* pale brown */
	margin-bottom:1em;
}

ol li h3 {
	border:none;
}


/* Pro-Con "One Side Says" headers */
h4 {
	border-top:2px solid #CBBFB6; /*pale brown*/
	padding-top:.365em;
	font-weight: bold;
	font-style:italic;
	font-size:1.1em;
	margin-top:1.965em;
	color:#8B4513; /* saddlebrown */
}

/* The arguments */
h5 {
	font-weight: bold;
	font-size:1em;
	line-height: 1.3;
	margin-bottom:.365em;
	color:#53290B; /* dark brown */
}

p {
	line-height: 1.3;
	margin-bottom: 1.4em;
}

#mission p {
	margin-bottom: 1.365em;
}

a,
a:hover,
a:active {
	color:#000;
	text-decoration: none;
}

.special-a:hover,
.special-a:active {
	text-decoration:underline;
}

ul {
	list-style-type: none;
	/*list-style-position: inside;*/
	list-style-position: outside;
	margin-bottom:1.965em;
	padding-left:1em;
	/*text-indent:-1em;*/
}

ul.vids {
	list-style-type: none;
}

.card {
	margin:1.65em auto 0;
	border:1px solid black;
	width:350px;
	height:200px;
	cursor:pointer;
	display:table;
}

.rightcorner {
	background-image: url("../icon/page_curl_r.jpg");
	background-position: bottom right;
	background-repeat: no-repeat;
	background-size: 40px;
}

.leftcorner {
	background-image: url("../icon/page_curl_l.jpg");
	background-position: bottom left;
	background-repeat: no-repeat;
	background-size: 40px;
}

.insidecard {
	width: calc(100% - 6px);
	height: calc(100% - 6px);
	margin:0 2em;
	display:table-cell;
	vertical-align: middle;
}

.card h5 {
	margin-left: 2em;
	margin-right:1em;
}

.card p {
	margin:0 2em;
}

ul.dotted_list {
	list-style-type: disc;
}

h5.argumentDefault {
	padding-top:0;
	cursor:pointer;
}

p.elaborationDefault {
	display: none;
}

h5.argumentDisplay {
	cursor:pointer;
}

p.elaborationDisplay {
	display:block;
	vertical-align: middle;
	cursor: pointer;
}

ul.vidyes li,
ul.vidno li {
	border:none;
	padding:0;
}

.topic {
	padding:1em;
	vertical-align: top;
	/*border:1px solid black;*/
	/*width:150px;*/
	width:calc(100% / 9);
	/*width:100px;*/
	/*height:50px;*/
	height:80px;
	display:inline-block;
	/*margin:.3em;*/
	margin:.1em 0;
	position:relative;
}

.topic div {
	display:table;
	height:calc(100% - 6px);
	width:calc(100% - 6px);
}

.color1 div p, 
.color2 div p, 
.color3 div p, 
.color4 div p {
	display:table-cell;
	vertical-align: middle;
	text-align: center;
	color:#111;
}

.color1 {
	/* blue */
	/*background: #FFE700;*/
	background: #22BAB4;
	/*background: #239BFF;*/
	/*background: #4518F0;*/
}

.color2 {
	/* red */
	/*background: #FF6F00;*/
	background: #EA2B6B;
	/*background: #FF135B;*/
	/*background: #FF1300;*/
}

.color3 {
	/* green */
	/*background: #FFA100;*/
	background: #8AED2B;
	/*background: #7EFF13;*/
	/*background: #00F42B;*/
}

.color4 {
	/* orange */
	/*background: #FF3900;*/
	background: #FF8B2E;
	/*background: #FF9C13;*/
	/*background: #FFD100;*/
}

.interpage-link {
	text-decoration:underline;
}

.interpage-link h3:hover,
.interpage-link h3:active {
	color:blue;
	text-decoration: underline;
}

.video {
	width:350px;
	height:197px;
	background-color: lightgray;
}

.challengevideo {
	width:425px;
	height:240px;
}

figure {
	width:350px;
	margin:1.65em auto 0;
}

.reason-column {
	width:46%;
	display:inline-block;
	vertical-align: top;
}

.why {
	padding-right:2em;
}

.whynot {
	padding-left:2em;
}

.show:hover,
.hide:hover {
	cursor: pointer;
	text-decoration: underline;
}

li h5:hover {
	cursor: pointer;
}

.accordion-in {
	margin:30px 0;
	/*display:inline-block;*/
}

.accordion-in:hover {
	cursor:pointer;
}

.accordion-in img {
	/*width:100px;*/
	/*height: 56px;*/
}

.accordion-out {
	margin:30px 0;
	/*margin:50px 0 100px; */
	/*background-color:pink;*/
	/*display:none;*/
	/*outline:1px solid red;*/
}

.thumbvideo {
	width:100px;
	height:56px;
}


/* AddThis buttons 

.addthis_sharing_toolbox {
	opacity: .6!important;
}*/


/* our sharing buttons */
.mail-arg,
.mail-vid,
.tweet-arg,
.tweet-vid,
.share-fb,
.share-goog {
	display:inline-block;
	margin-right:.25em;
	/*margin-top:.25em;*/
}

.mail-arg a,
.mail-vid a,
.tweet-arg a,
.tweet-vid a,
.share-fb a,
.share-goog a {
	border:1px solid #aaa;
	border-radius:50%;
	color:#777;
	padding:3px 4px;
	font-size: .75em;
}

.share-icon {
	opacity:.4;
	margin-bottom: -3px;
}

footer {
	width:100%;
	height:40px;
	padding:7px;
	/*color:#fff;*/
	font-size: .8em;
	/*background: #FFB300;*/
}

footer nav {
	padding-bottom:3em;
}

.modal {
position:absolute;
top:0;
right:0;
/*bottom:0;*/
left:0;
/*background: rgba(0,0,0,0.8);*/
z-index:99999;
opacity:0;
-webkit-transition: opacity 200ms ease-in;
-moz-transition: opacity 200ms ease-in;
transition: opacity 200ms ease-in;
pointer-events: none;
}

.modal:target {
	opacity:1;
	pointer-events:auto;
}

.modal div {
	width:65%;
	position:relative;
	margin: 10% 10% 50% 10%;
	padding: 5px 20px 15px 40px;
	border-radius:10px;
	background:#eee;
	background: -moz-linear-gradient(#eee, #ddd);
	background: -webkit-linear-gradient(#eee, #ddd);
	background: -o-linear-gradient(#eee, #ddd);
}

.close {
	background:#606061;
	color:#fff;
	line-height:25px;
	position:absolute;
	right:-12px;
	text-align: center;
	top: -10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}

.close:hover {
	background:#FFB300;
}

/* Admin page styles */

.admin-container {
	width:90%;
	padding:1em;
	margin:1em auto;

}

h6 {
	font-size: 1em;
	line-height: 2.65;
	font-style:italic;
	color:#8B4513; /* saddlebrown */
}

.admin-link {
	color:#444;
}

.admin-link:hover,
.admin-link:active {
	text-decoration:underline;
	color:#666;
}

.success {
	color:#00DF00;
	font-weight: bold;
	text-align:center;
}

.errors {
	color:#FF0000;
	font-weight: bold;
}

table {
	margin-bottom: 2em;
}

td,
th {
	border:1px solid black;
	padding:3px 5px;
}

td.center {
	text-align: center;
}

textarea {
	font-size: .8em;
	padding:5px 10px;
	line-height: 1.4;
}

.edit-button {
	background-color:#ffff00; /* yellow */
	border:1px solid gray; 
	border-radius:5px; 
	padding:2px 6px; 
	font-size:.5em; 
	text-align: center;
	margin-right:2.5em;
}

.add-button {
	background-color:cyan; 
	border-radius:5px; 
	width:55px; 
	border:1px solid gray; 
	font-weight:bold;
}

.add_arg_button {
	border:1px solid gray; 
	border-radius:6px; 
	font-size:.7em; 
	text-align: center;
	width:210px;
	margin-left: 140px;
}

.add_arg_button:hover {
	cursor: pointer;
}

.centered_button {
	border:1px solid gray;
	border-radius:6px;
	font-size:.7em;
	text-align: center;
	width:80px;
	margin:3em auto;
}

input[type='submit'] {
	cursor: pointer;
}

.update {
	background-color:#00FF00; /* lime green */ 
	border-radius:5px; 
	width:55px; 
	border:1px solid gray; 
	font-weight:bold;
}

.delete {
	color:#FF0000; 
	margin-left:10px; 
	vertical-align:bottom;
	border-radius:8px;
	border:1px solid red;
	font-size: .8em;
	padding:0 5px;
}

.delete:hover {
	background-color: #FCC;
	color:red;
}

.blue {
	color:blue;
	font-weight: bold;
}

.green_dot {
	border-radius: 50%;
	background-color: limegreen;
	width: 20px;
	height: 20px;
	margin:0 auto;
}

/* End Admin pages */

.stickyfooter {
	position:fixed;
	bottom:0;
	width:100%;
}


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

	Media Queries

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

/* for widest screens */
@media screen and (min-width:960px) {

	.container,
	nav {
		width:860px;
		margin:0 auto;
	}

	footer p,
	footer form {
		margin:0;
	}

}


/* less than 1000px */

@media screen and (max-width: 1000px) {

	.why {
		padding-right:.65em;
	}

	.whynot {
		padding-left:0;
	}

	.topic {
		width:calc(100% / 7);
	}


}


/* less than 860px */

@media screen and (max-width: 860px) {
	
	.container {
		width: 100%;
		padding-bottom:40px;
		margin:0 .25em;
	}

	ul {
		padding-left:.5em;
	}

	.topic {
		width:calc(100% / 6);
	}

	.insidecard {
		padding: 1em 0;
	}


}


/* less than 750px */

@media screen and (max-width: 750px) {

	.container {
		padding: .25em;
	}

	nav a {
		font-size:.975em;
	}

	ul {
		padding:0;
	}

	.colorgrid {
		padding:0 .5em;
	}

	.topic {
		width:calc(100% / 5);
	}

	#argno {
		margin-left: .25em;
	}

	.mission {
		width:85%;
	}

	.reason-column {
		width:100%;
	}

	footer p {
		margin-bottom: 0;
	}

	.stickyfooter {
		position:relative;
	}

}


/* less than 608px */

@media screen and (max-width: 608px) {

	body {
		/* isn't this already true? */
		width:100%;
	}

	nav a {
		padding:0 4px;
	}

	.challengevideo {
		width:350px;
		height:197px;
	}

}

/* less than 480px */

@media screen and (max-width: 480px) {

	body {
		font-size: 90%;
	}

	h3,
	h4,
	p {
		padding-left: .75em;
	}

	p.elaborationDisplay {
		padding-left: 0;
	}

	.container {
		margin:0;
		padding:0;
	}

	.topic {
		width:calc(100% / 3);
		/*width:100px;*/
		/*height:50px;*/
		/*padding:1em;*/
		/*margin:.3em .2em;*/
		/*margin:-2px 0;*/
	}

	.why {
		padding:0;
	}

	.card {
		width:300px;
		height:171px;
	}

	figure {
		width: 300px;
	}

	.add_arg_button {
		margin-left:95px;
	}

	footer {
		width:96%;
	}

}