/*
Theme Name: Breann
Theme URI: http://mikejohnsondesign.com/breann-wordpress-theme/
Description: Breann is a responsive theme for displaying your pictures, web-projects, or anything else you desire. It's great for being a blog site too! Included is an options panel for uploading logos, changing colors, showing/hiding certain page elements, and more! Visit the <a href="http://mikejohnsondesign.com/breann-wordpress-theme/" target="_blank">breann demo site</a>, learn to <a href="http://www.shareasale.com/r.cfm?B=471146&U=766864&M=43811&urllink=" target="_blank">customize your site</a> by increasing your coding skills, or add a <a href="http://mikejohnsondesign.com/support/" target="_blank">support ticket</a>.
Author: Mike Johnson Design (@BestWPDesigner)
Author URI: http://mikejohnsondesign.com
Tags: blue, gray, white, light, two-columns, left-sidebar, right-sidebar, flexible-width, custom-background, custom-menu, featured-images, full-width-template, sticky-post, threaded-comments
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: breann
*/

@import url("css/reset.css");
@import url("fonts/headings/stylesheet.css");
@import url("fonts/content/opensans.css");

/*  
	-----------------------
	EMBEDDED HEADING FONTS:
	-----------------------
	Duke (Regular) font-family: "Duke Regular"
	League Gothic (Regular) font-family: "League Gothic Regular"
	OSP (Regular) font-family: "OSP Regular"
	Ostrich (Black, Bold, Dashed Medium, Light, Medium, Rounded Medium) font-family: "Ostrich Bold (etc)"
	
	----------------------
	EMBEDDED CONTENT FONT:
	----------------------
	Open Sans (Bold, Light, Regular) font-family: "Open Sans Bold"

	---------------
	CHANGING COLORS
	---------------
	You must have an understanding about how CSS works to make changes to this page. If you don't, please check out
	this website: Treehouse - http://bit.ly/Z6stEk
	
	Since I know most people will want to change specific colors on their new website, I've added the styling for 
	each most of the colored elements directly below so you don't have to go searching for it. I really hope this helps! 
	
	- Mike
	http://MikeJohnsonDesign.com
	----------------------
*/  

/*  
    ----- 
    COLOR 
    -----
*/
	
.alignright, img.alignright {
	border: 5px solid #EFEFEF;
}

.alignleft, img.alignleft {
	border: 5px solid #EFEFEF;
}

.aligncenter, img.aligncenter {
	border: 5px solid #EFEFEF;
}	

body {
	background: #F7F7F7;
}

#header_wrap {
	background: #d9d9d9;
	border-bottom: 1px solid #DEDEDE;
}

#nav li.current_page_item a, 
#nav li.current_page_item a:hover {
	background: #FFF;
	color: #1B1B1B;
}

#nav li ul li a:hover {
	background: #CCC;
}

#my_slideshow {
	border: 6px solid #CCC;
}

.page_nav_wrap {
	background: #FFF;
	border: 1px solid #EFEFEF;
}

.page_nav .page-numbers{
	border: 1px solid gray;
}

.page_nav .current{
	border: 1px solid #CCC;
	background-color: #EFEFEF;
}

.page_nav .prev, .page_nav .next{
	background: #56a7cd;
	border: 1px solid #0099FF;
}

.page_nav .prev:hover, .page_nav .next:hover {
	background: #0099FF;
	border: 1px solid #56a7cd;
}

#respond {
	/* The background image below is the dotted one right above the "leave a reply" 
	   section - comments area. */
	background: url(images/comments-hr.png) no-repeat left top;
}

.hentry {
	background: #FEFEFE;
	border-bottom: 2px solid #EFEFEF;
	border-right: 2px solid #EFEFEF;
}

.article.left_sidebar {
	border-bottom: 2px solid #EFEFEF;
	border-left: 2px solid #EFEFEF;
}

.widget_title {
	background: #EFEFEF;
	border-top: 1px solid #FFF;;
	border-bottom: 4px double #CCC;
}

#commentform input#submit:hover {
	/* This is for the "post comment" submit button HOVER state */
	border: 1px solid #b7b7b7;
	background: #e3e3e3;
}

li.comment {
	border: 1px dashed #EFEFEf;
}

li.comment-author-admin {
	background: #f8fdff;
}


form#commentform input, #commentform textarea {
	border: 1px solid #CCC;
}

li.comment .fn { 
	background: #EFEFEF; 
	border-bottom: 4px double #CCC;
	border-top: 1px solid #FFF;
}

li.comment-author-admin .fn {
	background: #447f9a;
	border-bottom: 4px double #7fabbf;
}

