/*
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
4. General layout related tweaks
*/

@import 'css/modules/all';

.fl { float: right; }
.fr { float: left; }
.col-left { float: right; }
.col-right { float: left; }

#comments .reply { right: auto; left: 1em; }
#comments .avatar { float: right; margin: 0 0 15px 10px; }

// Search Widget
.searchform {
	button.submit {
		right: auto;
		left: 10px;
	}
}

// Slider
#loopedSlider {
	direction: ltr;

	a {
		&.flex-prev {
			left: auto;
			right: 0;

			span {
				left: auto;
				right: 30%;
			}
		}

		&.flex-next {
			right: auto;
			left: 0;

			span {
				right: auto;
				left: 30%;
			}
		}
	}
}

/* Tablet Portrait size and sizes above 768 (devices and browsers) */
@media only screen and ( min-width: $tablet ) {

	/* 1. GLOBAL DROPDOWN STYLES (these are purely for the dropdown layout and you should only edit the width of the dropdowns) */
	ul.nav { margin-right: 0; margin-left: 1em; }
	ul.nav li { float: right; }
	ul.nav ul { right: 0; }

	/* 3. MAIN NAVIGATION DROPDOWN MENUS (Add main navigation presentational styles here) */
	// Reset the mobile bits first
	#navigation {
		right:auto;
		ul.cart.nav {
			> li > ul {
				right: auto;
				left: 0;
			}
		}
		.cart-contents {
			margin-left:.5em;
			&:before {
				margin-left:.5em;
			}
		}
		ul {
			ul {
				margin-right:0;
			}
		}
	}
	#navigation ul.nav ul { right: -1px; }
	#navigation ul.nav ul ul { right: 100%; }
	#nav-container #navigation ul#main-nav > li:first-child { border-left: 0; }
	#top .nav li.parent > a { padding-left: 2em; }
	#top .nav li.parent > a:after { left: .8751em; }
	#top .nav li ul li.parent a:after { left: .8751em; }
	#navigation .nav li ul li.parent a { padding-left: 0; }
	#navigation .nav li ul li.parent a:after { left: 0; }
	#navigation .nav li.parent > a { padding-left: 2em; }
	#navigation .nav li ul li.parent a { padding-left: 0; }
	#navigation .nav li ul li.parent a::before { content: ""; display: block; position: absolute; border: 0.35em solid rgba(0,0,0,.1); border-color: transparent rgba(0,0,0,.1) transparent transparent; left: 0.8751em; top: 42%; }
	#navigation .nav li ul li.parent a::after { border-color: rgba(0,0,0,0); border: none; content:''; }
	#navigation {
		.menus.nav-icons {
	  		#main-nav { margin-right: 0; }
			.side-nav { right: auto; left: 0; }
		}
	}

	/* Cart dropdown */
	#navigation ul.cart > li > ul > li > div { left: 0; }
	#navigation ul.cart .total { text-align: left; }
	#navigation ul.cart a.cart-contents, #navigation ul.cart a.search-contents, #navigation ul.nav-search a.cart-contents, #navigation ul.nav-search a.search-contents { left: auto; right: 0; }

	/* Search dropdown */
	#navigation ul.nav-search { float: left; clear: none; }
	body #navigation ul.nav-search > li > ul > li > div { left: 0; right: auto; }
	#navigation ul.nav-search li:hover ul > li > div { display: block; }
	#navigation ul.nav-search .widget_woo_search .searchform button.submit { left: 11px; }
	#navigation ul.nav-search #searchform .submit, #navigation ul.nav-search .searchform .submit {
    right: auto; }

	/* 4. GENERAL LAYOUT RELATED TWEAKS */

	/* Header */
	#logo  { float: right; }
	.header-widget { float: left; }
	/* Columns & Containers */
	.col-left { float: right; }
	.col-right { float: left; }
	.magazine .block { float: right; }
	.magazine .block.last { float: left; }

	/* Sliders */
	#loopedSlider .content  { right: 0px; }
	#loopedSlider .content h2 { float: right; }
	#loopedSlider .content p { float: right; }

	/* 	Widgets */
	#main  {
		.widget_woothemes_features  {
			.columns-1 {
				.feature {
					text-align: right;
					img {
						float: right;
					}
				}
			}
			.columns-2 {
				.feature {
					text-align: right;
					img {
						float: right;
					}
				}
			}
			.feature  {
				float: right;
				margin-left: 5%;
				&.last  {
					margin-left: 0;
				}
			}
		}
	}

	/* Footer */
	#footer-widgets .block { margin-left: 3.8%; float: right; } /* 210 / 940 */
	#footer-widgets.col-1 .block { margin-left: 0; }
	#footer-widgets.col-2 .footer-widget-2, #footer-widgets.col-3 .footer-widget-3, #footer-widgets.col-4 .footer-widget-4  { margin-left: 0; }

	/* Column Floating */
	.two-col-left #main-sidebar-container #main,
	.two-col-right #main-sidebar-container #sidebar,
	.three-col-left #main-sidebar-container,
	.three-col-left #main-sidebar-container #main,
	.three-col-middle #main-sidebar-container #main,
	.three-col-middle #sidebar-alt,
	.three-col-right #main-sidebar-container #sidebar,
	.three-col-right #sidebar-alt  {  float: right;  }

	.two-col-left #main-sidebar-container #sidebar,
	.two-col-right #main-sidebar-container #main,
	.three-col-left #main-sidebar-container #sidebar,
	.three-col-left #sidebar-alt,
	.three-col-middle #main-sidebar-container,
	.three-col-middle #main-sidebar-container #sidebar,
	.three-col-right #main-sidebar-container,
	.three-col-right #main-sidebar-container #main{ float: left; }

	/* Contact Page */
	.page-template-template-contact-php .location-twitter .col-left { float: right; }
	.page-template-template-contact-php .location-twitter .contact-social { float: right; }

	/* Subcribe & Connect */
	#main #connect .col-left  { float: right; }
	#connect .col-right  { float: left; }
	#connect .related-posts { border-right: 1px solid #e6e6e6; padding-right: 15px; }

	/* Boxed Layout */
	.boxed-layout #header,
	.boxed-layout #content,
	.boxed-layout #footer-widgets,
	.boxed-layout #footer { padding-right: 2.5em; padding-left: 2.5em; }

}