/* -------------------------------------- *
 * Global style to make the page "pretty" *
 * -------------------------------------- */

html, body{
	padding : 0;
	margin : 0;
	height : 100%;
	width : 100%
}

body{
	padding : 0;
	margin : 0;
	font : 0.9em Arial, Helvetica, sans-serif;
	background : #ddd;
}

.block{
	background : #FFF;
	width : 400px;
	height : 150px;
	margin : 0 auto 2em;
}

.content{
	width : 400px;
	height : 150px;
	display : -moz-box;
	display : -webkit-box;
	display : box;
}



a{
	color : #CCF;
}

h1{
	font-size : 1.4em;
	color : #FFF;
	border-bottom : 1px solid #FFF;
	width : 400px;
	margin : 1em auto;
	text-align : center;
	padding-bottom : 0.6em;
}

p{
	font : 0.7em Verdana, Arial, Helvetica, sans-serif;
	color : #FFF;
	/**border-top : 1px solid #FFF;**/
	width : 500px;
	margin : 1em auto;
	text-align : center;
	padding-top : 0.6em;
}

h2{
	font : 0.7em Verdana, Arial, Helvetica, sans-serif;
	background : #CCC;
	margin : 2em auto 0;
	padding : 8px;
	width : 384px;
	
	-moz-border-radius : 5px 5px 0 0;
	-webkit-border-radius : 5px 5px 0 0;
	border-radius : 5px 5px 0 0;
}



.drobe strong{
	display : block;	
	text-align : center;
}

p.blocktext {
    margin-left: auto;
    margin-right: auto;  
	text-align: center;
}

div.blocktext{  
  margin: 0;
  padding: 0;
  text-align: center;
  display: block;
}


/* -------------------------------------- *
 * Coloring Box*
 * -------------------------------------- */


.v1{
	background : #FCC;
}

.v2{
	background : #CFC;
}

.v3{
	background : #CCF;
}

.v4{
	background : #FFC;
}

.v5{
	background : #FCF;
}

.clr { background : #85c420;}

/* -------------------------------------- *
 * Dashboard Drobe *
 * -------------------------------------- */


.row-1 {
	display : block;
	padding : 10px;
}

div.row-1 a {
  display: block;
  padding: 10px;
  color: #fff;
  background-color: #b4e664;
  text-align: center;
  text-decoration : none;
}

div.row-1 a:hover {
  background-color: #85c420;
}

.row-2 {
	display : block;
	padding : 10px;
	width : 260px;
	margin: -60px 0 0 0;
}

div.row-2 a {
  display: block;
  padding: 10px;
  color: #fff;
  background-color: #b4e664;
  text-align: center;
  text-decoration : none;
}

div.row-2 a:hover {
  background-color: #85c420;
}

.row-3 {
	display : block;
	padding : 10px;
	width : 400px;
}

div.row-3 a {
  display: block;
  padding: 10px;
  color: #fff;
  background-color: #b4e664;
  text-align: center;
  text-decoration : none;
}

div.row-3 a:hover {
  background-color: #85c420;
}

.row-4 {
	display : block;
	padding : 10px;
	
}

div.row-4 a {
  display: block;
  padding: 10px;
  color: #fff;
  background-color: #b4e664;
  text-align: center;
  text-decoration : none;
}

div.row-4 a:hover {
  background-color: #85c420;
}

.col-1a {
	display : block;
	padding : 10px;
	width : 120px;
}

div.col-1a a {
  display: block;
  padding: 10px;
  color: #fff;
  background-color: #b4e664;
  text-align: center;
  text-decoration : none;
}

div.col-1a a:hover {
  background-color: #85c420;
}


.col-1b {
	display : block;
	padding : 10px;
	width : 120px;
	margin: 0px;
}

div.col-1b a {
  display: block;
  padding: 10px;
  color: #fff;
  background-color: #b4e664;
  text-align: center;
  text-decoration : none;
}

div.col-1b a:hover {
  background-color: #85c420;
}

.col-1c {
	display : block;
	padding : 10px;
	width : 120px;
}

div.col-1c a {
  display: block;
  padding: 10px;
  color: #fff;
  background-color: #b4e664;
  text-align: center;
  text-decoration : none;
}

div.col-1c a:hover {
  background-color: #85c420;
}


.col-2a {
	display : block;
	padding : 10px;
	width : 120px;	
	margin: -196px 0 0 140px;

}

div.col-2a a {
  display: block;
  padding: 20px 0 20px 0;
  color: #fff;
  background-color: #b4e664;
  text-align: center;
  text-decoration : none;
}

div.col-2a a:hover {
  background-color: #85c420;
}


.col-2b {
	display : block;
	padding : 10px;
	width : 120px;	
	margin: 0 0 0 140px;
}


div.col-2b a {
  display: block;
  padding: 20px 0 20px 0;
  color: #fff;
  background-color: #b4e664;
  text-align: center;
  text-decoration : none;
}

div.col-2b a:hover {
  background-color: #85c420;
}

.col-3 {
	display : block;
	padding : 10px;
	height: 236px;
	width : 120px;	
	margin: -196px 0 0 280px;
}

div.col-3 a {
  display: block;
  padding: 99px 0 99px 0;
  color: #fff;
  background-color: #b4e664;
  text-align: center;
  text-decoration : none;
}

div.col-3 a:hover {
  background-color: #85c420;
}

/* -------------------------------- *
 * The flexible box model in action *
 * -------------------------------- */
 


/*************
 * EXAMPLE 1 *
 *************/

#exemple1 .content{
	-moz-box-orient : horizontal;
	-webkit-box-orient : horizontal;
	box-orient : horizontal;
}