#reply-title { 
	color: #0099FF; 
}

/* Social Media Icons - Size is 32 x 32 (pixels) */	
ul.social_media_icons li.facebook a {
	background: url(images/social/facebook.png) no-repeat 0 0;
}

ul.social_media_icons li.twitter a {
	background: url(images/social/twitter.png) no-repeat 0 0;
}

ul.social_media_icons li.googleplus a {
	background: url(images/social/googleplus.png) no-repeat 0 0;
}

ul.social_media_icons li.youtube a {
	background: url(images/social/youtube.png) no-repeat 0 0;
}
	

/*	--------------------------
	START OF ALL OTHER STYLING 
	-------------------------- 
*/
.sticky {}
.small {font-size: 12px;}
.alignright, img.alignright {
	float: right;
	margin: 5px 0 5px 15px;
	display: inline;
}
.alignleft, img.alignleft {
	float: left;
	margin: 5px 15px 5px 0;
	display: inline;
}
.aligncenter, img.aligncenter {
	display: block;
	margin: 5px auto;
	float: none;
}	

h1, h2, h3, h4, h5, h6 {
	font-family: "League Gothic Regular", "OSP Regular", "Duke Regular", Helvetica, sans-serif;
	text-transform: uppercase;
}

h1 { font-size: 50px; }
h2 { font-size: 35px; line-height: 35px; }
h3 { font-size: 25px; line-height: 25px; }
h4 { font-size: 22px; line-height: 22px; }
h5 { font-size: 18px; line-height: 18px; }
h6 { font-size: 15px; line-height: 15px; }

body {
	margin: 0;
	padding: 0;
	font: normal 17px/28px "Open Sans Regular", "Helvetica Neue", Helvetica, Verdana, sans-serif;
	color: #333;
}

#wrapper {
   	max-width: 1200px;
   	width: 90%; /* Where responsive magic happens */
   	min-width: 320px;
   	margin: 20px auto;
   	clear: both;
}

#header {
	max-width: 1200px;
   	width: 100%; /* Where responsive magic happens */
   	min-width: 320px;
   	margin: 0 auto;
}

#header_wrap {
	width: 100%;
	padding: 0;
	background: url(images/bg/bg-9.png) repeat;
}

#header {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
}

#logo {
    	display: inline-block;
    	line-height: 1;
    	margin: 10px 0 0;
    	z-index: 9;
   	min-height: 42px;
    	padding: 15px 25px 9px 15px;
    	position: relative;
    	text-shadow: 0 1px #FFF;
}


#header h1.logo_image a img {
	width: 270px;
	height: 90px !important;
	float: left;
	display: block;
}
	
	#nav {
		padding: 0;
		float: right;
		margin: 30px 0 0;
		position: relative;
		padding: 0;
		z-index: 999;
	}

	#nav select { 
		display: none;
		max-width: 300px;
		width: 100%;
		margin: 0 auto 20px; 
	}
		
	#nav li {
		float: left; 
		zoom: 1; 
	}
	
	#nav li:first-child {
		border-left: none;
	}
	
	#nav li:last-child {
		border-right: none;
	}
	
	#nav li a {
		display: block; 
		font-family: "Droid Sans", "Helvetica Neue", Arial, Verdana, sans-serif;
		font-weight: normal;
		font-size: 15px;
		color: #56a7cd;
		text-transform: uppercase;
		padding: 5px 15px;
	}
	
	#nav li a:hover {
		color: #1B1B1B;
	}
	
	#nav li.current_page_item a, 
	#nav li.current_page_item a:hover {
		border-radius: 7px;
	}
	
	/* ----- Drop Down Menu Styling ----- */
	
	#nav li:hover,
	#nav li:hover a {
		position: relative;
	}
	
	#nav li a:hover,
	#nav li a:active { 
		text-decoration: none;
	}
	
	
	/* ----- LEVEL TWO ----- */
	#nav li ul { 
		width: 200px; 
		visibility: hidden; 
		position: absolute; 
		z-index: 2; 
		top: 100%; 
		left: 0;  
		margin-left: 0; 
		background: #FFF;
		box-shadow: 0 0 5px rgba(0,0,0,0.3);
	}
	
	#nav li ul li {  
		float: none; 
		width: 200px; 
		border-right: none;
		border-left: none;
	}
	
	#nav li ul li a { 
		border-right: none;
		border-left: none;
		border-bottom: 1px solid #CCC;
		width: 180px;  
		padding: 5px 10px; 
		display: inline-block; 
		color: #1b1b1b !important;
		margin: 0 !important;
	}
	
	#nav li.current_page_item ul li a {
		width: 180px;
		background: none;
		border-radius: 0;
		border-bottom: 1px solid #CCC;
	}
	
	#nav li.current_page_item ul li a:hover {
		color: #FFF;
		border-radius: 0;
		background: #CCC;
	}
	
	
	/* ----- LEVEL THREE ----- */
	#nav li ul li ul { 
		left: 100%; 
		top: 0; 
		border-radius: 0;
		background: url(images/nav_bottom.gif) repeat-x bottom;
	}
	
	#nav li ul li ul li a { 
		border-radius: 0;
		background-color: #FFF !important; 
		background-image: none !important;
		background: url(images/nav_bottom.gif) repeat-x bottom;
	}
	
	#nav li ul li ul li a:hover {
		border-radius: 0;
		background-color: #CCC !important;
		background-image: none !important;
		background: url(images/nav_bottom.gif) repeat-x bottom;
	}
	
	#nav li:hover > ul { 
		visibility: visible; 
	}
	
	#nav li ul li.current_page_item a, 
	#nav li ul li.current_page_item a:hover {
		border-radius: 0;
		background: #CCC;
		color: #FFF;
	}

	.page_nav_wrap {
		padding: 5px;
		display: table;
		text-align: center;
		box-shadow: 0 0 3px rgba(0,0,0,0.1);
	}

	.page_nav .page-numbers{
		padding: 2px 8px;
		margin: 0px 4px;
		color: #000;  
		font-size: 12px;
	}
	
	.page_nav .current{}
	
	.page_nav .prev, .page_nav .next{
		color: #FFF;
		font-weight: bold;
	}

	.page_nav .prev:hover, .page_nav .next:hover {}

