/*-----------------------------------------+
 | Site: Love thy Neighborhood Awards      |
 | Part: Application and additional styles |
 +-----------------------------------------*/


/* Imports
=====================================================================*/
@import url("//fonts.googleapis.com/css?family=Raleway:300,300i,400,400i,600,600i,700,700i|Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i");
@import url("../../font-awesome/4.6.3/css/font-awesome.min.css");
@import url("reset.css");


/* Fonts
======================================================================*/
body, input, select, textarea { font-family: "Source Sans Pro", Arial, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: Raleway, Arial, sans-serif; }


/* Basics
======================================================================*/
a { color: #3ec6f4; text-decoration: none; }
a:hover { text-decoration: underline; }
body { background: #4d59a7; font-size: 18px; line-height: 1.5; }
dl, ol, p, table, ul { margin-bottom: 1em; }
dt, strong, h3, h4, h5, h6 { font-weight: bold; }
h1 { font-size: 50px; font-weight: normal; }
h2 { font-size: 36px; font-weight: 600; line-height: 1.2; }
h3 { font-size: 30px; }
h4 { font-size: 25px; margin-bottom: 0.5em; }
hr { background: #ddd; border: 0; clear: both; color: #ddd; height: 1px; margin: 60px 0; }
img { max-width: 100%; }
ol { list-style: decimal; margin-left: 2em; }
ol ol, ol ul, ul ol, ul ul { margin-bottom: 0; }
table { border-collapse: collapse; width: 100%; }
table h2, table p { margin: 0; }
td { border: 1px solid #ddd; border-width: 1px 0; }
td, th { padding: 0.5em 1em 0.5em 0; vertical-align: top; }
td[align=center], th[align=center] { text-align: center; }
td[align=right], th[align=right] { text-align: right; }
tfoot td { border: 0; padding: 0.5em 0 1em; }
th img { vertical-align: middle; }
th { color: #555; font-weight: bold; vertical-align: bottom; }
thead th { vertical-align: bottom; }
th { font-weight: bold; }
ul { list-style: disc; margin-left: 2em; }
ul ul { list-style: circle; }

/* Stock */
.flat { list-style: none; margin-left: 0; }
.flat li { margin: 0; }
.l { float: left; }
.r { float: right; }


/* Core layout
======================================================================*/
.clear { clear: both; }
.content { margin: 0 auto; max-width: 1180px; }
#content-primary { float: left; width: 65.53%; }
#content-secondary { float: right; width: 31.07%; }
#main { background: #fff; padding-bottom: 50px; }
#main .content { padding: 40px 20px; }

/* Columns */
.c2l, .c2r { width: 48%; }
.c2l, .c3l, .c3m, .c41, .c42, .c43, .c44 { float: left; }
.c2r, .c3r { float: right; }
.c3l { margin-right: 3%; }
.c3l, .c3m, .c3r { width: 31%; }
.c41, .c42, .c43, .c44 { margin-right: 4.9%; width: 21.32%; }
.c44 { clear: right; float: right; margin: 0; }
.c2l hr, .c2r hr, .c3l hr, .c3m hr .c3r hr { margin: 2rem 0 !important; }

    /* Text flow */
    .cols2 { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; }
    .cols3 { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; }
    .cols4 { -moz-column-count: 4; -webkit-column-count: 4; column-count: 4; }
    .cols2, .cols3, .cols4 { -moz-column-gap: 30px; -webkit-column-gap: 30px; column-gap: 30px; }
    [class *= "cols"] li { -webkit-column-break-inside: avoid; column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; margin: 0; padding-bottom: 0.75em; }
    [class *= "cols"] p { margin: 0; }
    ol[class *= "cols"], ul[class *= "cols"] { list-style: none; margin-left: 0; }


/* Content
======================================================================*/

/* Action */
.action, .btn {
    background: #3ec6f4;
    border: 2px solid #3ec6f4;
    border-radius: 4px;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 1em;
    font-weight: bold;
    padding: 0.5em 1.2em;
    text-transform: uppercase;
    vertical-align: middle;
}

.action:hover, .btn:hover { background: #fff; color: #3ec6f4; text-decoration: none; }

/* Alerts */
div.alert h6, div.confirm h6, div.notice h6 { font-size: 1.2em; font-weight: bold; }
div.alert, div.confirm, div.notice { color: #000; margin-bottom: 1em; padding: 0.5em 1em 0 0; }
div.alert h6, div.alert p, div.confirm h6, div.confirm p, div.notice h6, div.notice p { margin-bottom: 0.5em; }
div.alert li, div.confirm li, div.notice li { background: none; padding: 0; }
div.alert .txt, div.confirm .txt, div.notice .txt { font-size: 1em; height: 7em; width: 98%; }
div.alert ul, div.confirm ul, div.notice ul { list-style: disc outside; margin-left: 2em; }

	/* Alerts */
	.alert { color: #e30013; }
	div.alert { background: #ffd4d4; border: 3px solid #dd9898; }
	
	/* Confirmations */
	div.confirm { background: #d8ffd4; border: 3px solid #9edd98; }
	
	/* Notices */
	div.notice { background: #fff6d3; border: 3px solid #ffe27e; }

/* Awards */
#awards { list-style: none; margin: 50px 0; }
#awards > li { border-top: 1px solid #ddd; display: flex; justify-content: space-between; margin-bottom: 60px; padding-top: 60px; }
#awards > li:nth-child(2n) .award-summary { order: 3; }
#awards .award-preview { background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; order: 2; position: relative; width: 48.3%; }

#awards .award-preview .overlay {
    background: -moz-linear-gradient(top, rgba(62,198,244,0) 0%, rgba(62,198,244,1) 80%);
    background: -webkit-linear-gradient(top, rgba(62,198,244,0) 0%,rgba(62,198,244,1) 80%);
    background: linear-gradient(to bottom, rgba(62,198,244,0) 0%,rgba(62,198,244,1) 80%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003ec6f4', endColorstr='#3ec6f4',GradientType=0 );
    bottom: 0;
    box-sizing: border-box;
    color: #fff;
    font-size: 40px;
    font-weight: 300;
    left: 0;
    line-height: 1.2;
    padding: 80px 40px 40px;
    position: absolute;
    width: 100%;
}

#awards .award-summary { order: 1; width: 48.3%; }
#awards .award-summary [class *= "cols"] li { display: inline-block; font-size: 0.85em; margin-bottom: 0.5em; padding: 0 0 0 1.5em; text-indent: -0.65em; vertical-align: top; }

#awards .award-summary [class *= "cols"] li:before {
    color: #3ec6f4;
    content: "";
    display: inline-block;
    font-family: FontAwesome;
    line-height: 1;
    margin-right: 0.3em;
    vertical-align: middle;
}

/* Application list */
#app-list { list-style: none; margin-left: 0; }
#app-list li { padding-left: 2em; text-indent: -2em; }

/* Benefits */
.benefits li { font-size: 0.85em; margin-bottom: 0; padding: 0 0 0 1.5em; text-indent: -0.65em; vertical-align: top; }

.benefits li:before {
    color: #3ec6f4;
    content: "";
    display: inline-block;
    font-family: FontAwesome;
    line-height: 1;
    margin-right: 0.3em;
    vertical-align: middle;
}

/* Ceremony */
#ceremony { color: #fff; padding: 50px 0; }
#ceremony .circle { border: 3px solid #fff; }
#ceremony .content { align-items: center; display: flex; justify-content: space-between; }
#ceremony #ceremony-primary { width: 17.28%; }
#ceremony #ceremony-secondary { width: 34.4%; }
#ceremony #ceremony-tertiary { width: 41.35%; }

/* Circles */
.circle { border-radius: 1000px; }

/* Closed */
.closed { display: none; }

/* FAQ */
.faq { list-style: none; margin-left: 0; }
.faq li { margin: 0; }

/* Flags */
span.flag {
	background: #4f59a7;
	border-radius: 4px;
	color: #fff;
	display: inline-block;
	font-size: 0.7em;
	font-weight: normal;
	margin-right: 0.5em;
	padding: 0.3em 0.7em;
	text-transform: uppercase;
	vertical-align: middle;
}

.mute .flag { font-size: 15px; }

/* Footer */
#footer { color: #fff; padding: 30px 20px 100px; text-align: center; }
#footer a { color: #fff; }
#footer .vcard .org { display: block; font-weight: bold; }

/* Forms */
.form { border-collapse: collapse; width: 100%; }
.form h2, .form p { margin-bottom: 0.5em; }
.form td { padding: 0.7em 0; }
.form td, .form th { border: 0; }
.form th { color: #000; font-weight: bold; padding: 0.75em 1.53em 0.7em 0; text-align: right; vertical-align: top; width: 31%; }

	/* Buttons */
	.btn { padding: 0.25em 1em; vertical-align: middle; }
	.final-btn { font-weight: bold; }
	
	/* Character count */
    .length-count { color: #777; float: right; display: block; margin-left: 1em; }
    .length-count.alert { color: #f00; font-weight: bold; }
    
    /* Criteria */
    #criteria td { width: 82%; }
    #criteria .score { white-space: nowrap; width: 18%; }
    
    /* Fields */
	.field-help { font-size: 0.9em; margin-left: 0.75em; }
	.field-help, .field-help strong { color: #737b80; }
	.field-help img { border: 1px solid #ddd; vertical-align: middle; }
	
	textarea.txt { height: 7em; width: 98%; }
	.txt, .txt-med, .txt-sm { box-sizing: border-box; padding: 0.3em; }
	.txt { width: 48.5%; }
	.txt-sm { text-align: center; width: 3em; }
	.txt-med { width: 7em; }
	
	.form .txt, .form .txt-med, .form .txt-sm {
		background: #fff;
		border: 1px solid #aaa;
		font-size: 1.2em;
		padding: 0.35em 0.25em;
		vertical-align: middle;
	}
	
		/* Location fields */
		.loc-fields { float: left; list-style: none; margin: 0; width: 52%; }
		.loc-fields li { float: left; margin-right: 5%; padding: 0; }
		.loc-fields .txt { width: 98%; }
		.loc-city { width: 48%; }
		.loc-state { width: 13%; }
		.loc-zip { margin: 0; width: 23%; }
	
	/* Narrow layout */
	.form th { width: 33%; }
	
	/* Options */
    .options-h, .options-v { list-style: none; margin-left: 0; }
    .options-h img { border-bottom: 3px solid #fff; padding: 5px; vertical-align: middle; }
    .options-h li, .options-v li { background: none; margin-bottom: 0.3em; padding: 0; }
    .options-h li { display: inline; margin-right: 0.7em; white-space: nowrap; }
    .options-v li { padding-left: 25px; text-indent: -25px; }
	
	/* Sign in */
    #signin { background: #dff0fb; -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; margin-bottom: 20px; padding: 15px; }
	#signin .field { float: none; width: 95%; }
    #signin .mute { font-size: 12px; }
    #signin .txt { width: 98%; }

/* Grids */
.grid { list-style: none; clear: both; line-height: 1.4; margin: 0; }
.grid img { vertical-align: middle; }
.grid .thumb { display: table-cell; height: 200px; vertical-align: middle; width: 200px; }
.grid li { background: none; float: left; height: 230px; margin: 0 3% 2em 0; padding: 0; text-align: center; width: 200px; }
.grid .mute { font-size: 1em; }
.grid .shim { display: inline-block; height: 100%; vertical-align: middle; }

/* Header */
#header { background: #fff; border-bottom: 1px solid #ddd; padding: 30px 20px; }
#header .content { align-items: center; display: flex; justify-content: space-between; }
#header #logo { width: 15.19%; }
#header #nav { width: 55.16%; }
#header #presented { width: 22.54%; font-size: 12px; text-align: center; text-transform: uppercase; }
#header #presented .logos { line-height: 50px; }
#header #presented .logos img { max-height: 50px; }
#header #presented .logos li { margin: 0 10px; max-width: 100px; }

/* Hero */
.hero {
    box-shadow: inset 0 0 0 1000px rgba(77, 89, 168, 0.8);
    background: url(../images/hero_t-1.jpg) 50% 50% no-repeat;
    background-size: cover;
    color: #fff;
    padding: 5% 20px;
    text-align: center;
}

.hero .action { font-size: 90%; padding: 0.3em 2em; }
.hero .hero-nav { font-size: 200%; font-weight: 300; }
.hero .hero-nav a { color: #fff; }
.hero .intro { font-size: 245%; }
.hero .intro strong { color: #3ec6f4; }

/* Intro */
.intro { font-size: 180%; font-weight: 300; line-height: 1.3; }

/* Logos */
.logos { font-size: 14px; list-style: none; margin: 2rem 0; line-height: 106px; text-align: center; }
.logos a:hover { opacity: 0.7; }
.logos img { max-height: 72px; vertical-align: middle; }
.logos img, .logos li { max-width: 210px; }
.logos li { display: inline-block; line-height: 1.2; margin: 0 25px; vertical-align: middle; }

    /* Sizes */
    .logos-2x { font-size: 22px; line-height: 170px; }
    .logos-2x img, .logos-2x li { max-width: 400px; }
    .logos-2x img { max-height: 140px; }

/* Muted text */
.mute { color: #999; font-size: 15px; font-weight: normal; }

/* Navigation */
#nav-account { list-style: none; margin: 0 0 1em; }
#nav-account li { display: inline; margin-right: 1em; }
#nav-primary { font-size: 26px; font-weight: 300; list-style: none; margin: 0; }
#nav-primary a { color: #000; }
#nav-primary li { display: inline; margin-right: 1em; }
.nav-secondary { list-style: none; margin-left: 0; }
.nav-secondary li { margin-bottom: 1em; }

    /* Menu */
    #menu {
        background: #3ec6f4;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        display: none;
        font-size: 15px;
        overflow: scroll;
        position: fixed;
        right: -400px;
        top: 0;
        width: 250px;
        z-index: 1000;
    }
    
    #menu a { border-bottom: 1px solid rgba(255, 255, 255, 0.3); color: #fff; display: block; font-weight: 600; padding: 0.8em 1.1em; }
    #menu a:active { background: transparent; }
    #menu li { margin: 0; }
    #menu li.current { background: #fff; }
    #menu li.current a, #menu li.current a strong { color: #ef681f; }
    #menu ul { list-style: none; margin: 0; }
    #menu ul ul a { border-bottom: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); color: #3c6cc7; }
    #menu ul ul li.current a { color: #000; }

/* Notifications */
.notification { border: 2px solid #e1dfd0; margin: 1em 0 2em; padding: 1em 1em 0.6em; }
.notification p { margin-bottom: 0.5em; }
.notification h6 { font-size: 1.15em; margin-bottom: 0.5em; }
.dash .notification { font-size: 1.15em; }

	/* Confirmations */
	.notify-confirm { background: #ecf8f6; border-color: #a1dad0; }
	
	/* Help */
	.notify-help { background: #f7f5e9; }
	
	/* Info */
	.notify-info { background: #f7f5e9; }
	
	/* Plain */
	.notify-plain { background: #ecf8f6; border-color: #a1dad0; padding-left: 1em; }

/* Profile links */
#profile { float: right; font-size: 15px; margin-bottom: -4em; padding-top: 4em; }
#profile li { background: none; display: inline; margin-left: 1em; padding: 0; }

/* Scorecard */
.scorecard img { vertical-align: middle; }
.scorecard tbody th { font-weight: normal; white-space: nowrap; }
.scorecard td, .scorecard th { line-height: 1.3; padding: 0.3em 5px; }
.scorecard td { vertical-align: middle; text-align: center; }
.scorecard tfoot td, .scorecard tfoot th { background: #f0f0f0; }
.scorecard thead th { background: #f0f0f0; font-size: 12px; font-weight: normal; vertical-align: bottom; }

/* Secondary content */
.content-sub { font-size: 1em; }
.content-sub p { margin-bottom: 1em; }

/* Sliders */
#slider-max { float: right; }
#slider-min { float: left; }
#slider-values { font-size: 12px; list-style: none; margin: 0; }

/* Stretch */
.stretch { box-sizing: border-box; clear: both; margin: 50px 0; }

/* Thumbnail lists */
.thumblist dd { margin: 0; }
.thumblist dt { clear: both; font-size: 30px; margin-top: 1em; }
.thumblist h2 { clear: both; color: #000; font-size: 1.6em; font-weight: bold; line-height: 1.2; }
.thumblist h3 { color: #666; font-size: 1.2em; font-weight: normal; letter-spacing: 0; text-transform: none; }
.thumblist img { float: left; margin: 0.25em 1em 1em 0; }
.thumblist .icon { float: none; margin: 0; width: auto; }

	/* Large thumbs */
	.thumblist-large { padding-left: 220px; }
	.thumblist-large img { margin-left: -220px; width: 200px; }
	
	/* Small thumbs */
	.thumblist-small { padding-left: 45px; }
	.thumblist-small img { margin-left: -45px; }

/* Wizard */
#wizard {
	background: #e5eef1;
	font-size: 1.1em;
	line-height: 1;
	list-style: none;
	margin: 1em 0 1.75em;
	padding: 0.75em 1em 0.85em;
	text-align: center;
}

#wizard, #wizard a { color: #5f686e; }
#wizard li { display: inline; margin-right: 0.65em; padding-right: 0.65em; }
#wizard li.last { background: none; margin: 0; padding: 0; }
#wizard li.present { color: #000; font-weight: bold; }


/* Widths
=====================================================================*/
@media screen and (max-width: 930px) {
    #header #presented { display: none; }
    #header #nav { width: 77.7%; }
}

@media screen and (max-width: 700px) {
    /* Action buttons */
    .action, .btn { display: block; text-align: center; width: 100%; }
    
    /* Awards */
    #awards { margin: 20px 0; }
    #awards > li { display: block; margin-bottom: 20px; }
    #awards .award-preview { margin-bottom: 10px; padding-top: 200px; width: auto; }
    #awards .award-preview .overlay { font-size: 120%; padding: 20px; }
    #awards .award-summary { width: auto; }
    
    /* Ceremony */
    #ceremony #ceremony-primary { max-width: 200px; order: 3; width: 100%; }
    #ceremony #ceremony-secondary { order: 2; width: 100%; }
    #ceremony #ceremony-tertiary { order: 1; width: 100%; }
    #ceremony .content { flex-direction: column; text-align: center; }
    
    /* Columns */
    [class *= "cols"] { -moz-column-count: 1; -webkit-column-count: 1; column-count: 1; }
    
    /* Forms */
    .form, .form tbody, .form td, .form th, .form tr { display: block; padding: 0; text-align: left; width: 100%; }
    .form td { margin-bottom: 1em; }
    .txt { width: 100%; }
    
    /* Header */
    #header { padding: 10px 20px; }
    #header #nav { text-align: right; }
    #header #nav-account, #header #nav-primary { display: none; }
    
    /* Hero */
    .hero { margin-bottom: 20px; text-align: center; }
    .hero .hero-nav { font-size: 120%; }
    .hero .intro { font-size: 120%; }
    
    /* Intro */
    .intro { font-size: 120%; }
}