/* 
 * whiteRABBIT // HARE // CSS Framework v1.2
 * 
 * Framework CSS construído para projetos da whiteRABBIT, a 
 * partir de 2013, substituindo o 960 Grid System.
 * 
 * Apesar de substituir, possui influência do 960gs.
 * 
 * Este framework CSS foi influenciado por:
 * - 960 Grid System (http://www.960.gs);
 * - Kube CSS Framework (http://imperavi.com/kube);
 * - Blueprint CSS (http://www.blueprintcss.org);
 * 
 * Contém, além do framework:
 * - Reset.css, de Eric Meyer (http://meyerweb.com/eric/tools/css/reset/);
 * - Clearing Floats (http://sonspring.com/journal/clearing-floats);
 * - Clearfix (http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified);
 * 
 * Criado por:
 * Fabio "Chui" Yuiti Goto (whiteRABBIT)
 * 
 * Data:
 * Janeiro/2013
 * 
 * Atualizado:
 * Fevereiro/2013
 * ============================================================ */

/* 
 * RESET.CSS / Comprimido com YUI Compressor
 * ============================================================ */
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,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,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

/* 
 * CONTAINER / WRAPPER PRINCIPAL
 * ============================================================ */
.hare_wrap {
	width: 960px;
	margin: auto;
	position: relative;
}

/* 
 * WRAPPERS SECUNDÁRIOS / DIVISORES SEM MARGEM
 * ============================================================ */
.hare_wrap .sub_0,
.hare_wrap .sub_1,
.hare_wrap .sub_2,
.hare_wrap .sub_3,
.hare_wrap .sub_4,
.hare_wrap .sub_5,
.hare_wrap .sub_6,
.hare_wrap .sub_7 {
	margin: auto;
	position: relative;
	float: left;
}

.hare_wrap .sub_0 { width: 60px; }
.hare_wrap .sub_1 { width: 120px; }
.hare_wrap .sub_2 { width: 240px; }
.hare_wrap .sub_3 { width: 360px; }
.hare_wrap .sub_4 { width: 480px; }
.hare_wrap .sub_5 { width: 600px; }
.hare_wrap .sub_6 { width: 720px; }
.hare_wrap .sub_7 { width: 840px; }

/* 
 * ELEMENTOS DE GRADE
 * 
 * cub_X = divisória básica, com margem de 10px
 * pup_X = divisória secundária, com padding de 10px
 * fat_x = divisória "gorda", com margem e padding de 10px
 * raw_x = bloco interno para utilizar com cub_x ou pup_x
 * ============================================================ */
.cub_0, .cub_1, .cub_2, .cub_3, .cub_4, .cub_5, .cub_6, .cub_7, .cub_8, 
.pup_0, .pup_1, .pup_2, .pup_3, .pup_4, .pup_5, .pup_6, .pup_7, .pup_8, 
.fat_0, .fat_1, .fat_2, .fat_3, .fat_4, .fat_5, .fat_6, .fat_7, .fat_8, 
.raw_0, .raw_1, .raw_2, .raw_3, .raw_4, .raw_5, .raw_6, .raw_7, .raw_8 {
	display: inline;
	float: left;
	position: relative;
}

.cub_0, .cub_1, .cub_2, .cub_3, .cub_4, .cub_5, .cub_6, .cub_7, .cub_8 {
	margin: 10px;
}

.pup_0, .pup_1, .pup_2, .pup_3, .pup_4, .pup_5, .pup_6, .pup_7, .pup_8 {
	padding: 10px;
}

.fat_0, .fat_1, .fat_2, .fat_3, .fat_4, .fat_5, .fat_6, .fat_7, .fat_8 {
	margin: 10px;
	padding: 10px;
}

.raw_0, .raw_1, .raw_2, .raw_3, .raw_4, .raw_5, .raw_6, .raw_7, .raw_8 {
	margin: auto;
}