#my_slideshow_outer {
	width: 100%;
	display: block;
	margin: 0;
	padding: 0 0 30px;
}
	
#my_slideshow {
	max-width: 1188px;
	width: 100%;
	margin: 0 auto;
	height: auto;
	position: relative;
	top: 15px;
	clear: both;
}

#my_quote {
	max-width: 1200px;
	margin: 20px auto;
	clear: both;
	text-align: center;
	font-size: 30px;
	line-height: 40px;
	padding: 20px 0;
	background: #F7F7F7;
	border-top: 1px dashed #CCC;
	border-bottom: 1px dashed #CCC;
}

#my_quote .widget_home { border-bottom: none; padding: 0; margin: 0;}

#content {
   width: 75%;
   float: left;
   position: relative;
}

#content.wide {
	width: 100%;
	float: none;
}

#content p {
	margin: 0 0 15px;
}

#respond {
	padding: 50px 0 0;
	margin: 10px 0 0;
	display: block;
	width: 100%;
}

textarea { width: 95%; }


ul.social_media_icons li {text-indent: -99999px;}
ul.social_media_icons li a {
	float: left;
	width: 32px;
	height: 32px;
	margin: 5px 10px;
	display: inline;
}

.images_toggle_single {
	overflow: hidden;
	
}

	.featured_image {
		max-width: 100%;
		height: auto;
		position: relative;
	}

	.featured_image.collapsed {
		height: 100px;
	}
	
	.featured_image .caption {
		position: absolute;
		top: -35px;
		text-align: center;
    	color: #FFF;
		padding: 10px;
		background: rgba(0,0,0,0.8);
	}
	
	.gallery-caption, .wp-caption-text { 
		font-size: 14px;
		line-height: 18px;
		padding: 10px; 
		text-align: center;
	}

	.hentry {
		position: relative;
		margin-bottom: 50px;
		box-shadow: 3px 3px 10px rgba(0,0,0,0.05);
	}
	
	.article.left_sidebar {
		margin-bottom: 50px;
		box-shadow: -3px 3px 10px rgba(0,0,0,0.05);
	}
	
	.hentry h2.entry_title {
		font-family: "League Gothic Regular", "Helvetica Neue", Helvetica, sans-serif;
		text-transform: uppercase;
		margin: 20px 0 0;
		color: #1b1b1b;
	}
	
	.entry { 
		width: 94%;
		padding: 3%;
		position: relative; 
	}
	
	.entry_meta {
		width: 96%;
		padding: 0 2% 1% 0;
		position: relative;
		display: block;
		font-size: 12px;
	}
	
	#searchform input { 
		width: 43%;
		margin-right: 5px;
		display: inline; 
		float: left; 
	}
	
	#searchform input#searchsubmit { 
		border: 1px solid #CCC; 
		padding: 3px 6px;
		cursor: pointer;
	}
	
#sidebar {
   	width: 22%;
   	padding: 0 0 5% 3%;
   	float: right;
   	display: inline;
   	margin-bottom: 40px;
}

