/*
 Theme Name:     Florida Truck Washouts
 Theme URI:      http://theme.squidserver.org
 Description:    A Child Theme for the Squid Framework.
 Author:         DigiSquid
 Author URI:     http://digisquid.com
 Template:       squid
 Version:        1.0.0
*/
 
@import url("../squid/style.css");
 
/* !Start Custom Theme CSS ============================================================== */

/* !Typography ============================================================== */
body { /* Base Font Size */
	font-family: Arial;
	font-size: 14px;
	line-height: 18px;
}

h1,
h2,
h3,
h4,
h5,
h6 { /* Headlines */
	font-family: 'Raleway', sans-serif;
	color: #336b87;
	margin-top: 25px;
	padding-bottom: 10px;
	line-height: 1em;
}

p,
li { /* Body Copy */
	text-align: left;
	padding-bottom: 10px;
	line-height: 1.75em;
}

a:link,
a:visited { /* Site Links */
	color: #ACACAC;
	text-decoration: none;
}

a:hover,
a:active { /* Site Links */
	color: #C5C5C5;
	text-decoration: none;
}

/* !Framework ============================================================== */
body { /* Main Site Body */
	color: #000000;
	background: #ffffff url(images/bkg.jpg) no-repeat fixed 0 top;
}

/* !Masthead ============================================================== */
#mastheadwrap {/* Wraps the masthead */
	background: url(images/bluegem.png) repeat 0 top;
}

#masthead { /* Masthead */
	background:transparent;
}

#mastheadblock { /* Masthead Block */
	height: 250px;
	text-align: left;
}

a#logo { /* Logo */
	display: inline-block;
	vertical-align: top;
	position: relative;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	width: 400px;
	height: 300px;
	top: 10px;
	left: -10px;
	background: url(images/logo.png) no-repeat 0 top;
	z-index: 1000;
}

div#topblock {
	display: inline-block;
	vertical-align: top;
	position: absolute;
	box-sizing: border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing: border-box;
	top: 35px;
	right: 0px;
	text-align: right;
	width: 450px;
	height: 150px;
}

#topblock p { /* Phone Number and such */
	
	text-align: right;
	font-size: 1.25em;
	line-height: 1.25em;
	color: #FFFFFF;
}

#topblock p > a { /* Phone Number */
	color: #FFFFFF;
}

p#phone {
	font-size: 3em;
}

/* !Content ============================================================== */
#contentwrap { /* Wraps the content */
	background: transparent;
}

#content { /* Holds every element between the header and the footer. */
	background: #FFFFFF;
	text-align: left;
}

#contentblock { /* Holds the main site content */
	width: 100%;
}

/* !Footer ============================================================== */
#footerwrap {/* Wraps the footer */
	background: url(images/redgem.png) repeat 0 top;
}

#footer { /* The Footer, of course */
	background: #763626;
}

#footerblock { /* Holds footer content */
	
}

/* !Sidebar ============================================================== */
#sidebar { /* Site sidebar */
	width: 24%;
	background-color: #FAFAFA;
	margin-top: 25px; /* Should match content padding */
	padding: 20px;
}

#sidebar .sidebarwidget { /* Sidebar widget */
	width: 100%;
}

#sidebar div.sidebarwidget ul { /* Lists in the sidebar */
	margin-left: 0px;
}

#sidebar ul.sub-menu { /* Hides dropdowns in the sidebar */
	display: none;
}

#sidebar li { /* Lists in the sidebar */
	list-style: none;
	margin-bottom: 5px;
	padding: 0px;
}

/* !Navigation ============================================================== */
.navigation { /* Menu container */

}

.navigation a { /* Menu links */
	font-family: sans-serif;
}

.navigation div.main-menu { /* Main menu container */
	position: absolute;
	width: 100%;
	height: 50px;
	bottom: 0px;
	left: 0px;
	text-align: right;
	padding-left: 20px;
	padding-right: 20px;
	background: #336b87;
}

.navigation div.main-menu ul li a { /* Top Level Links */
	font-family: 'Raleway', sans-serif;
	font-size: 1.25em; /* Main menu font size */
	line-height: 50px; /* Menu Height */
	color: #FFFFFF; /* Menu text color */
	padding: 0 10px; /* Menu padding (spacing) */
}

.navigation div.main-menu ul ul li a { /* Child Links */
	background: #999999; /* Drop Down Background Color */
	line-height: 20px; /* Drop Down Height */
	color: #FFFFFF; /* Drop Down Text Color */
	width: 150px; /* Drop Down Width */
	padding: 20px; /* Drop Down Padding */
}

.navigation div.main-menu ul li a:hover {
	color: #FFFFFF; /* Text Hover */
	background-color: #763726; /* Hover Background Color */
}

.navigation div.main-menu ul ul a:hover {
	color: #FFFFFF; /* Drop Down Text Hover */
	background-color: #336b87; /* Hover Background Color */
}

.navigation div.main-menu ul li.current-menu-item a,
.navigation div.main-menu ul li.current-menu-parent a {	/* Drop Down Current Page Text Color */
	color: #FFFFFF;
}

.navigation div.main-menu ul li.current_page_item > a,
.navigation div.main-menu ul li.current-menu-ancestor > a { /* Drop Down Current Child Page Text Color */
	color: #FFFFFF;
}

.navigation ul ul {
	position: absolute;
	top: 50px; /* Drop Down Position */
	left: 0;
	float: left;
	width: 170px; /* Drop Down Container Width (Shadow box)*/
	z-index: 99999;
}