.hare_wrap .cub_0, .hare_wrap .pup_0, .hare_wrap .raw_0 { width: 40px; }
.hare_wrap .cub_1, .hare_wrap .pup_1, .hare_wrap .raw_1 { width: 100px; }
.hare_wrap .cub_2, .hare_wrap .pup_2, .hare_wrap .raw_2 { width: 220px; }
.hare_wrap .cub_3, .hare_wrap .pup_3, .hare_wrap .raw_3 { width: 340px; }
.hare_wrap .cub_4, .hare_wrap .pup_4, .hare_wrap .raw_4 { width: 460px; }
.hare_wrap .cub_5, .hare_wrap .pup_5, .hare_wrap .raw_5 { width: 580px; }
.hare_wrap .cub_6, .hare_wrap .pup_6, .hare_wrap .raw_6 { width: 700px; }
.hare_wrap .cub_7, .hare_wrap .pup_7, .hare_wrap .raw_7 { width: 820px; }
.hare_wrap .cub_8, .hare_wrap .pup_8, .hare_wrap .raw_8 { width: 940px; }

.hare_wrap .fat_0 { width: 20px; }
.hare_wrap .fat_1 { width: 80px; }
.hare_wrap .fat_2 { width: 200px; }
.hare_wrap .fat_3 { width: 320px; }
.hare_wrap .fat_4 { width: 440px; }
.hare_wrap .fat_5 { width: 560px; }
.hare_wrap .fat_6 { width: 680px; }
.hare_wrap .fat_7 { width: 800px; }
.hare_wrap .fat_8 { width: 920px; }

/* 
 * PREFIXOS E SUFIXOS / PADDING ADICIONAL
 * ============================================================ */
.hare_wrap .pre_0 { padding-left: 60px; }
.hare_wrap .pre_1 { padding-left: 120px; }
.hare_wrap .pre_2 { padding-left: 240px; }
.hare_wrap .pre_3 { padding-left: 360px; }
.hare_wrap .pre_4 { padding-left: 480px; }
.hare_wrap .pre_5 { padding-left: 600px; }
.hare_wrap .pre_6 { padding-left: 720px; }
.hare_wrap .pre_7 { padding-left: 840px; }

.hare_wrap .pos_0 { padding-right: 60px; }
.hare_wrap .pos_1 { padding-right: 120px; }
.hare_wrap .pos_2 { padding-right: 240px; }
.hare_wrap .pos_3 { padding-right: 360px; }
.hare_wrap .pos_4 { padding-right: 480px; }
.hare_wrap .pos_5 { padding-right: 600px; }
.hare_wrap .pos_6 { padding-right: 720px; }
.hare_wrap .pos_7 { padding-right: 840px; }

/* 
 * TAPS / MODIFICADORES PARA POSICIONAMENTO RELATIVO
 * ============================================================ */
.tapl_0, .tapl_1, .tapl_2, .tapl_3, .tapl_4, .tapl_5, .tapl_6, .tapl_7,  
.tapr_0, .tapr_1, .tapr_2, .tapr_3, .tapr_4, .tapr_5, .tapr_6, .tapr_7 {
	position: relative;
}

.hare_wrap .tapl_0 { left: 60px; }
.hare_wrap .tapl_1 { left: 120px; }
.hare_wrap .tapl_2 { left: 240px; }
.hare_wrap .tapl_3 { left: 360px; }
.hare_wrap .tapl_4 { left: 480px; }
.hare_wrap .tapl_5 { left: 600px; }
.hare_wrap .tapl_6 { left: 720px; }
.hare_wrap .tapl_7 { left: 840px; }

.hare_wrap .tapr_0 { right: 60px; }
.hare_wrap .tapr_1 { right: 120px; }
.hare_wrap .tapr_2 { right: 240px; }
.hare_wrap .tapr_3 { right: 360px; }
.hare_wrap .tapr_4 { right: 480px; }
.hare_wrap .tapr_5 { right: 600px; }
.hare_wrap .tapr_6 { right: 720px; }
.hare_wrap .tapr_7 { right: 840px; }

/* 
 * FLUTUAÇÃO
 * ============================================================ */
.fly_l { float: left; }
.fly_r { float: right; }

/* 
 * CLEAR
 * ============================================================ */
.clear {
	width: 0;
	height: 0;
	display: block;
	clear: both;
	overflow: hidden;
	visibility: hidden;
}

/* 
 * CLEARFIX
 * ============================================================ */
.clearfix:before, 
.clearfix:after, 
.hare_wrap:before, 
.hare_wrap:after {
	width: 0;
	height: 0;
	content: '.';
	font-size: 0;
	line-height: 0;
	display: block;
	overflow: hidden;
	visibility: hidden;
} 

.clearfix:after,
.hare_wrap:after {
	clear: both;
}