/*
Theme Name: HOD
Version: 1.0
Author: Unmethod
Author URI: http://www.unmethod.com
*/

@import "reset.css";
@import "grid.css";

/* Table of Contents
==================================================
    #Navigation
	#Intro
	#Call to Action
	#Overview
	#From the Blog
	#Testimonials
	#Recent Work
	#Clients
	#Footer
	#Copyright
	#Portfolio Page
	#About Page
	#Misc Pages
	#Shortcodes
	#Blog Page
	#Contact Page
	#Style Switch
    #Media Queries
    
*/

/* #Navigation
================================================== */

	header { padding-top: 30px; }
	
	#logo img { float: left; }
	
	#navigation { float: right; }
	
	#navigation li {
		display: block;
		float: left;
		margin-right: 30px;
		line-height: 17px; /* match the height of the logo */
		text-transform: uppercase;
		font-size: 12px;
	}

	#navigation li:last-of-type { margin-right: 0px; }
	#navigation li > a { color: #ababab; }		
	#navigation li.active > a, #navigation li:hover > a { color: #434343; cursor: pointer; }

	/* Dropdown */
	#navigation .dropdown {
		display: none;
		margin: 0;
		padding: 0;
		position: absolute;
		margin-top: 25px;
		z-index: 300;
		background: #37464f;
		margin-left: -25px;
		line-height: 100%;
	}
	
	#navigation .dropdown li { float: none; margin: 0; padding: 0; }
	#navigation li.drop { padding-bottom: 25px; }
	#navigation li.drop:hover { cursor: pointer; }
	
	#navigation .dropdown li a {
		display: block; 
		color: white;
		font-size: 10px;
		background: transparent;
		margin: 0;
		padding: 15px 65px 15px 30px;  
	}
	
	#navigation .dropdown li a:hover {
		color: white;
		background: #212a30;
	}

	/* Mobile */
	#mobile-nav {
		display: none;
		width: 62px;
		background: #4c2f35;
	}
	
	#mobile-nav .navigationButton img { margin: 15px 0px; float: left; }
	#mobile-nav .navigationButton img:hover { cursor: pointer; }
	#mobile-nav .navigationContent { padding-bottom: 15px; font-size: 11px; text-transform: uppercase; }
	#mobile-nav .navigationContent .dropdown { margin-left: 30px; font-size: 10px; }
	#mobile-nav .navigationContent a { display: block; color: #758087; padding: 7px 0px;  border-bottom: 1px solid #4c2f35; }
	#mobile-nav .navigationContent a.active { color: #fff; }
	#mobile-nav .navigationContent a:hover { color: #fff; }



/* #Intro
================================================== */

	#intro { padding-top: 30px; padding-bottom: 30px;  border-bottom: 4px solid #4c2f35; }
	
	#title { padding-bottom: 50px; }
	#title.center { text-align: center; }
	#title.secondary { margin-top: 80px; }
	#title .sub-heading { padding-top: 0px; padding-bottom: 20px; }
	#title .button { margin-top: 60px; }


	#hero { padding: 0!important; position: absolute; z-index: 200; top: 158px;}
	#hero img { width: 100%; }

	#hero-secondary img { width: 100%; }

	#slider .slides { padding: 0!important; }



/* #Call to Action
================================================== */
	
	#call-to-action { padding: 60px 0px; margin-top: 75px; }
	#call-to-action.secondary { margin-top: 0px; }
	#call-to-action .sub-heading { padding-top: 30px}
	#call-to-action .button {float: right; margin-right: 15px;}



/* #Overview
================================================== */

	#overview { padding: 60px 0px; }

	#overview .block {
		display: block;
		background: #fff;
		border-bottom: 7px solid #cce4fd;
		padding: 20px 20px 40px 20px;
	}

	#overview .title, #overview .icon, #overview .description { float: left; }

	#overview .title {
		line-height: 30px;
		padding-left: 20px;
	}

	#overview .description {
		border-top: 1px solid #e4f1fe;
		padding-top: 20px;
		margin-top: 20px;
	}



