/*
Theme Name: ASW Template
Theme URI:
Author: Elliot Toman
Author URI: http://asubtleweb.com
Description: An original Wordpress theme developed for Bob Beverley's Peace Etc.
Version: 1.0
License: 
License URI: 
Tags: 
Text Domain: 
*/

@import url('assets/fonts.css');

* { margin: 0px; padding: 0px; }

body, html { height: 100%; }

body { font: 100% Helvetica, sans-serif; color: white; margin: 0px; font: 1em 'Franklin Gothic', sans-serif; }

a { color: white; }
p { margin-bottom: 1em; }
article { line-height: 150%; margin-bottom: 1.5em; }
a img { border: 0px; }
img { max-width: 98%; }

h1 { font-size: 1.5em; font-weight: normal; text-transform: uppercase; margin-bottom: .5em; }
h2 { font-size: 1em; font-weight: normal; text-transform: uppercase; margin-bottom: .5em; }

.alignleft { float: left; margin: 0 1% 1% 0; }
.alignright { float: right; margin: 0 0 1% 1%; }
.alignnone { clear: both; margin: 1% 0; }
.size-full { max-width: 100%; }
.alignnone.size-full { width: 100%; }


#background { display: block; position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 99; background-position: center center; background-size: cover; }
#background_grid { display: block; position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 199; background: url('assets/dark_grid.png') repeat; opacity: 0.5; }

#page_wrap { display: table; position: absolute; top: 2.5%; left: 0; width: 100%; z-index: 299; }

#content_wrap { display: table; width: 95%; margin: 2.5%; }

ul#mainmenu { display: table; width: 95%; margin: 0 2.5%; }
ul#mainmenu a { text-decoration: none; display: block; padding: 1%; }
ul#mainmenu li { display: block; width: 100%; padding: 0; background-color: rgba(0,0,0,0.5); margin-bottom: 1px; }
ul#mainmenu li:hover { opacity: 0.8; }
ul#mainmenu li.title { background-color: white; }
ul#mainmenu li.title,
ul#mainmenu li.title a { color: black; }
ul#mainmenu li.title h1 { display: block; float: left; width: 48%; margin-left: -.5%; }
ul#mainmenu li.title .menu_open_button,
ul#mainmenu li.title .menu_close_button { display: block; float: right; width: 48%; text-align: right; }
ul#mainmenu li.title h1,
ul#mainmenu li.title .menu_open_button,
ul#mainmenu li.title .menu_close_button { font-size: 1.5em; text-transform: uppercase; padding: 1% 1% 0 1%; }
ul#mainmenu li.title h2 { clear: left; font-size: 1em; text-transform: lowercase; padding: 1%; margin: 0px; }
ul#mainmenu li.title .menu_close_button { display: none; }
#menu:target ul#mainmenu li.title .menu_close_button { display: block; }
#menu:target ul#mainmenu li.title .menu_open_button { display: none; }
ul#mainmenu .collapse { overflow: hidden; max-height: 0px; margin: 0; padding: 0px; transition: all 1s ease; -moz-transition: all 1s ease; }
ul#mainmenu:hover .collapse,
#menu:target ul#mainmenu .collapse { max-height: 9999px; }
li .sharethis { padding: 5px; }

.features { display: table; width: 100%; margin: 2.5% 0 0 0; padding: 2.5% 0 0 0; border-top: 1px solid white; }
.features img { display: none; }

.archive { display: block; float: none; clear: both; }
.archive ul { display: block; width: 100%; list-style-type: none; margin: 0; }
.archive li { display: block; width: 100%; margin-bottom: 1px; }
.archive a { display: block; text-decoration: none; background-color: rgba(0,0,0,0.5); padding: 1%; width: 98%; }
.archive a:hover { opacity: 0.8; }
.archive li.active { opacity: 0.5; }
.archive li.active a { background-color: rgba(255,255,255,0.5); color: black; }
.archive span.date { float: right; text-align: right; }
.archive a .excerpt { display: none; max-height: 0px; overflow: hidden; }
.archive a .excerpt { transition: all 3s; -webkit-transition: all 3s; -moz-transition: all 3s; }

#copyright { display: block; margin: 5% auto; text-align: center; }



/* MEDIUM LAYOUT */
@media screen and (min-width: 800px) {

#page_wrap { width: 100%; margin: 0; }

ul#mainmenu { width: 65.5%; margin: 0; float: right; }

#content_wrap { width: 62.5%; float: right; }

.features article { display: table; width: 48.75%; float: left; clear: left; }
.features article:nth-of-type(even) { float: right; clear: right; }

.archive a:hover .title,
.archive a:hover .date { opacity: 0.5; }
.archive a:hover .excerpt { display: block; max-height: 999px; }

}



/* LARGE LAYOUT */
@media screen and (min-width: ---px) {
	
}