/*
Theme Name: BNMC
Theme URI: http://www.makins.org.uk
Author: Toby Makins
Author URI: http://www.makins.org.uk
Description: WordPress Theme created for the Bullnose Morris Club Website by Toby Makins. Released Summer 2014.
License: GNU General Public License v2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: 
Version: 1.0

All works derived from WordPress contained within this theme are licensed under the GPL v2 license.
However, only the PHP code contained within this theme can be considered derivative work. All HTML, CSS,
images and JavaScript are not derivative and are therefore protected by copyright and may not be distributed
or reproduced. 
*/

/*
 * This file has been organised according to the following structure. If you
 * are adding some CSS to this stylesheet, please add it to the correct 
 * section!
 *
 * File Contents:
 *
 * 1 - CSS Reset
 * 2 - Header (inc. Navigation)
 * 3 - Image Sliders
 * 4 - Footer
 * 5 - Articles
 * 6 - Events
 * 7 - Contact Form
 * 8 - WordPress Required
 * 9 - Responsiveness
 */

/*
 * 1 - CSS Reset
 *
 * Resets default browser CSS styles for consistent styling in all browsers.
 * Derived from the CSS reset used by the WordPress Team in their theme
 * TwentyThourteen.
 *
 */

html, 
body, 
div, 
span, 
applet, 
object, 
iframe, 
h1, 
h2, 
h3, 
h4, 
h5, 
h6, 
p, 
blockquote, 
pre, 
a, 
abbr, 
acronym, 
address, 
big, 
cite, 
code, 
del, 
dfn, 
em, 
font, 
ins, 
kbd, 
q, 
s, 
samp, 
small, 
strike, 
strong, 
sub, 
sup, 
tt, 
var, 
dl, 
dt, 
dd, 
ol, 
ul, 
li, 
fieldset, 
form, 
label, 
legend, 
table, 
caption, 
tbody, 
tfoot, 
thead, 
tr, 
th, 
td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}

td:nth-child(odd),
th:nth-child(odd) {
	background: #f7f7f7;
}

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

audio,
canvas,
video {
	display: inline-block;
	max-width: 100%;
}

html {
	overflow-y: scroll;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust:     100%;
	width: 100%;
	margin: 0;
	padding: 0;
	border-top: 5px solid #3a3a3a;
	background: #ffffff;
	height:100%;
}

button,
input,
select,
textarea {
	color: #585858;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
}

body {
	margin:0;
	padding:0;
	font-size: 13px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	color: #363636;
	padding: 0;
	min-height: 100%;
	position: relative;
}

#wrapper {
	width: 980px;
	margin: 0 auto;
	padding-bottom: 32px;
	max-width: 96%;
}

a {
	color: #0023a5;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	text-decoration: none;
}

a:active,
a:hover {
	color: #ff5a00;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	color: #3a3a3a;
	font-weight: 600;
	margin: 28px 0 12px;
}

h1 {
	font-size: 20px;
	line-height: 1.3846153846;
}

h1 a {
	color: #3a3a3a;
}

h1 a:hover {
	color: #ff5a00;
}

h2 {
	font-size: 18px;
	line-height: 1;
}

h3 {
	font-size: 16px;
	line-height: 1.0909090909;
}

h4 {
	font-size: 14px;
	line-height: 1.2;
	margin-top: 20px;
}

h5 {
	font-size: 12px;
	line-height: 1.3333333333;
	margin-top: 20px;
	font-weight: 700;
}

h6 {
	font-size: 10px;
	line-height: 1.5;
	margin-top: 20px;
	font-weight: 700;
}

address {
	font-style: italic;
	margin-bottom: 24px;
}

abbr[title],
acronym[title] {
	border-bottom: 1px dotted #2b2b2b;
	cursor: help;
}

b,
strong {
	font-weight: 700;
}