/* #From the blog
================================================== */

	#from-the-blog { padding-top: 60px; padding-bottom: 60px; }
	#from-the-blog .recent-post { padding-top: 40px; }
	#from-the-blog .recent-post img { width: 100%; }
	#from-the-blog .recent-post .post-title { padding-top: 20px; }

	/* Meta */
	#from-the-blog .recent-post .meta { padding-top: 10px;  font-size: 10px; color: #b9b9b9; }
	#from-the-blog .recent-post .meta a { margin-right: 20px; color: #b9b9b9; }
	#from-the-blog .recent-post .meta a:hover { color: #747474; }

	/* Text */
	#from-the-blog .recent-post .text { padding-top: 10px; padding-bottom: 10px; }



/* #Testimonials
================================================== */

	#testimonials { padding-top: 60px; padding-bottom: 60px; }
	#quote-list { padding-top: 40px; }

	#quote-list blockquote {
		display:  block;
		background: #ededed;
		font-style: italic;
		padding: 20px 20px 30px 20px;
	}

	#quote-list .customer {
		background: url(../images/icons/quote.png) no-repeat top left;
		padding-top: 20px;
	}

	#quote-list .customer em { color: #434343; }
	#quote-list .customer p { float: left; line-height: 28px; padding-left: 10px;}



/* #Recent Work
================================================== */

	#recent-work { padding-top: 60px; padding-bottom: 30px; }
	#recent-work .title p { padding: 20px 0px; }
	#recent-work .thumbnails img {width: 100%;}



/* #Clients
================================================== */

	#clients img { width: 100%; text-align: center; padding: 60px 0px; }