/* !Posts ============================================================== */
div#post {
	
}

#post div.postblock {
	margin-bottom: 25px;
	padding-bottom: 10px;
	border-bottom: 1px solid #717171;
}

#post div.postthumbnail {
	margin-right: 25px;
	padding: 5px;
}

#post div.postcontent {
	margin-bottom: 0px;
}

#post div.postthumbnail img {
	border: 1px solid #000000;
}

/* !Images ============================================================== */
img { /* Makes images responsive */
	max-width: 100%;
	height: auto;
}

#photoblock { /* Holds Featured Images */
	width: 100%;
	height: auto;
	text-align: center;
}

img.attachment-thumbnail {
	
}

img.alignright { /* Photo, align right */
	margin-left: 20px;
	margin-bottom: 10px;
}

.wp-caption.alignright { /* Photo with captions, align right */
	margin-left: 20px;
	margin-bottom: 10px;
	padding: 5px;
}

img.alignleft { /* Photo, align left */
	margin-right: 20px;
	margin-bottom: 10px;
}

.wp-caption.alignleft { /* Photo with captions, align left */
	margin-right: 20px;
	margin-bottom: 10px;
	padding: 5px;
}

p.wp-caption-text { /* Text for photos with captions */
	padding-bottom: 0px;
}

/* !Buttons ============================================================== */
p.button a {
	background-color: #999999;
	padding: 6px 24px 6px;
	border: 1px solid #FFFFFF;
}

p.button a:hover {
	background-color: #717171;
}

p.button a:link,
p.button a:visited {
	color: #FFFFFF;
}

/* !Responsive ============================================================== */

/* !Responsive - Less than 960 ============================================================== */
@media screen and (max-width: 960px) {

	#mastheadblock {
		text-align: center;
		height: auto;
	}
	
	div#topblock {
		display: inline-block;
		vertical-align: top;
		position: relative;
		box-sizing: border-box;
		-moz-box-sizing:border-box;
		-webkit-box-sizing: border-box;
		top: auto;
		right: auto;
		text-align: center;
		width: 100%;
		height: auto;
		padding: 25px 25px 0px 25px;
		background: url(images/bluegem.png) repeat 0 top;
	}
	
	div#topblock P {
		font-size: 2em;
		text-align: center;
	}
	
	div#topblock p#phone {
		display: inline-block;
		font-size: 3em;
		padding: 25px;
		margin: 0px 25px 25px 25px;
		background: #336b87;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		border-radius: 20px;
	}
	
	div#topblock p#phone:active {
		background: #763626;
	}

	a#logo { /* Mobile logo */
		display: inline-block;
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		width: 80%;
		margin: 25px;
		background-size: contain;
		background-position: center center;
	}

	.navigation div.main-menu {
		position: relative;
		text-align: center;
		height: 50px;
	}

	#content div.slider {
		padding: 20px;
	}

	#contentblock { /* Makes mobile content blocks fluid */
		width: 100%;
		text-align: left;
	}

	#footerblock { /* Makes mobile footer block fluid */
		width: 100%;
		text-align: center;
	}

	#footerblock p { /* Mobile footer text */
		width: 100%;
		text-align: center;
	}

	#sidebar { /* Hides incompatible mobile elements */
		display: none;
	}

}

/* !Responsive - Less than 768 ============================================================== */
@media screen and (max-width: 768px) {

	/* !---------- Start Mobile Menu ---------- */
	.navigation { /* Hides Main Menu */
		display: none;
	}

	#mobilenavigation { /* Mobile navigation bar */
		background: url(images/mobilemenu.png) 0 0 no-repeat scroll #763726;
		cursor: pointer;
		display: inline-block;
		position: relative;
		left: 0px;
		height: 50px;
		margin: 0px;
		width: 100%;
		visibility: visible;
		z-index: 10000;
		text-align: left;
	}

	#mobilenavigation h2 { /* Mobile navigation text */
		color: #FFFFFF;
		font-size: 1.2em;
		line-height: 50px;
		margin: 0px;
		padding: 0px 0px 0px 50px;
		text-transform: uppercase;
	}

	#menu-mobile-menu { /* Mobile navigation menu */
		display: none;
		margin-top: 0px;
		min-width: 150px;
		text-align: left;
		background-color: #333433;
		text-transform: uppercase;
	}

	#mobilenavigation li { /* Mobile navigation menu item */
		border-bottom: 1px solid #3C413B;
		padding: 10px;
	}

	#mobilenavigation li a { /* Mobile navigation menu item link */
		font-weight: 200;
		font-size: 1.25em;
		color: #FFFFFF;
		text-decoration: none;
		padding-left: 10px;
	}

	#mobilenavigation li:active { /* Mobile navigation eactive menu item */
		background-color: #808080;
	}

	#mobilenavigation .sub-menu { /* Mobile navigation submenu */
		padding-top: 10px;
		padding-left: 20px;
	}

	#mobilenavigation .sub-menu li { /* Mobile navigation submenu item */
		border-top: 1px solid #3C413B;
		border-left: 1px solid #3C413B;
		border-right: 1px solid #3C413B;
		margin-bottom: 5px;
	}

	#mobilenavigation .sub-menu li:active { /* Mobile navigation active submenu item */
		background-color: #616161;
	}
	/* !---------- End Mobile Menu ---------- */
	
}