cite,
dfn,
em,
i {
	font-style: italic;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

p {
	margin-bottom: 8px;
	line-height: 24px;
}

code,
kbd,
tt,
var,
samp,
pre {
	font-family: monospace, serif;
	font-size: 15px;
	-webkit-hyphens: none;
	-moz-hyphens:    none;
	-ms-hyphens:     none;
	hyphens:         none;
	line-height: 1.6;
}

pre {
	border: 1px solid rgba(0, 0, 0, 0.1);
	-webkit-box-sizing: border-box;
	-moz-box-sizing:    border-box;
	box-sizing:         border-box;
	margin-bottom: 24px;
	max-width: 100%;
	overflow: auto;
	padding: 12px;
	white-space: pre;
	white-space: pre-wrap;
	word-wrap: break-word;
}

blockquote,
q {
	-webkit-hyphens: none;
	-moz-hyphens:    none;
	-ms-hyphens:     none;
	hyphens:         none;
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
	content: none;
}

blockquote {
	color: #767676;
	font-size: 15px;
	font-style: italic;
	font-weight: 300;
	line-height: 1.2631578947;
	margin-bottom: 24px;
}

blockquote cite,
blockquote small {
	color: #2b2b2b;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

blockquote em,
blockquote i,
blockquote cite {
	font-style: normal;
}

blockquote strong,
blockquote b {
	font-weight: 400;
}

small {
	font-size: smaller;
}

big {
	font-size: 125%;
}

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

sup {
	bottom: 1ex;
}

sub {
	top: .5ex;
}

dl {
	margin-bottom: 24px;
}

dt {
	font-weight: bold;
}

dd {
	margin-bottom: 24px;
}

ul,
ol {
	list-style: none;
	margin: 0 0 24px 20px;
}

ul {
	list-style: disc;
}

li > ul {
	list-style-type: circle;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin: 0 0 0 20px;
}

img {
	-ms-interpolation-mode: bicubic;
	border: 0;
	vertical-align: middle;
	max-width: 100%;
	height: auto;
}

figure {
	margin: 0;
}

fieldset {
	border: 1px solid rgba(0, 0, 0, 0.1);
	margin: 0 0 24px;
	padding: 11px 12px 0;
}

legend {
	white-space: normal;
}

button,
input,
select,
textarea {
	-webkit-box-sizing: border-box;
	-moz-box-sizing:    border-box;
	box-sizing:         border-box;
	font-size: 100%;
	margin: 0;
	max-width: 100%;
	vertical-align: baseline;
}

button,
input {
	line-height: normal;
}

input,
textarea {
	/* Removes the inner shadow, rounded corners on iOS inputs */
	background-image: -webkit-linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,100%,0));
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
}

button[disabled],
input[disabled] {
	cursor: default;
}

input[type="checkbox"],
input[type="radio"] {
	padding: 0;
}

input[type="search"] {
	-webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

textarea {
	overflow: auto;
	vertical-align: top;
}

table,
th,
td {
	border: 1px solid rgba(0, 0, 0, 0.05);
}

table {
	border-collapse: separate;
	border-spacing: 0;
	border-width: 1px 0 0 1px;
	margin-bottom: 24px;
	width: 100%;
}

caption,
th,
td {
	font-weight: normal;
	text-align: left;
}

th {
	border-width: 0 1px 1px 0;
	font-weight: bold;
	padding: 4px 6px;
}

td {
	border-width: 0 1px 1px 0;
	padding: 4px 6px;
}

del {
	color: #767676;
}

hr {
	background-color: rgba(0, 0, 0, 0.1);
	border: 0;
	height: 1px;
	margin-bottom: 23px;
}

.left {
	float: left;
}

.right {
	float: right;
}

.clear {
	clear: both;
}

.two-col {
	width: 45%;
	margin-bottom: 8px;
}

/*
 * 2 - Header (inc. Navigation)
 *
 * CSS for the header section, including the navigation menu and
 * logo/site title. 
 *
 */

#logo {
	float: left;
	margin-top: 20px;
	width: 175px;
}

#page_header {
	width: 805px;
	float: right;
}

#title_and_nav {
	border-bottom: 1px solid #e5e5e5;
}

#site_title {
	float: left;
	width: 200px;
	margin: 20px 0 20px 0;
	font-size: 30px;
	font-weight: 700;
	line-height: 24px;
}

