/* ============================= */
/*
UTOPIA BASE STYLESHEET
http://www.utopia.gr
v1 | March 2012
---------------------------------------

**** Utopia basesheet extra components ****

RESET SYSTEM BY: 
http://meyerweb.com/eric/tools/css/reset/ 
v1.0 | 20080212 
---------------------------------------

CLEAR FLOATS DIRECTIVES BY: 
http://sonspring.com/journal/clearing-floats
---------------------------------------

GRID SYSTEM BY:
960 Grid System ~ Core CSS.
Learn more ~ http://960.gs/
Licensed under GPL and MIT.
---------------------------------------
*/
/* ============================= */

/* ============================= */
/* RESET SYSTEM */
/* ============================= */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

/* ============================= */
/* COMMON DIRECTIVES */
/* ============================= */


body {min-width: 960px;}
.standard-width {width: 960px;}
.pad { padding: 10px;}
.centered {margin: 0 auto; text-align: center;}
.t-center {text-align: center;}
.t-left {text-align: left;}
.t-right {text-align: right;}
.t-justify {text-align: justify;}
.f-left { float: left;}
.f-right { float: right;}
.v-top {vertical-align: top;}
.v-middle {vertical-align: middle;}
.v-bottom {vertical-align: bottom;}
p.nompp {margin:0; padding:0;}
a, a:focus, object, object:focus {outline: none;} 

/* ============================= */
/* GRID DIVS */
/* ============================= */

/* Container
----------------------------------------------------------------------------------------------------*/

.udg-container {margin-left: auto; margin-right: auto; width: 960px;}

/* Grid >> Global
----------------------------------------------------------------------------------------------------*/

.udg-1,
.udg-2,
.udg-3,
.udg-4,
.udg-5,
.udg-6,
.udg-7,
.udg-8,
.udg-9,
.udg-10,
.udg-11,
.udg-12 {display: inline; float: left; margin-left: 10px; margin-right: 10px;}

.push-1, .pull-1,
.push-2, .pull-2,
.push-3, .pull-3,
.push-4, .pull-4,
.push-5, .pull-5,
.push-6, .pull-6,
.push-7, .pull-7,
.push-8, .pull-8,
.push-9, .pull-9,
.push-10, .pull-10,
.push-11, .pull-11 {position: relative;}

/* Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/

.alpha {margin-left: 0;}
.omega {margin-right: 0;}

/* Grid >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.udg-container .udg-1 {width: 60px;}
.udg-container .udg-2 {width: 140px;}
.udg-container .udg-3 {width: 220px;}
.udg-container .udg-4 {width: 300px;}
.udg-container .udg-5 {width: 380px;}
.udg-container .udg-6 {width: 460px;}
.udg-container .udg-7 {width: 540px;}
.udg-container .udg-8 {width: 620px;}
.udg-container .udg-9 {width: 700px;}
.udg-container .udg-10 {width: 780px;}
.udg-container .udg-11 {width: 860px;}
.udg-container .udg-12 {width: 940px;}

/* Prefix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.udg-container .prefix-1 {padding-left: 80px;}
.udg-container .prefix-2 {padding-left: 160px;}
.udg-container .prefix-3 {padding-left: 240px;}
.udg-container .prefix-4 {padding-left: 320px;}
.udg-container .prefix-5 {padding-left: 400px;}
.udg-container .prefix-6 {padding-left: 480px;}
.udg-container .prefix-7 {padding-left: 560px;}
.udg-container .prefix-8 {padding-left: 640px;}
.udg-container .prefix-9 {padding-left: 720px;}
.udg-container .prefix-10 {padding-left: 800px;}
.udg-container .prefix-11 {padding-left: 880px;}

/* Suffix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.udg-container .suffix-1 {padding-right: 80px;}
.udg-container .suffix-2 {padding-right: 160px;}
.udg-container .suffix-3 {padding-right: 240px;}
.udg-container .suffix-4 {padding-right: 320px;}
.udg-container .suffix-5 {padding-right: 400px;}
.udg-container .suffix-6 {padding-right: 480px;}
.udg-container .suffix-7 {padding-right: 560px;}
.udg-container .suffix-8 {padding-right: 640px;}
.udg-container .suffix-9 {padding-right: 720px;}
.udg-container .suffix-10 {padding-right: 800px;}
.udg-container .suffix-11 {padding-right: 880px;}

/* Push Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.udg-container .push-1 {left: 80px;}
.udg-container .push-2 {left: 160px;}
.udg-container .push-3 {left: 240px;}
.udg-container .push-4 {left: 320px;}
.udg-container .push-5 {left: 400px;}
.udg-container .push-6 {left: 480px;}
.udg-container .push-7 {left: 560px;}
.udg-container .push-8 {left: 640px;}
.udg-container .push-9 {left: 720px;}
.udg-container .push-10 {left: 800px;}
.udg-container .push-11 {left: 880px;}

/* Pull Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.udg-container .pull-1 {left: -80px;}
.udg-container .pull-2 {left: -160px;}
.udg-container .pull-3 {left: -240px;}
.udg-container .pull-4 {left: -320px;}
.udg-container .pull-5 {left: -400px;}
.udg-container .pull-6 {left: -480px;}
.udg-container .pull-7 {left: -560px;}
.udg-container .pull-8 {left: -640px;}
.udg-container .pull-9 {left: -720px;}
.udg-container .pull-10 {left: -800px;}
.udg-container .pull-11 {left: -880px;}

/* ============================= */
/* CLEAR FLOATS */
/* ============================= */

.clr { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0;}

/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */

.clearfix:before,
.clearfix:after,
.udg-container:before,
.udg-container:after {content: '.'; display: block; overflow: hidden; visibility: hidden; font-size: 0; line-height: 0; width: 0; height: 0;}

.clearfix:after,
.udg-container:after {clear: both;}