/**
 * Front end styles
 * 
 * @since 0.1
 * @updated for 2013.12.27
 */

/* Styles for devices up to 767px wide */
@media only screen and (max-width: 47.9375em) {
	.so-show-small,
	.so-hide-medium {
		display: block;
	}
	p > .so-show-small,
	p > .so-hide-medium {
		display: inline-block;
	}
	.so-show-medium,
	.so-show-large,
	.so-hide-small {
		display: none;
	}
}

/* Styles for devices from 768px wide and up */
@media only screen and (min-width: 48em) { 
	.so-show-medium,
	.so-show-large {
		display: block;
	}
	p > .so-show-medium,
	p > .so-show-large {
		display: inline-block;
	}
}

/* Styles for devices from 768px - 1279px wide */
@media only screen and (min-width: 48em) and (max-width: 79.9375em) {
	.so-show-small,
	.so-show-large,
	.so-hide-medium {
		display: none !important;
	}
	.so-show-medium {
		display: block;
	}
	p > .so-show-medium {
		display: inline-block;
	}
}

/* Styles for devices up to 1279px wide */
@media only screen and (max-width: 79.9375em) {
	.so-hide-large {
		display: block;
	}	
	p > .so-hide-large {
		display: inline-block;
	}
	.so-show-large {
		display: none;
	}	
}

/* Styles for devices from 1280px wide */
@media only screen and (min-width: 80em) {
	.so-show-small,
	.so-show-medium,
	p > .so-show-medium, /* <-- should not be necessary, but for some reason is */
	.so-hide-large {
		display: none;
	}
	.so-show-large,
	.so-hide-small,
	.so-hide-medium {
		display: block;
	}
	p > .so-show-large,
	p > .so-hide-small,
	p > .so-hide-medium {
		display: inline-block;
	}
}


/* Serves as a reminder 
The SHOW classes
.so-show-small       Visible up to 768px
.so-show-medium      Visible between 768px and 1280px
.so-show-large       Visible from 1280px up

The HIDE classes
.so-hide-small       Hidden up to 768px
.so-hide-medium      Hidden between 768px and 1280px
.so-hide-large       Hidden from 1280px up
*/