#sidebar.left_sidebar {
	padding: 0 3% 5% 0;
	width: 22%;
	float: left;
}

.widget_title {
   	box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    display: inline-block;
    font-family: 'Oswald',arial,serif;
    font-size: 25px;
    line-height: 1;
    margin: 0 0 10px;
    box-shadow: 0 3px 10px rgba(255,255,255,0.5);
   	min-height: 20px;
    padding: 5%;
    position: relative;
    color: #999;
    text-shadow: 1px 1px 1px #fff;
    text-transform: uppercase;
    font-family: "League Gothic Regular", "Droid Sans", verdana, sans-serif;
    width: 90%;
}

table {
	width: 95%;
}

.widget {
	padding-bottom: 10px;
	background: #fff;
	border-bottom: 1px solid #DDD;
	margin-bottom: 30px;
}

.widget a {
	line-height: 28px;
}

.widget ul, .widget ol, .widget div, .widget select {
	padding: 2% 5%;
}

.widget p {
	padding: 0 5% 0 0;
	margin-left: 5%;
	margin-bottom: 10px;
	white-space: normal;
}

.widget_home {
	padding-bottom: 0 !important;
	margin: 0;
	background: none !important;
}

.widget.contact_sidebar p strong { 
	text-transform: uppercase;
	font-family: "League Gothic Regular","Droid Sans",verdana,sans-serif;
	font-size: 20px;
	text-shadow: none;
	letter-spacing: 1px;
	color: #999;
}

#footer {
	clear: both;
	text-align: right;
	font-size: 12px;
}

#menu-footer {
	width: 100%;
}

#menu-footer li {
	float: left;
	margin: 0 10px;
	display: inline;
}

/* Contact Form 7 */
.wpcf7-form input, .wpcf7-form textarea {
	border: 1px solid #CCC;
	padding: 6px 3px;
	font-family: "Droid Sans", arial, sans-serif;
	font-size: 14px;
}

/* Comments */
.comments-title {
	padding: 0 0 10px;
}

.comment-form-comment label {
	width: 10%;
	float: left;
	margin-right: 10px;
}

li.comment {
	position: relative;
	padding: 1%;
}

li.comment-author-admin {
	
}


form#commentform input, #commentform textarea {
	padding: 5px;
	clear: both;
	display: block;
	width: 50%;
	float: none;
}

#commentform textarea {
	width: 70%
}

#commentform input#submit {
	width: 15%;
	cursor: pointer;
}

.comment-content {
	font-size: 14px;
	line-height: 22px;
	padding: 10px 5px;
}

.reply {
	position: absolute;
	right: 10px;
	top: 10px;
}

li.bypostauthor cite span { 
	display: none;	
}

li.comment .fn { 
	padding: 2px 5px; 
	color: #999; 
	text-transform: uppercase; 
	font-size: 12px; 
	margin-right: 5px;
}

li.comment-author-admin .fn {
	color: #FFF;
}

.comment-meta time { clear: both; font-size: 12px; }

#reply-title {}

.avatar {
	float: left;
	margin: 0 10px 10px 0;
	display: inline;
}

.footer p, 
.footer p a, 
.do_not_remove {
	color: #999;
}

.hide_desktop {
	display: none;
	clear: both;
	width: 100%;
}

@media screen and (max-width: 900px){
	#blue_wrap { background: none; }
	#logo { width: 100%; text-align: center; }
	#header_wrap { height: 100px;}
	#header h1.logo_image a { display: table; text-align: center; float: none; margin: 0 auto 25px; }
	#nav { float: none; margin: 0 0 20px; }
	#nav ul     { display: none; }
    	#nav select { display: table; clear: both; margin: 15px auto 5px; }
	#wrapper { margin-top: 20px; }
	#my_slideshow { margin-top: 30px; width: 90%;}
	#my_quote {width: 90%; margin: 10px auto;}
}

@media screen and (max-width: 768px){
	#logo {
		float: none;
		width: 93%;
		text-align: center;
	}

	#nav select {display: block; margin-bottom: 20px;}
	#content,
	#content.wide,
	#sidebar {
		width: 100%;
		padding: 0;
		float: none;
		clear: both;
		display: block;
	}
	#sidebar {
		margin-top: 30px;
	}
	.hide_mobile {display: none;}
	.hide_desktop { display: block; float: none; clear: both; width: 100%;}
	.widget {
		background: #FFF;
	}
	.widget_title {
		padding: 2% 5%;
		width: 90%;
	}
	.widget ul, .widget ol, .widget div, .widget select {
		margin-left: 20px;
	}
	#my_quote {
		font-size: 16px;
		line-height: 22px;
	}

}