/*
The styles in this stylesheet only apply to resolutions 768px and up

CALCULATING DIMENSIONS:
----------------------
The layout is fluid. The sote wrapper (.col-full) has a fixed pixel max-width.
All subsequent dimensions are calculated based on that fixed pixel width, using the formula: target / context = result
Credit - http://www.alistapart.com/articles/fluidgrids/

-----
INDEX
-----

1. Global dropdown styles
2. Top Navigation
3. Main navigation dropdown menus
 -3.1 General dropdown menus
4. Containers & Columns
5. Footer widgets
6. IE Fixes

/*----------------------*/

@import "mixins";

/*----------------------*/

@media only screen and (min-width: 768px) {

	/* 1. GLOBAL DROPDOWN STYLES (these are purely for the dropdown layout and you should only edit the width of the dropdowns) */
	ul.nav {
	    position: relative;
	    margin-bottom:0;
	    li {
	    	position: relative;
	    	float: left;
	    	zoom:1;
	    	list-style: none;
	    	a {
	    		display: block;
	    		padding:.53em 1em;
	    	}
	    	&.parent { // Styles applied to all parent list items
	    	}
	    }
	    /* LEVEL 2 */
	    ul {
	    	width:11.089em;
	    	visibility: hidden;
	    	position: absolute;
	    	top:100%;
	    	left: 0;
	    	z-index: 9999;
	    	margin:0;
	    	li {
	    		float: none;
	    		a {
	    			width: 100%;
	    			display: inline-block;
	    			.borderbox();
	    		}
	    		&.parent { // Styles applied to parent items in level 2
	    		}
	    	}
	    }
	    /* LEVEL 3 */
	    ul ul {
	    	left:100%;
	    	top:0;
	    	li {
	    		&.parent { // Styles applied to parent items in level 3
	    		}
	    	}
	    }
	    li:hover > ul {
	    	visibility: visible;
	    }
	}

	/* 2. TOP NAVIGATION (Add top navigation presentational styles here) */
	#top {
	    padding:0 1.618em;
		background: darken(@bg_top, 5%);
		border: 1px solid darken(@bg_top, 7%);
		border-width: 0 0 1px 0;
	    #top-nav {
	    	display: block;
	    }
	    ul.nav {
	    	font-size:.857em; // this adjusts the scale of the entire navigation and everything just works like magic
	    	> li { // The following styles are applied ONLY to the top level list items
	    		a {
	    			color: @color_nav;
	    			&:hover {
	    				background: darken(@bg_top, 8%);
	    			}
	    		}
	    		&:hover {
	    			background: darken(@bg_top, 8%);
	    		}
	    	}
	    	/* LEVEL 2 */
	    	ul {
	    		background: darken(@bg_top, 8%);
	    		li {
	    			a {
	    			}
	    		}
	    	}
	    	/* LEVEL 3 */
	    	ul ul {
	    	}
	    	li:hover > ul {
	    	}
	    }
	}

	/* 3. MAIN NAVIGATION DROPDOWN MENUS (Add main navigation presentational styles here) */
	#navigation  {
		background: none;
		margin: 0;
		.border_radius(0);
	    display:block !important;
	    ul.nav {
	    	float: left;
	    	> li { // The following styles are applied ONLY to the top level list items
	    		margin: 0 .1em;
	    		a {
	    			color: @color_nav;
	    			.text_shadow(0, -1px, 0, darken(@color_nav, 40%) );
	    			padding: .327em 1em .4em;
	    			margin: 0;
	    			border: 0;
	    			&:hover {
						text-decoration: none;
	    			}
	    		}
	    		&:hover {
                    background: darken(@color_nav, 60%);
					.border_radius(.327em);
        		}
				&.current_page_item, &.current_page_parent, &.current-menu-ancestor, &.current-cat, &.li.current-menu-item {
					a {
						background: darken(@color_nav, 60%);
						.border_radius(.327em);
					}
				}
				&.parent {
					&:hover {
						.border_radius_bottom(0);
					}
				}
	    	}
	    	/* LEVEL 2 */
	    	ul {
	    		background: darken(@color_nav, 60%);
	    		.border_radius(.327em);
	    		-webkit-border-top-left-radius: 0;
	    		border-top-left-radius: 0;
	    		li {
	    			a {
	    				font-size: .9em;
	    				&:hover {
	    					background: darken(@color_nav, 65%);
	    				}
	    			}
	    			&:last-child {
	    				a {
	    					.border_radius_bottom(.327em);
	    				}
	    			}
	    		}
	    	}
	    	/* LEVEL 3 */
	    	ul ul {
	    		top:-1px;  // -1px top to offset the border and keep everything lined up
	    		left:100%; // reapply left 100% as we're offsetting the first child by 1px
	    	}
	    	li:hover > ul {
	    	}
	    }

	}
	// Hide the nav toggle link in desktop orientation
	.nav-toggle { display: none; }

	/* 4. CONTAINERS & COLUMNS */
	#header {
		padding:3.631em 0 0;
		.header-left { float:left; width: 25%; margin: 0 0 2.618em; }
		.header-right { float: right; margin: 0 0 2.618em; }
	    hgroup {
	        float: left;
	        h1, h2, h3 {
	            float:none;
	        }
	    }
	    ul.rss {
	        margin-right:0;
	        padding-right:0;
	        li {
	            border-right:0;
	        }
	    }
	    ul.cart {
	    	border-left:1px dotted @border_top;
	       	margin: .202em 0 0 1.2em;
	       	padding: 0 0 0 2em;
	        li {
	            &:hover {
	            	background: none;
	            	.border_radius(0);
	            }
	            a.cart-contents {
	            	padding: 0;
	            	&:before {
	            		content: normal;
	            	}
	            	&:hover {
	            		span {
	            			background: @color_buttons2 - #111;
	            			.transition(all, ease-in-out, .2s);
	            		}

	            	}
	            	span {
	            		margin: 0 .618em 0 0;
	            		padding: 0;
						width: 2em;
						height: 2em;
						line-height: 2em;
	            		background: @color_buttons2;
	            		.border_radius(100%);
	            		color: #fff;
	            		font-weight: bold;
						text-align: center;
						display: inline-block;
						vertical-align: middle;
	            	}
	            }
	        }
	    }
	}
	body.has-slider, body.has-top-section {
		#header { margin: 0; padding: 3.631em 2em 0; }
	}
	#top-section {
		.col-full { padding: 0; }
		header {
			h1 {
				float: left;
			}
		}
		#breadcrumbs {
			float: right;
			text-align: right;
		}
	}

	#main.fullwidth, .layout-full #main, .col-full {
	    max-width: 940px;
	    width:100%;
	    margin: 0 auto;
	}
	#content {
		margin: 0 auto;
	}
	#main {
	    width: 63.8%; // golden ratio
	   	margin-bottom: 1em;
	}
	#sidebar {
	    margin-top: 0;
	    width: 29.8%;  // golden ratio
	}
	#footer {
		margin: 0 auto;
		#footer-nav {
			li {
				float: none;
			}
		}
		#footer-right {
			margin: 0;
		}
	}
	.entry img {
	    max-width: 100%;
	}
	.layout-full .entry img {
	    max-width: 100%;
	}
	.layout-right-content {
	    #main  {
	    	float: right;
	    }
	    #sidebar  {
	    	float: left;
	    }
	}
	.layout-full #main  {
	    width: 100%; // full-width template
	}
	.col-left {
	    float: left;
	}
	.col-right {
	    float: right;
	}
	.page-template-template-contact-php {
	    .location-twitter  {
	    	.col-left  {
	    		float: left;
	    	}
	    	#office-location {
	    	    width: 48%;
	    	    margin: 0;
	    	}
	    	.contact-social  {
	    	    float: right;
	    	    width: 48%;
	    	    #twitter  {
	    	    	margin: 0;
	    	    }
	    	}
	    }
	}

	/* 5. FOOTER WIDGETS */
	#footer-widgets {
		margin: 0 auto 2.244em;
	    .block {
	    	margin-right:3.8%;
	    	float: left;
	    }
	    &.col-1 {
	    	.block {
	    		width: 100%;
	    		float: none;
	    	}
	    	.footer-widget-1 {
	    		margin-right:0;
	    	}
	    }
	    &.col-2 {
	    	.block {
	    		width: 48%;
	    	}
	    	.footer-widget-2 {
	    		margin-right:0;
	    	}
	    }
	    &.col-3 {
	    	.block {
	    		width: 30.75%;
	    	}
	    	.footer-widget-3 {
	    		margin-right:0;
	    	}
	    }
	    &.col-4 {
	    	.block {
	    		width: 22.05%
	    	}
	    	.footer-widget-4 {
	    		margin-right:0;
			  	#searchform  {
					#searchsubmit {
						margin: 0 0 0 0.327em;
					}
				}
	    	}
	    }

	}

	/* 6. IE FIXES */

	.ie7 {
	    #top-nav {
	    	position: relative;
	    	z-index: 9999999;
	    }
	    #header {
	    	position: relative;
	    	z-index: 9999999;
	    }
	}

	.ie8 {
		.header-right { width: 72%; }
		ul.products li.product img { padding: 0; }
	}

	/* 7. FEATURED SLIDER */
	#featured-slider {
		padding: 0;
		.flexslider {
			&:hover {
				.flex-next { .opacity(.8); right: -5.874em;}
				.flex-prev { .opacity(.8); left: -5.874em;}
			}
		}

		.slide-content {
			width: 42%;
		}
		.slide-media {
			width: 54%;
			margin: 0;
		}
		.has-video .slide-media { float: right; width: 54%; height: auto; }
		.flex-direction-nav {
			.flex-next { right: -5.874em; }
			.flex-prev { left: -5.874em; }
			li { display: inline; }			
			a {
				margin: -5.874em 0 0; 
				position: absolute;
			}			
		}
		.flex-control-nav  {
			width: auto;
			bottom: 2em;
		}
	}

	/* 8. HOMEPAGE */
    #main {
        .widget_woothemes_features {
            .feature {
                    width: 30%;
                    margin: 0 5% 2.244em 0;
                    .feature-image {
                    	float: left;
						display: block;
						width: 22%;
                    }
                    .feature-content {
                    	float:right;
                    	width: 71%;
                    }
            }
        }
        .widget_woothemes_testimonials {
			padding: 0 0 2.244em;
			border-bottom: 1px solid darken(@border_main, 5%);
			h2 {
				margin: 0 0 1.387em;
			}
            .quote {
                    width: 29.3%;
                    margin: 0 6% 2.244em 0;
                    padding: 0;
                    border: 0;
					.testimonials-content {
						float:right;
						width: 71%;
					}
            }
        }
		#page-content {
			article {
				&.has-featured-image {
					.featured-image {
						margin: 0;
						width: 53%;
						float: left;
					}
					.article-content {
						width: 41%;
						float: right;
					}
				}
			}
		}
    }

    /* 8. Timeline Template */
    #archives {
    	.archives_list {
    		li {
    			padding-bottom: 0;
    			border-bottom: 0;
    		}
	    	.date {
	    		display: inline-block;
				width:22.5%;
			}
			.linked {
				display: inline-block;
				width:48%;
			}
			.comments {
				display: inline-block;
				width:22.5%;
				a {
					padding-left:1.236em;
				}
			}
    	}
    }

}

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
 	#featured-slider {
		.flexslider {
			&:hover {
				.flex-next { right: 1em;}
				.flex-prev { left: 1em;}
			}
		}
		.flex-direction-nav {
			.flex-next { right: 1em; }
			.flex-prev { left: 1em; }
		}
	}
}
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) {
 	#featured-slider {
		.flexslider {
			&:hover {
				.flex-next { right: 0em;}
				.flex-prev { left: 0em;}
			}
		}
		.flex-direction-nav {
			.flex-next { right: 0em; }
			.flex-prev { left: 0em; }
		}
	}
}