/* #Footer
================================================== */

	footer { width: 100%; background: #37464f; padding: 50px 0px; }

	#footer-nav li { float: left; padding-right: 25px; line-height: 32px; }
	#footer-nav li:last-of-type { padding-right: 0px; }
	#footer-nav li a { color: #929ea5; text-transform: uppercase; font-size: 10px; }
	#footer-nav li a:hover { color: #fff; }
	#footer-nav li.active a { color: #fff!important; }

	#social-icons li { float: right; padding-left: 10px; }
	#social-icons li:last-of-type { padding-left: 0px; }



/* #Copyright
================================================== */			
	
	#copyright { width: 100%; max-width:1200px; margin:0 auto; background: #fbf3e2; padding: 25px 0px; border-top: 4px solid #4c2f35;}

	#copyright p { font-family: 'Trocchi', serif; text-align: left; color: #4c2f35; font-size: 12px; }
	#copyright a { color: #fff; }
	#copyright a:hover { color: #929ea5; }

	#author { text-align: left!important; }



/* #Portfolio Page
================================================== */
	
	#filters { padding: 60px 0px; }

	#portfolio, #portfolio-standard { margin-bottom: 40px; margin-top: 10px; }

	.thumbnail { padding-top: 30px; text-align: center; }
	.thumbnail img { width: 100%; }

	#project { padding-bottom: 80px; }
	#project .overview .title, #project .overview p, #project .overview a.button { margin-bottom: 30px; }
	#project .overview .list li { padding-bottom: 10px; }



/* #About Page
================================================== */

	/*Info*/
	#info { padding: 60px 0px; }
	#info .title { padding-bottom: 40px; }

	/*Skills*/
	.progress-bar { margin-bottom: 20px; }

	/*Team*/
	#team { padding-top: 60px; padding-bottom: 60px; }
	.team-member .photo { width: 100%; }
	.team-member .title { padding: 30px 0px 15px 0px; border-bottom: 1px solid #e4f1fe; }
	.team-member p { padding-top: 15px; padding-bottom: 20px; }
	.team-member .social li { float: left; padding-right: 10px;}
	.team-member .social li:last-of-type { padding-right: 0px; }
	.team-member .social li:hover {
		opacity: 0.4;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; /* IE 8 */
        filter: alpha(opacity=40);
        -webkit-transition: opacity .33s linear;
        -moz-transition: opacity .33s linear;
        -o-transition: opacity .33s linear;
        transition: opacity .33s linear;
	}

/* #Misc Pages
================================================== */

	header.center { text-align: center; padding-bottom: 50px; }
	#jumbo-content { text-align: center; }
	#jumbotron { text-align: center; padding-top: 120px; }
	#jumbotron li { display: inline-block; }
	#jumbotron .jumbo-title { margin-left: 40px; }
	#jumbo-content .button { margin-top: 60px; }

	/*Countdown*/
	#counter { color: #ef1c00; font-size: 72px; }
	#counter .item { text-align: center; line-height: 140px;}
	
	.days, .hours, .minutes, .seconds {
		color: #9d9d9d;
		font-size: 20px;
		font-weight: 300;
		line-height: 14px;
		padding-top: 15px;
	}

	#jumbo-copyright { border-top: 1px solid #d6d6d6; padding-top: 50px; margin-top: 120px; padding-bottom: 50px; }



/* #Shortcodes
================================================== */

	#elements .title { padding-bottom: 30px; padding-top: 30px; }
	#elements .row.light-background { padding-top: 30px; padding-bottom: 20px; margin-bottom: 0px; }

	#elements .alert { margin-bottom: 10px; }
	#elements .alert.notice { margin-bottom: 0px; }
	#lists ul { border-bottom: 1px dotted #d0d0d0; margin-bottom: 5px; padding-bottom: 5px; }
	#lists .list.dash { border-bottom: none; }
	#dropcaps p { padding-bottom: 20px; } 

	/* Grid */
	#grid { padding-bottom: 40px; }
	.grid {
		display: block;
		margin-top: 20px;
		line-height: 40px;
		text-align: center;
		background: #e1f0ff;
	}		


/* #Blog Page
================================================== */

	#blog { padding: 60px 0px; }
	.entry { margin-bottom: 60px; padding-bottom: 30px; }
	.entry img { width: 100%; }

	.entry .title {
		margin: 30px 0px;
		-webkit-transition: color ease .33s;
		-moz-transition: color ease .33s;
		transition: color ease .33s;
	}

	.entry .title:hover {
		color: #434343;
		-webkit-transition: color ease .33s;
		-moz-transition: color ease .33s;
		transition: color ease .33s;
	}
	
	.entry .meta { display: block; padding-bottom: 30px; }

	.entry .meta li {
		display: inline-block;
		font-size: 10px;
		color: #b9b9b9;
	}
	
	.entry .meta li a { color: rgb(157, 160, 164); }
	.entry .meta li a:hover { color: #221e1e; }
	.entry .button { margin-top: 30px; }
	
	/* Link */
	.entry.link { text-align: center; border-bottom: 1px solid #d1e8ff; border-top: 1px solid #d1e8ff; }
	.entry.link .title { text-decoration: underline; line-height: 110%; }
	
	/* Audio */
	#blog .entry audio { width: 100%; }
	
	/* Quote */
	.entry.quote .title { line-height: 110%; }
	.entry.quote .title:hover { color: #ef1c00; }
	.entry.quote { text-align: center; border-bottom: 1px solid #d1e8ff; border-top: 1px solid #d1e8ff; }
	
	/* Switches */
	#blog .switch ul { margin-top: 60px; }

	/* Text Widget */
	#blog .sidebar .title { padding-top: 30px; }
	#blog .text-widget p { padding: 30px 0px; }
	
	/* Tweets */
	.latest-tweets p { padding-top: 30px; }
	.latest-tweets a { font-weight: 400; }
	.latest-tweets small { color: rgb(157, 160, 164); }
	
	/* Photo Stream */
	#flickrs { display: block; padding-top: 30px; }
	#flickrs { display: block; float: left; }
	
	#flickrs li { 
		display: block;
		list-style: none; 
		float: left; 
		background: #e1f0ff;
		border: 1px solid #c9e2fc;
		padding: 5px;
		margin-top: 10px;
		margin-right: 10px;
	}
	
	#flickrs a { display: block; position: relative; }
	#flickrs img { width: 50px; height: 50px; }

	/* Single Post */
	.entry.standard.full .content { padding-bottom: 30px; }
	.entry.standard.full blockquote { margin-bottom: 30px; }

	/* Comments */
	.comment-list { margin-top: 20px; margin-bottom: 30px; overflow: hidden; }
	.comment-list .comment { float: left; margin-bottom: 30px; padding-top: 30px; border-top: 1px solid #d1e8ff; }
	.comment-list .comment:first-child { border-top: none; }

	.comment-list img { float: left; margin-bottom: 10px; }
	.comment-list .comment-meta { float: left; padding-left: 20px; }
	.comment-body { float: left; }



/* #Contact Page
================================================== */

	#contact { padding: 60px 0px; }

	#alert {
		display: none;
		padding-top: 20px;
		padding-bottom: 20px;
		width: 100%;
	}

	#contact .sidebar .title { padding-top: 40px; }
	#contact #email, #contact #telephone { padding-top: 15px; }
	#contact #address li { padding-top: 15px; }

	ul.children .comment {
		border-top: 1px solid #d1e8ff!important;
		padding-top: 15px;
		margin-top: 15px;
		margin-bottom: 0px;
		margin-left: 55px;
	}

	.date { font-size: 10px; color: rgb(157, 160, 164); }
	.reply { font-size: 10px; padding-left: 10px; }

	#respond form { padding-top: 30px; }

	
/* #Style Switch
================================================== */

	#style-switch { display: block; background: #212a30; z-index: 400; width: 150px; border-radius: 0 0 3px 0; position: fixed; top: 120px; }
	#style-switch h4 { line-height: 30px; background: #37464f; padding: 6px 0 5px 10px; }
	#style-switch h4 a { 
		display: block;
		height: 41px; 
		position: absolute; 
		right: -49px; 
		text-indent: -9999px; 
		top: 0; width: 49px; 
		border-radius: 0 3px 3px 0; 
		background: url("../images/icons/switcher/switcher.png") no-repeat center center transparent;
		background-color: #37464f;
	}

	#style-switch ul li a { display: block; color: #929ea5; margin: 10px 0px 0px 10px; line-height: 28px; padding-left: 28px; }
	#style-switch ul li a:hover { color: #fff; }
	#style-switch ul li:last-of-type a { margin-bottom: 10px; }

	#style-switch li.blue a { background: url(../images/icons/switcher/blue.png) no-repeat left center; }
	#style-switch li.red a { background: url(../images/icons/switcher/red.png) no-repeat left center; }
	#style-switch li.green a { background: url(../images/icons/switcher/green.png) no-repeat left center; }
	#style-switch li.yellow a { background: url(../images/icons/switcher/yellow.png) no-repeat left center; }
	#style-switch li.purple a { background: url(../images/icons/switcher/purple.png) no-repeat left center; }
	#style-switch li.lilac a { background: url(../images/icons/switcher/lilac.png) no-repeat left center; }



/* #Media Queries
================================================== */

	@media handheld, only screen and (max-width: 768px), only screen and (max-device-width: 768px) and (orientation:portrait) {

		/* Header */
		#mobile-nav { display: block; }
		#navigation { display: none; }
		#logo img {float: none;}
		#logo { text-align: center; padding-bottom: 40px; border-bottom: 4px solid #4c2f35;}
        .hr-signature {max-width: 200px;}
		header {padding-bottom: 0px;}
		/* Intro */
		#title.center { text-align: left; }
		#title.secondary { margin-top: 0px; }
		#hero { display: none; }
		#hero-secondary { display: none; }
		#title .sub-heading { padding-top: 40px; text-align: center; }
		#intro { padding-top: 40px; padding-bottom: 0px;}
		#title {padding-bottom: 20px;
}
		/* Call to Action */
		#call-to-action {margin-top: 0px;}
		#call-to-action a.button { float: left; margin-top: 40px; margin-left: 15px; }
		/* Overview */
		#overview li { margin-bottom: 40px; }
		#overview li:last-of-type { margin-bottom: 0px; }
		/* Testimonials */
		#testimonials { padding-top: 0px; }
		/* Recent Work */
		#recent-work .title { padding-bottom: 30px; }
		#recent-work .thumbnails li { padding-bottom: 30px; }
		#recent-work .thumbnails li:last-of-type { padding-bottom: 0px; }
		/* Clients */
		#clients { display: none; }
		/* Porfolio */
		#portfolio .thumbnail img { width: auto; }
		#portfolio .thumbnail.eight.columns img { width: 100%; }
		#portfolio .thumbnail .screen-roll span { display: none; }
		#project .overview { padding-top: 30px; }
		/* Skills */
		#skills { padding-top: 20px; }
		/* Team */
		.team-member { padding-bottom: 30px; }
		.team-member:last-of-type {padding-bottom: 0px;}		
		/* Copyright */
		#copyright p { text-align: center!important; }
		/* 404 */
		#jumbotron .jumbo-title { margin-top: 40px; margin-left: 0px; }
		/* Sidebar */
		.sidebar { padding-top: 60px; }
		/* Footer */
		#footer-nav { display: none; }
		#social-icons { text-align: center; }
		#social-icons li { float: none; display: inline-block; padding-right: 10px; padding-left: 0px; }
		#social-icons li:last-of-type { padding-right: 0px; }
		/* Switcher */
		#style-switch { display: none; }
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ 
	@media only screen and (max-width: 479px) {	
	
		#portfolio .thumbnail img { width: 100%; }
	}