#site_description {
	font-weight: 300;
	font-size: 24px;
	line-height: 28px;
	color: #3a3a3a;
	margin: 36px auto 0 auto;
	text-align: center;
}

#primary_nav {
	float: right;
	position: relative;
	z-index: 99999;
}

#primary_nav .menu {
	list-style-type: none;
	margin: -5px 0 0;
	position: relative;
}

#primary_nav .menu > li {
	display: block;
	border-top: 5px solid #3a3a3a;
	border-bottom: 2px solid transparent;
	height: 88px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	float: left;
	position: relative;
	overflow: visible;
}

#primary_nav .menu > li:hover {
	background: #f5f4f4;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

#primary_nav .menu .current-menu-parent, #primary_nav .menu .current-menu-item {
	border-top-color: #0023a5;
	border-bottom-color: #0023a5;
}

#primary_nav .menu a {
	display: block;
}

#primary_nav .menu > li > a {
	padding: 27px 12px 0 12px;
	height: 61px;
	color: #3a3a3a;
	text-align: center;
}

#primary_nav .menu a > .description {
	color: #aeaeae;
	font-size: 11px;
	font-style: italic;
	margin-top: -1px;
	display: block;
}

#primary_nav .menu ul {
	margin: 0;
	opacity: 0;
	display: none;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	position: absolute;
	top: 90px;
}

#primary_nav .menu ul a {
	color: #ffffff;
	font-size: 11px;
	padding: 7px 20px 7px 10px;
}

#primary_nav .menu ul ul {
	top: -1px;
	left: 160px;
}

#primary_nav .menu li:hover > ul {
	display: block;
	opacity: 1;
	float: none;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

#primary_nav .menu ul > li.menu-item:hover {
	background: #252525;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

#primary_nav .menu ul li.menu-item {
	float: none;
	list-style-type: none;
	width: 160px;
	background: #3a3a3a;
	border-bottom: 1px solid #252525;
	border-top: 1px solid #4c4c4c;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	position: relative;
}

/*
 * 3 - Image Sliders
 * -----------------
 * Styles for the image slider on the front page and gallery pages, most 
 * styles can be found in bjqs.css
 */
#front_slider {
	margin-top: 40px;
}

#front_slider .flex-direction-nav a  {
	top: 55%;
}

.gallery_slider {
	margin-bottom: 20px;
	margin-top: 20px;
}

.gallery_slider .slides .slide-container {
	height: 100%;
	position: relative;
	background: #e5e5e5;
}

.gallery_slider .flex-control-thumbs {
	width: 110%;
	margin-left: -10px;
	margin-top: 8px;
}

.gallery_slider .flex-control-thumbs img
{
	transition: all 0.5s;
	opacity: 0.5;
}

.gallery_slider .flex-control-thumbs img:hover
{
	transition: all 0.5s;
	opacity: 1;
}

.gallery_slider ul.slides {
	height: 654px;
}

#front_slider.flexslider .flex-direction-nav .flex-next {
	right: 0px;
}

#front_slider.flexslider .flex-direction-nav .flex-prev {
	left: 0px;
}

.gallery_slider .flex-direction-nav a {
	top: 280px;
	opacity: 0.9;
}

/*
 * 4 - Footer
 * ----------
 * A very simply footer, mainly to add a border to the bottom of the 
 * website. Also for back to top link.
 */
#footer {
	color: #6c6c6c;
	font-size: 13px;
	background: #3a3a3a;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

#footer a {
	color: #9c9c9c;
}

#footer a:hover {
	color: #ff5a00;
}

#footer span {
	margin: 7px 0;
}

#footer #footer_content {
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
}

/*
 * 5 - Articles
 * ------------
 * This styling is for all areas of text, which are contained
 * within article tags - not just the 'Article' post type
 */
article.page,
article.makins_article,
article.makins_gallery,
.single-post article.post {
	margin-top: 35px;
	margin-bottom: 50px;
}

.home article {
	width: 45%;
	float: left;
	margin-top: 15px;
}

.home article h1,
.home #events-calendar h1 {
	margin-top: 36px;
}

.home #events-calendar {
	width: 45%;
	float: right;
	margin-top: 15px;
	margin-bottom: 50px;
}

