/*
Theme Name: 	NotSuicide

*/

/*
===========================
CONTENTS:

01 Sensible defaults
02 Typography
03 Media queries 
===========================
*/

/* ---------------------------------------------------------------------------------------------------------- 
01 Sensible defaults ----------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

@import "css/reset.css";
@import "css/avenirfonts.css";

div,
article,
section,
header,
footer,
nav,
li					{ position:relative; /* For absolutely positioning elements within containers (add more to the list if need be) */ }
.group:after 		{ display:block; height:0; clear:both; content:"."; visibility:hidden; /* For clearing */ }
body 				{ background:#fff; /* Don't forget to style your body to avoid user overrides */ }
::-moz-selection 	{ background:#ff0; color:#333; }
::selection 		{ background:#ff0; color:#333; }

/* ---------------------------------------------------------------------------------------------------------- 
02 Typography -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
/*

14 / 16	= 		0.875em 		(14px equivalent)
16 / 16	= 		1em 			(16px equivalent)
18 / 16 = 		1.125em 		(18px equivalent)
21 / 16 = 		1.3125em 		(21px equivalent)
24 / 16 = 		1.5em 			(24px equivalent)
30 / 16 = 		1.875em 		(30px equivalent)

*/

/* C&C COLORS

MIDNIGHT: #00446d;
MORNING: #0797b9;

/*

body,
input,
textarea 			{ /* We strongly recommend you declare font-weight using numerical values, but check to see which weights you're exporting first */ }

h1, 
h2, 
h3, 
h4, 
h5, 
h6 					{ }

.highlight{
	color:#0797b9;
}
.highlightDark{
	color:#00446d;
}

footer a{
	color: #748a9f;
}

/*BIG STUFF*/

html, body{
	height:100%;
}

body{
	background-image:url('assets/img/wave_background.png');
	color:#748a9f;
	font-family:'Sentinel', serif;
	background-attachment: fixed;
}

.mainContent{
	width:100%;
	min-height:100%;
	max-width: 980px;
	margin:0 auto;
	background-color: white;
}

footer.footer{
	padding:30px;
	background: white;
}

h1{
	font-size: 50px;
	font-weight: 600;
}
h2{
	font-size: 30px;
}

.container{
	width:100%;
	max-width:980px;
	margin:0 auto;
	padding: 0 30px;
	box-sizing:border-box;
}

/*SPECIFICS*/
header.container{
	padding-top:30px;
}

header .links{
	position:absolute;
	right:30px;
	top:30px;
}

.social{
	width:31px;
	height:31px;
}

.logo{
	width:161px;
	height:39px;
}

.links td{
	text-align: center;
	vertical-align: middle;
	padding:0 7px;
}

.logoOffset{
	position: relative;
	top: -3px;
}

.introText{
	width: 100%;
	max-width: 600px;
	margin:20px 0;
	font-family: 'Avenir', sans-serif;
}

.introText p{
	margin-bottom: 20px;
}

.statementList{
	list-style-type: none;
}

.statement{
	font-family: 'Avenir', sans-serif;
	box-sizing:border-box;
	cursor:pointer;
	padding: 30px 0;
	display: block;
	overflow: hidden;
	transition: background-color .33s, color .33s, max-height .7s;
	-webkit-transition: background-color .33s, color .33s, max-height .7s;
	-moz-transition: background-color .33s, color .33s, max-height .7s;
	-o-transition: background-color .33s, color .33s, max-height .7s;
}
.statement:hover{
	background-color: #0797b9;
	color:white;
}

.statement h2{
	margin-bottom: 30px;
	font-weight: bold;
}

.statement p {
	margin-bottom: 20px;
}

.statement:hover .highlight{
	color:white;
}

.statement.closed{
	max-height: 100px;
	cursor:pointer;
}

.statement.open{
	max-height: 1000px;
	background-color: #00446d;
	color: white;
}

.statementContent{
	padding-left: 40px;
	color: white;
}

.statement a{
	color: white;
}
.statement a:active{
	color: white;
}

.open .highlight{
	color: white;
}

/*PLUS-MINUS*/
.plusMinus{
	width:18px;
	height:19px;
	float: left;
	margin-right: 20px;
	margin-top: 10px;
}

.plusMinus div{
	transition: opacity 0.33s, background-color 0.33s;
}

.closed .plusMinus div{
	background-color: #00446d;
}

.open .plusMinus div{
	background-color: white;
}

.open .plusMinus .vertical{
	opacity:0;
}

.plusMinus .vertical{
	height:100%;
	width:3px;
	position: absolute;
	left:8px;
}
.plusMinus .horizontal{
	height:3px;
	width:100%;
	position: absolute;
	top:8px;
}

/*SURVEY FORM*/
#survey-form{
	margin-top: 20px;
}

form h2{
	margin-bottom: 20px;
}

form{
	background-color: #00446d;
	color: white;
  padding: 20px;
  width: 100%;
  border-radius: 5px;
  max-width: 300px;
}

form input{
	font-size: 100%;
  margin: 0;
  vertical-align: baseline;
  width: 100%;
  border-radius: 5px;
  border: 0;
  margin-top: 5px;
  padding: 5px 0;
}

.formError{
	display:none;
	color:red;
}

.inputRow{
	width:100%;
	max-width: 300px;
	margin-bottom:10px;
}

.submitRow{
	overflow: hidden;
}

.surveySubmitButton{
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	background: #0797b9;
	border:0;
	border-radius: 5px;
	padding:10px;
	color: white;
	float: right;
}

/*SHAREPROGRESS BUTTONS*/
.sp_fb_large, .sp_tw_large{
	display: inline;
}

.sp_fb_large{
	margin:0 20px 20px 0;
}

/*RESPONSIVE MEDIA QUERIES*/
@media (max-width: 880px){
	header .links{
		position: static;
		top: 0;
		left: 0;
		margin-bottom:30px;
	}
}
/*MOBILE*/
@media (max-width: 880px){
	.statement.closed:hover{
		color:#748a9f;
		background-color: white
	}

.statement:hover .highlight{
	color:#0797b9;
}

	.container.surveyContainer{
		padding-left: 0;
	}

	h2{
		font-size: 20px;
		padding-left:40px;
	}
	.statement.closed{
		max-height: 90px;
	}

	.statement.open{
		max-height: 1200px;
	}

	.plusMinus{
		margin-top: 4px;
		width:16px;
		height:17px;
	}
	.plusMinus .vertical{
		left:7px;
	}
	.plusMinus .horizontal{
		top:7px;
	}

	/*INPUTS*/
	.inputRow label, .inputRow input{
		float:left;
	}
}