/* ====================================================================
	EZPlug Base CSS
	
	Author: Paul Fleming McCullagh
	USU PAD Team
	
	0. CSS Reset.
		Reset base elements
	
	
	1. Global Structure
		Set basic style for core structural elements, starting at the inside and working in - from 'html' to columns and floats.
		Adjust box model so padding is inside the set width, not additional to it.
		Set font and background styles for html & body.
		Set width of header, content & footer tags.
		Fluid column widths.
		Floats and clears.
		Standard spacing using padding & margin for text and other assigned block elements. 'vertical rhythm' is assigned to chosen elements.
	
	
	2. Layout
		Create a block element - used primarily on images
		Build common elements, such as horizontal lists
	
	
	3. Typography
		Base font size is 16px, 1em which equates to 12pt in the mock up.
		Reset margin & padding to zero.
		Individual header, paragraph and list styles.
		2em = 32px (24pt) / 1.5em = 24px (18pt) / 1em = 16px (12pt) / .875em = 14px (11pt) / .75em = 12px (9pt)
	
	
	4. Enhancements
		Transitions for smooth CSS3 animation.
	
		
	5. Development helpers
		'Outline' for dev purposes so you can easily see page structure.
		
		
		
	
==================================================================== */





/* ================ $reset ================ */
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,hr,
a,abbr,acronym, address,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strong,sub,sup,tt,var,
b,u,i,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video{
	margin:0;
	padding:0;
}

article,aside,details,figcaption,figure,footer,
header,hgroup,menu,nav,section,date,
#header, #content, #footer{
	display:block;
}

h1,h2,h3,h4,h5,h6,p,li{ font-size:1em; }

table{
	border-collapse:collapse;
	border-spacing:0;
}

strong,b,mark{
	font-weight:bold;
	font-style:inherit;
}

em,i,cite,q,address,dfn,var{
	font-style:italic;
	font-weight:inherit;
}

abbr[title],dfn[title], acronym{
	cursor:help;
	border-bottom:1px dotted;
}

ins{ border-bottom:1px solid; }

a,u,ins{ text-decoration:none; }

del,s{ text-decoration:line-through; }

pre,code,samp,kbd{ font-family:monospace; }

small{ font-size:0.75em; }

img, img a{ border:none; }

input,
select,option,optgroup,
textarea{
	font:inherit;
}

ul{
	list-style: none;
	list-style-type: none;
}

/* reset UL items only, allows OL items to display counter */
ul li{
	background: none;
	list-style-type: none;
}





/* ================ $structure ================ */
/* == $box model == */
/** box sizing
* Applies a natural box layout model to all elements so padding is included in the assigned width, not additional to.
* Not supported in IE7.
*/
*,
*:before,
*:after{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}


/* == html == */
html{
	font-size: 100%;
	line-height: 1.5;
	font-family: arial, helvetica, sans-serif;
	font-weight: normal;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	color: #666;
	/*overflow-y:scroll;*/
}


/* == main structure == */
/** main container
* Max and min width are used so the site can become responsive, if required, by setting a smaller min-width
* in the app specific CSS, e.g. min-width: 320px;
* Container is centred on the screen with no top or bottom margin.
*
*/
#container{
	margin: 0 auto;
}

/* key structural elements */
/*#header, #content, #footer{
	width: 100%;
}*/


/* == columns == */
/* full width */
.ep-col-1{ width: 100%; }

/* fifths */
.ep-col-1-5{ width: 20%; }
.ep-col-2-5{ width: 40%; }
.ep-col-3-5{ width: 60%; }
.ep-col-4-5{ width: 80%; }

/* quarters & half */
.ep-col-1-4{ width: 25%; }
.ep-col-1-2{ width: 50%; }
.ep-col-3-4{ width: 75%; }

/* thirds */
.ep-col-1-3{ width: 33.33%; }
.ep-col-2-3{ width: 66.66%; }


/* == $floats === */
/* left float */
.ep-float{ float: left; }

/* right float */
.ep-float-right{ float: right; }

/* contain floats */
.ep-clear-float:before,
.ep-clear-float:after{
    content: " ";
    display: table;
}

.ep-clear-float:after{ clear: both; }

.ie7 .ep-clear-float{ *zoom: 1; }

/*
.ep-clear-float:after{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}*/


/* == $spacing == */
/* vertical rhythm */
h1, h2, h3, h4, p, ul, ol, img, blockquote, pre, hr, dl,
.ep-vert-margin{
	margin-bottom: 20px;
}

/* smaller spacing for elements contained inside a list or small headings, where the larger margin is too big */
h5, h6, dt, dd{ margin-bottom: 10px; }

/* horizontal spacing */
/*img, h1, h2, h3, h4, h5, h6, p, dl, ul, ol, date{ padding: 0 10px; }*/

ol{ margin-left: 20px; }




/* ================ $layout ================ */
/* == common elements == */
/** horizontal UL
* LI only needs styling as base style for UL is set in the reset
*/
.ep-horiz-ul li,
.ep-horiz-item{
	display: inline;
}

.ep-horiz-ul li a,
.ep-horiz-item a{
	display:inline-block;
}

/* ie7 display: inline-block fix */
.ie7 .ep-horiz-ul li a,
.ie7 .ep-horiz-item a{
	display:inline;
}

.ep-horiz-separator{
	display: inline;
	margin: 0;
	padding: 0 10px;
}





/* ================ $images ================ */
/**
* To make images responsive, so they scale proportionally as the screen narrows, add max-width: 100% to img tag.
* For the most control, make images in specific areas or within media queries responsive, as opposed to a global setting.
* Text styles are for alt text
*/
img{
	/*max-width: 100%;*/
	font-family: arial, sans-serif;
	font-size: 1em;
	line-height: 10px;
	font-style: italic;
}

/*.rwd-img{ max-width: 100%; }*/

/* ie specific */
.ie7 img{
	width: 100%;
	min-width: 100%;
}





/* ================ $enhancements ================ */
/* == $transitions == */
.ep-transition,
.ep-transition a,
a{
	-webkit-transition: all .3s ease-out; 
	-moz-transition: all .3s ease-out; 
	-ms-transition: all .3s ease-out; 
	-o-transition: all .3s ease-out; 
	transition: all .3s ease-out;
}


/* == visually hidden elements == */
.ui-helper-hidden-accessible{
	position: absolute !important;
	clip: rect(1px 1px 1px 1px);
}

.ep-skip-nav:focus,
.ep-skip-nav:active{
	clip: auto;
	padding: 10px;
	background: #f00;
	top: 0;
	left: 0;
	z-index: 1000;
	color: #fff;
}

/* display:none */
.ep-hidden{ display: none; }

/* visibly hidden */
.visibily-hidden{
	font-size: 0;
	height: 0;
	text-indent: -9999px;
	padding: 1px;
}





/* ================ $develpment helpers ================ */
/* == $outline == */
/*.ep-outline{ outline: dashed 1px #a7a7a7; }*/