.home #events-calendar h1 {
	margin-bottom: 15px;
}

.home #events-calendar h3 a {
	color: #3a3a3a;
}

article h1 {
	margin-top: 20px;
}

.article-thumbnail {
	margin-top: 36px;
	text-align: center;
}

.single-makins_article h1.page-title {
	margin-top: 20px;
}

#gallery-left-col,
#article-left-col {
	width: 70%;
	float: left;
	border-right: 1px solid #e5e5e5;
	padding-right: 25px;
	margin-bottom: 50px;
}

#gallery-left-col {
	margin-top: 35px;
	margin-bottom: 0px;
}

.sidebar {
	width: 25%;
	float: right;
}

#gallery-left-col .makins_gallery {
	margin-top: 22px;
	padding-top: 28px;
	border-top: 1px dotted #e5e5e5;
}

#article-left-col .makins_article {
	margin-bottom: 22px;
	padding-bottom: 28px;
	border-bottom: 1px dotted #e5e5e5;
}

.news-article {
	padding-bottom: 20px;
	border-bottom: 1px solid #e5e5e5;
	margin-bottom: 40px;
}

.news-date {    
	margin-top: -10px;
    	display: block;
   	margin-bottom: 10px;
}

.sidebar ul.recent {
	list-style-type: none;
	margin-left: 2px;
}

.sidebar ul.recent a {
	color: #585858;
}

.sidebar ul.recent a:hover {
	color: #ff5a00;
}

 #searchsubmit {
 	font-family: FontAwesome;
 	background: none;
 	border: 0;
 }

 #searchsubmit:before {
 	content: '\f002';
 	font-size: 16px;
 	color: #aeaeae;
 }

 #search_input {
 	border: 1px solid #e5e5e5;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	padding: 5px 8px;
 }

.page-numbers {
	display: inline-block;
	padding: 12px;
	line-height: 14px;
	font-size: 14px;
	background: #d5d5d5;
	color: #3a3a3a;
}

a.page-numbers {
	color: #6a6a6a;
	background: #e5e5e5;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

a.page-numbers:hover {
	background: #d5d5d5;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.pagination-nav {
	text-align: center;
	margin-top: 30px;
}

/*
 * 6 - Events
 * ----------
 * This styling is for the page containing the list of events,
 * the events on the front page and the events in the sidebar.
 */

 .date_stamp {
 	width: 55px;
 	text-align: center;
 	float: left;
 }

 .date_stamp .date_num {
 	font-size: 20px;
 	line-height: 20px;
 	width: 100%;
 	padding: 14px 0;
 	background: #f5f4f4;
 	color: #3a3a3a;
 }

 .date_stamp .date_my {
 	width: 100%;
 	height: 18px;
 	font-size: 11px;
 	color: #f5f4f4;
 	background: #3a3a3a;
 }

 .event_details {
 	margin-left: 72px;
 }

 .event_widget_details {
 	margin-left: 65px;
 }

 .event_details h3 {
 	clear: none;
 	margin-top: 3px;
 	font-size: 14px;
 	margin-bottom: 10px;
 }

 .event_excerpt {
 	margin-bottom: 20px;
 }

 .date_stamp_small {
 	width: 45px;
 }
 
  .date_stamp_small .date_num {
  	font-size: 16px;
  	line-height: 16px;
 	padding: 11px 0;
  }

 .event_left_col {
 	float: left;
 	width: 60%;
 }

 .event_map {
 	height: 220px;
 	width: 35%;
 	float: right;
 }

 .event_map img {
 	max-width: none;
 }

 .event_postcode {
 	margin-top: -15px;
 }

 .post-type-archive-makins_event .event_excerpt {
 	padding-bottom: 20px;
 	margin-top: 25px;
 	border-bottom: 1px dotted #e5e5e5;
 }

 .search_title {
 	margin-top: 0px;
 }

 .search_title span {
 	font-weight: 400;
 }

/*
 * 7 - Contact Form Styles
 * -----------------------
 * This styling is for the contact form.
 */

 #contact-form .form-control {
	background-color: #f4f4f4;
	-webkit-box-shadow: none;
	box-shadow: none;
	border-color: #efefef;
}

