/*!
Theme Name: BradBall.net
Theme URI: http://BradBall.net/
Author: Brad Ball
Author URI: http://BradBall.net/
Description: A bootstrap powered responsive theme built with SASS.
Version: 1.0
License: GNU General Public License
*/
/* COLORS */
/* FONT STACKS */
.alert { padding: 1px 6px; }

body, html { height: 100%; width: 100%; background-color: #bfbfbf; }

html { /* Desktop */ font-size: 16px; }
@media (max-width: 767px) { html { font-size: 12px; } }

body { color: #404040; font-family: "Open Sans", Arial, sans-serif; font-weight: 400; font-size: 16px; line-height: 27.2px; }

h1 { font-family: "Roboto", Verdana, serif; font-weight: 300; font-size: 3rem; }

h2 { font-family: "Roboto", Verdana, serif; font-weight: 300; font-size: 2rem; }

h3 { font-family: "Roboto", Verdana, serif; font-weight: 300; font-size: 1.5rem; }

h4 { font-family: "Roboto", Verdana, serif; font-weight: 300; font-size: 1rem; }

h5 { font-family: "Roboto", Verdana, serif; font-weight: 300; font-size: 0.75rem; }

h6 { font-family: "Roboto", Verdana, serif; font-weight: 300; font-size: 0.5rem; }

ul, ol { padding-left: 1rem; list-style-position: outside; }

a { color: #3b7fd9; text-decoration: underline; }
a:visited { color: #3b7fd9; }
a:hover { color: #2a558c; }

a.label { background-color: #bfbfbf; color: #ffffff !important; font-weight: normal; text-decoration: none; }
a.label:hover { background-color: #3b7fd9; }

nav ul { list-style-type: none; padding-left: 0; font-size: 1rem; }

.list-inline > li { padding: 0; line-height: 31px; }

.menu-handle { outline: none; background: transparent; border: none; height: 19px; margin: 15px 10px 0 0; }
.menu-handle .menu-icon { display: block; width: 17px; height: 3px; border-radius: 1px; background-color: white; }
.menu-handle .menu-icon + .menu-icon { margin-top: 4px; }

/* GENERAL POST STYLES */
/* Styles for all posts, list AND single */
.post { margin-bottom: 2rem; }
.post .post-title, .post .post-sub-title, .post .post-meta-data { margin: 0 0 .2em; }
.post .post-title a, .post .post-sub-title a, .post .post-meta-data a { text-decoration: none; }
.post .post-title { text-align: center; color: #2a558c; }
.post .post-sub-title { text-align: center; color: #bfbfbf; font-weight: 300; }
.post .post-meta-data { font-size: .8rem; }
.post .post-content { margin-top: 2rem; font-size: .95em; }
.post .instagram { width: 100%; }
.post.photos small { display: block; width: 100%; font-size: .8rem; }
.post .more-link { background-color: #3b7fd9; color: #ffffff !important; text-decoration: none; border-radius: 4px; white-space: nowrap; padding: 0px 3px; font-size: .7em; }
.post .more-link:hover { text-decoration: none; }
.post .wp-caption.alignnone { max-width: 100%; margin: 3rem auto; }
.post .wp-caption.alignnone img { max-width: 100%; height: auto; }
.post .wp-caption.alignnone .wp-caption-text { font-weight: 700; text-align: center; }
.post .carousel.slide { width: 100% !important; height: auto; }
.post .carousel.slide img { width: 100% !important; height: auto; }
.post.no-posts { text-align: center; }

.post-divider { margin: 4rem 0; border-color: #bfbfbf; }

/* POST LIST */
/* Addons and overrides of the general post styles for posts that are in a list */
.post-list .post .post-title { font-size: 2.5em; }
.post-list .post .post-sub-title { font-size: 1.1em; }
.post-list .post .instagram { max-width: 320px; -webkit-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.75); -moz-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.75); box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.75); }
.post-list .post.photos small { max-width: 320px; margin: 0 auto; text-align: left; }
.post-list .post.photos .post-content, .post-list .post.tweets .post-content { text-align: center; }
.post-list .post .twitter-tweet { margin-left: auto !important; margin-right: auto !important; }

.archive h1 { text-align: center; font-size: 1rem; }

.paging-navigation { margin-bottom: 2rem; }
.paging-navigation a { background-color: #3b7fd9; color: #ffffff; border-radius: .25em; padding: .2em .6em .3em; font-size: .8em; text-decoration: none; }
.paging-navigation a:hover { text-decoration: none; background-color: #2a558c; }

/* SINGLE POST */
/* Addons and overrides of the general post styles for posts that are displayed as a single post on a page */
.single-post .post .instagram { max-width: 640px; }
.single-post .post .photos small { max-width: 640px; }
.single-post .post .post-meta-data span { display: inline-block; max-width: 64%; }
.single-post .post .post-meta-data span + span { float: right; margin-right: 10px; }

#social { margin-top: 0; }
#social .social-post { color: #404040; font-family: "Open Sans", Arial, sans-serif; font-weight: 400; }
#social #reply-title { font-family: "Roboto", Verdana, serif; font-weight: 300; font-size: 1.5rem; background: none; }
.logged-in #social .social-input-row, .logged-in #social #respond .form-submit { font-size: 1rem; }
#social input { outline: none; }
#social #social input.social-input, #social #social textarea.social-input, #social #social .social-select { background: #bfbfbf; }
.logged-in #social #respond .form-submit input[type="submit"], #social input#submit { color: #404040; font-family: "Open Sans", Arial, sans-serif; font-weight: 400; border: none; background: #3b7fd9; color: #fff; font-size: 1rem; height: auto; text-shadow: none; padding: .5rem .8rem; }
#social #respond input.social-input { width: 100%; }
@media (min-width: 630px) { #social #respond #email.social-input { width: 75%; } }
#social #respond textarea.social-input { max-width: 100%; height: 100px; }
#social .social-comment { border: none; border-radius: 0px; border-top: 1px solid #bfbfbf; padding: 2rem 0 .5rem 0; }
#social .social-comment-collapse { padding: 0; }
#social .social-comment-collapse > .social-comment-inner > .social-comment-header .social-fn { left: 0; font-weight: 700; }
#social .social-comment-collapse > .social-comment-inner > .social-comment-header, #social .social-comment-collapse.social-facebook-like > .social-comment-inner > .social-comment-body { padding-left: 0; }

.comments-area { margin-top: 2rem; }

.comments-title { margin-bottom: .5rem; }

.comment-list { list-style-type: none; padding: 0; }
.comment-list .comment { padding: .8rem; background: #efefef; margin-bottom: 20px; border-radius: 3px; -webkit-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.75); -moz-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.75); box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.75); }
.comment-list .comment header { font-size: .8rem; border-bottom: 1px solid #bfbfbf; margin-bottom: .8rem; }
.comment-list .comment .comment-author { color: #2a558c; font-weight: 700; }
.comment-list .comment .glyphicon { margin-left: 10px; }

.comment-respond { border-top: 1px solid #bfbfbf; margin-top: 3rem; padding-top: 3rem; }
.comment-respond #reply-title { margin-top: 0rem; }
.comment-respond label { display: block; }
.comment-respond textarea { width: 100%; }
.comment-respond input[type="text"], .comment-respond textarea { border: 1px solid #bfbfbf; padding: 5px; }
.comment-respond input[type="submit"] { border: none; background: #3b7fd9; color: #ffffff; border-radius: 3px; }
.comment-respond input[type="submit"]:hover { background: #2a558c; }
.comment-respond #commentform-error { display: none; }

#grid { position: fixed; top: 0px; height: 1000px; z-index: 10; width: 100%; opacity: .5; }
#grid div { height: 100%; }
#grid div.col-sm-1:first-child { border-left: 1px solid red; }
#grid div.col-sm-1:last-child { border-right: 1px solid red; }
#grid div div div div { height: 100%; width: 100%; box-sizing: content-box; background-color: #f7bec2; }

.game-wrapper { width: 48%; margin: 1%; position: relative; float: left; padding: 4px; border: 1px solid #999; border-radius: 2px; background-color: #fff; }

.game { font-size: .9em; line-height: 1em; display: block; text-decoration: none; color: #777; *zoom: 1; }

.game .game-time { font-size: .85em; }

.game.in-progress, .game.final, .game .score { float: right; }

.game:before, .game:after { content: " "; display: table; }

.game:after { clear: both; }

.game:visited, .game:hover, .game:active { text-decoration: none; color: #777; }

#Page-Wrapper { height: 100%; width: 100%; }

#Site-Header { background-color: #2a558c; color: white; padding: .55em; }

#Top-Nav { display: none; }

#Page-Body { padding-top: 2rem; }

#Page-Title { font-size: .9rem; font-weight: 700; margin-bottom: 1rem; }

#Site-Badge { display: inline-block; font-family: "Open Sans", Arial, sans-serif; padding: .3rem .5rem; }

#Site-Name { font-weight: 800; font-size: 2rem; line-height: 2rem; }
#Site-Name a, #Site-Name a:hover { color: white; text-decoration: none; }

#Tag-Line { font-size: .6rem; line-height: .8rem; }

#Site-Footer { padding: 2rem 1em; }
#Site-Footer .container { padding: 1rem; font-size: .8em; }

.error { background-color: #EED3D7; color: #a94442; }

/*  Styles for the Off-Canvas menu
	displayed on small screens 		*/
#Page-Canvas { position: relative; z-index: 2; top: 0px; left: 0px; width: 100%; min-height: 100%; background-color: #ffffff; -webkit-transition: left 500ms ease-out; -moz-transition: left 500ms ease-out; -o-transition: left 500ms ease-out; -ms-transition: left  500ms ease-out; transition: left 500ms ease-out; -webkit-box-shadow: 3px 0px 10px 0px #000; -moz-box-shadow: 3px 0px 10px 0px #000; box-shadow: 3px 0px 10px 0px #000; }

#Off-Canvas-Menu { height: 100%; position: absolute; top: 0; right: 0; background: #bfbfbf; color: #ffffff; padding: 0px; z-index: 1; }
#Off-Canvas-Menu .menu-header { background: #bfbfbf; padding: 10px 20px; margin: 0; font-size: 1.4rem; }
#Off-Canvas-Menu ul { margin: 0; font-size: 1.2rem; }
#Off-Canvas-Menu ul li a { color: #3b7fd9; text-decoration: none !important; }
#Off-Canvas-Menu ul li a:visited { color: #3b7fd9; }
#Off-Canvas-Menu ul li a:hover { color: white; }
#Off-Canvas-Menu ul:not(.list-inline) li { border-bottom: 1px solid #ababab; padding: 5px 20px; }
#Off-Canvas-Menu ul:not(.list-inline) li:first-child { border-top: 1px solid #ababab; }
#Off-Canvas-Menu ul:not(.list-inline) li a { display: block; width: 100%; height: 100%; font-weight: 700; }
#Off-Canvas-Menu ul:not(.list-inline) li:hover { background-color: #3b7fd9; }
#Off-Canvas-Menu ul:not(.list-inline) li:hover a { color: white !important; }
#Off-Canvas-Menu ul.list-inline { padding: 5px 20px; text-align: justify; }
#Off-Canvas-Menu ul.list-inline li a { font-size: .8rem; background-color: #404040; }
#Off-Canvas-Menu ul.list-inline li a:hover { background-color: #3b7fd9; }

body.menu-open #Page-Canvas { left: -75%; }

#Off-Canvas-Menu { width: 75%; }

@media (min-width: 768px) { body.menu-open #Page-Canvas { left: -20%; }
  #Off-Canvas-Menu { width: 20%; } }