#exemple1 .boite{
	-moz-box-flex : 1;
	-webkit-box-flex : 1;
	box-flex : 1;
}


/*************
 * EXAMPLE 2 *
 *************/

#exemple2 .content{
	-moz-box-orient : vertical;
	-moz-box-direction : reverse;
	
	-webkit-box-orient : vertical;
	-webkit-box-direction : reverse;
	
	box-orient : vertical;
	box-direction : reverse;
	
	padding: 0 10px 0 0;
}

#exemple2 .boite{
	-moz-box-flex : 1;
	-webkit-box-flex : 1;
	box-flex : 1;
}


/*************
 * EXAMPLE 3 *
 *************/

#exemple3 .content{
	-moz-box-orient : vertical;
	-moz-box-direction : reverse;
	
	-webkit-box-orient : vertical;
	-webkit-box-direction : reverse;
	
	box-orient : vertical;
	box-direction : reverse;
}

#exemple3 .boite{
	-moz-box-flex : 1;
	-webkit-box-flex : 1;
	box-flex : 1;
}

#exemple3 .v1{
	-moz-box-ordinal-group : 2;
	-webkit-box-ordinal-group : 2;
	box-ordinal-group : 2;
}

#exemple3 .v2{
	-moz-box-ordinal-group : 2;
	-webkit-box-ordinal-group : 2;
	box-ordinal-group : 2;
}

#exemple3 .v3{
	-moz-box-ordinal-group : 1;
	-webkit-box-ordinal-group : 1;
	box-ordinal-group : 1;
}


/*************
 * EXAMPLE 4 *
 *************/

#exemple4 .content{
	-moz-box-orient : horizontal;
	-webkit-box-orient : horizontal;
	box-orient : horizontal;
}

#exemple4 .v1{
	-moz-box-flex : 2;
	-webkit-box-flex : 2;
	box-flex : 2;
}

#exemple4 .v2{
	-moz-box-flex : 1;
	-webkit-box-flex : 1;
	box-flex : 1;
}

#exemple4 .v3{
	-moz-box-flex : 1;
	-webkit-box-flex : 1;
	box-flex : 1;
}


/*************
 * EXAMPLE 5 *
 *************/

#exemple5 .content{
	-moz-box-orient : horizontal;
	-webkit-box-orient : horizontal;
	box-orient : horizontal;
}

#exemple5 .v1{
	-moz-box-flex : 2;
	-webkit-box-flex : 2;
	box-flex : 2;
}

#exemple5 .v2{
	-moz-box-flex : 1;
	-webkit-box-flex : 1;
	box-flex : 1;
}

#exemple5 .v3{
	width : 160px;
}


/*************
 * EXAMPLE 6 *
 *************/

#exemple6 .content{
	-moz-box-orient : horizontal;
	-moz-box-pack : center;
	-moz-box-align : center;
	
	-webkit-box-orient : horizontal;
	-webkit-box-pack : center;
	-webkit-box-align : center;
	
	box-orient : horizontal;
	box-pack : center;
	box-align : center;
}