#contact-form input[type=text],
#contact-form textarea,
#contact-form select {
	padding: 5px;
	width: 100%;
	border-radius: 5px;
	border: 1px solid #d5d5d5;
}


#contact-form input[type=text]:focus,
#contact-form textarea:focus {
	border-color: #66AFE9;
}

#contact-form textarea {
	resize: none;
	min-height: 140px;
}

#contact-form p {
	width: 350px;
	max-width: 100%;
}

#contact-form p.fcontrol.error, 
#contact-form p.fcontrol.success {
	position: relative;
}

#contact-form p.fcontrol.error:after, 
#contact-form p.fcontrol.success:after {
	font-family: 'FontAwesome';
	position: absolute;
	top: 2px;
	right:6px;
	font-size: 14px;
}

#contact-form p.fcontrol.error input, 
#contact-form p.fcontrol.error select {
	border: 1px solid #FF6F6F;
}

#contact-form p.fcontrol.success input, 
#contact-form p.fcontrol.success select {
	//border: 1px solid #3CFF72;
}

#contact-form input[type=submit] {
	border: 0;
	background: #e5e5e5;
	border-radius: 6px;
	padding: 6px 18px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

#contact-form input[type=submit]:hover {
	background: #d2d2d2;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.sent {
	text-align: center;
	background-color: #CBF5E5;
	border-radius: 4px;
	color: #1b8c61;
	border: 1px solid #B8E7D5;
	display: none;
	margin: 10px 0;
	width: 350px;
	max-width: 100%;
}

.sent span {
	padding: 12px 6px;
	display: block;
}

/*
 * 8 - WordPress Required
 * ----------------------
 * This styling is for the default WordPress required styles, such
 * as image alignment and captions.
 */

 .alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 20px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

a img.alignright {
    float: right;
    margin: 20px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 7px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 14px 14px 14px 0;
}

.wp-caption.alignleft {
    margin: 15px 15px 15px 0;
}

.wp-caption.alignright {
    margin: 12px 0 12px 10px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 5px 4px 0;
}

/*
 * 9 - Responsiveness
 * ----------------------
 * This styling causes the website to adapt to different
 * screen sizes
 */

@media screen and (min-width: 980px) and (max-width: 1040px) {
	#page_header {
		width: 742px;
	}

	#primary_nav .menu > li > a {
		padding: 27px 10px 0 10px;
	}

	#primary_nav .menu ul li.menu-item {
		width: 120px;
	}

	#primary_nav .menu ul ul {
		left: 120px;
	}
}

@media screen and (max-width: 980px) {
	#page_header {
		width: 672px;
	}

	#primary_nav .menu > li > a {
		padding: 27px 10px 0 10px;
	}

	#primary_nav .menu ul li.menu-item {
		width: 120px;
	}

	#primary_nav .menu ul ul {
		left: 120px;
	}
}

@media screen and (min-width: 890px) and (max-width: 920px) {
	#logo {
		width: 145px;
	}
}

@media screen and (min-width: 870px) and (max-width: 890px) {
	#logo {
		width: 125px;
	}
}

@media screen and (min-width: 850px) and (max-width: 870px) {
	#logo {
		width: 105px;
	}
}

@media screen and (min-width: 830px) and (max-width: 850px) {
	#logo {
		width: 85px;
	}

	#site_description {
		margin-left: -85px;
	}
}

@media screen and (min-width: 800px) and (max-width: 830px) {
	#logo {
		width: 58px;
	}

	#site_description {
		margin-left: -65px;
	}
}

@media screen and (max-width: 800px) {
	#page_header {
		width: 99%;
		float: none;
	}

	#primary_nav .menu > li {
		border-top: 5px solid transparent;
	}

	#logo {
		margin-bottom: 30px;
		float: none;
	}

	#logo_container {
		display: block;
		width: 100%;
		text-align: center;
		margin-bottom: 4px;
		border-bottom: 1px solid #e5e5e5;
	}
}

@media screen and (max-width: 700px) {
	#site_title {
		display: none;
	}
}