/* ============================= */
/*
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,
.udg-13,
.udg-14,
.udg-15,
.udg-16,
.udg-17,
.udg-18,
.udg-19,
.udg-20,
.udg-21,
.udg-22,
.udg-23,
.udg-24 {display: inline; float: left; margin-left: 5px; margin-right: 5px;}

.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,
.push-12, .pull-12,
.push-13, .pull-13,
.push-14, .pull-14,
.push-15, .pull-15,
.push-16, .pull-16,
.push-17, .pull-17,
.push-18, .pull-18,
.push-19, .pull-19,
.push-20, .pull-20,
.push-21, .pull-21,
.push-22, .pull-22,
.push-23, .pull-23 {position: relative;}

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

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

/* Grid >> 24 Columns
----------------------------------------------------------------------------------------------------*/

.udg-container .udg-1 {width: 30px;}
.udg-container .udg-2 {width: 70px;}
.udg-container .udg-3 {width: 110px;}
.udg-container .udg-4 {width: 150px;}
.udg-container .udg-5 {width: 190px;}
.udg-container .udg-6 {width: 230px;}
.udg-container .udg-7 {width: 270px;}
.udg-container .udg-8 {width: 310px;}
.udg-container .udg-9 {width: 350px;}
.udg-container .udg-10 {width: 390px;}
.udg-container .udg-11 {width: 430px;}
.udg-container .udg-12 {width: 470px;}
.udg-container .udg-13 {width: 510px;}
.udg-container .udg-14 {width: 550px;}
.udg-container .udg-15 {width: 590px;}
.udg-container .udg-16 {width: 630px;}
.udg-container .udg-17 {width: 670px;}
.udg-container .udg-18 {width: 710px;}
.udg-container .udg-19 {width: 750px;}
.udg-container .udg-20 {width: 790px;}
.udg-container .udg-21 {width: 830px;}
.udg-container .udg-22 {width: 870px;}
.udg-container .udg-23 {width: 910px;}
.udg-container .udg-24 {width: 950px;}

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

.udg-container .prefix-1 {padding-left: 40px;}
.udg-container .prefix-2 {padding-left: 80px;}
.udg-container .prefix-3 {padding-left: 120px;}
.udg-container .prefix-4 {padding-left: 160px;}
.udg-container .prefix-5 {padding-left: 200px;}
.udg-container .prefix-6 {padding-left: 240px;}
.udg-container .prefix-7 {padding-left: 280px;}
.udg-container .prefix-8 {padding-left: 320px;}
.udg-container .prefix-9 {padding-left: 360px;}
.udg-container .prefix-10 {padding-left: 400px;}
.udg-container .prefix-11 {padding-left: 440px;}
.udg-container .prefix-12 {padding-left: 480px;}
.udg-container .prefix-13 {padding-left: 520px;}
.udg-container .prefix-14 {padding-left: 560px;}
.udg-container .prefix-15 {padding-left: 600px;}
.udg-container .prefix-16 {padding-left: 640px;}
.udg-container .prefix-17 {padding-left: 680px;}
.udg-container .prefix-18 {padding-left: 720px;}
.udg-container .prefix-19 {padding-left: 760px;}
.udg-container .prefix-20 {padding-left: 800px;}
.udg-container .prefix-21 {padding-left: 840px;}
.udg-container .prefix-22 {padding-left: 880px;}
.udg-container .prefix-23 {padding-left: 920px;}

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

.udg-container .suffix-1 {padding-right: 40px;}
.udg-container .suffix-2 {padding-right: 80px;}
.udg-container .suffix-3 {padding-right: 120px;}
.udg-container .suffix-4 {padding-right: 160px;}
.udg-container .suffix-5 {padding-right: 200px;}
.udg-container .suffix-6 {padding-right: 240px;}
.udg-container .suffix-7 {padding-right: 280px;}
.udg-container .suffix-8 {padding-right: 320px;}
.udg-container .suffix-9 {padding-right: 360px;}
.udg-container .suffix-10 {padding-right: 400px;}
.udg-container .suffix-11 {padding-right: 440px;}
.udg-container .suffix-12 {padding-right: 480px;}
.udg-container .suffix-13 {padding-right: 520px;}
.udg-container .suffix-14 {padding-right: 560px;}
.udg-container .suffix-15 {padding-right: 600px;}
.udg-container .suffix-16 {padding-right: 640px;}
.udg-container .suffix-17 {padding-right: 680px;}
.udg-container .suffix-18 {padding-right: 720px;}
.udg-container .suffix-19 {padding-right: 760px;}
.udg-container .suffix-20 {padding-right: 800px;}
.udg-container .suffix-21 {padding-right: 840px;}
.udg-container .suffix-22 {padding-right: 880px;}
.udg-container .suffix-23 {padding-right: 920px;}

/* Push Space >> 24 Columns
----------------------------------------------------------------------------------------------------*/

.udg-container .push-1 {left: 40px;}
.udg-container .push-2 {left: 80px;}
.udg-container .push-3 {left: 120px;}
.udg-container .push-4 {left: 160px;}
.udg-container .push-5 {left: 200px;}
.udg-container .push-6 {left: 240px;}
.udg-container .push-7 {left: 280px;}
.udg-container .push-8 {left: 320px;}
.udg-container .push-9 {left: 360px;}
.udg-container .push-10 {left: 400px;}
.udg-container .push-11 {left: 440px;}
.udg-container .push-12 {left: 480px;}
.udg-container .push-13 {left: 520px;}
.udg-container .push-14 {left: 560px;}
.udg-container .push-15 {left: 600px;}
.udg-container .push-16 {left: 640px;}
.udg-container .push-17 {left: 680px;}
.udg-container .push-18 {left: 720px;}
.udg-container .push-19 {left: 760px;}
.udg-container .push-20 {left: 800px;}
.udg-container .push-21 {left: 840px;}
.udg-container .push-22 {left: 880px;}
.udg-container .push-23 {left: 920px;}

/* Pull Space >> 24 Columns
----------------------------------------------------------------------------------------------------*/

.udg-container .pull-1 {left: -40px;}
.udg-container .pull-2 {left: -80px;}
.udg-container .pull-3 {left: -120px;}
.udg-container .pull-4 {left: -160px;}
.udg-container .pull-5 {left: -200px;}
.udg-container .pull-6 {left: -240px;}
.udg-container .pull-7 {left: -280px;}
.udg-container .pull-8 {left: -320px;}
.udg-container .pull-9 {left: -360px;}
.udg-container .pull-10 {left: -400px;}
.udg-container .pull-11 {left: -440px;}
.udg-container .pull-12 {left: -480px;}
.udg-container .pull-13 {left: -520px;}
.udg-container .pull-14 {left: -560px;}
.udg-container .pull-15 {left: -600px;}
.udg-container .pull-16 {left: -640px;}
.udg-container .pull-17 {left: -680px;}
.udg-container .pull-18 {left: -720px;}
.udg-container .pull-19 {left: -760px;}
.udg-container .pull-20 {left: -800px;}
.udg-container .pull-21 {left: -840px;}
.udg-container .pull-22 {left: -880px;}
.udg-container .pull-23 {left: -920px;}

/* ============================= */
/* 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;}