/*
Theme Name: PureCssBadges
Version: 1
Author: Raphael Bastide
Author URI: http://raphaelbastide.com
*/

*{
margin:0;
padding:0;
}

body{
font-family:courier new, courier, monospace;
background:grey;
padding:70px 0 0 0;
}

#page{
margin:0 auto;
width:900px;
background:#777777;
}

#footer{
text-align:center;
position:fixed;
bottom:0;
margin:0 auto;
background:#777777;
width:900px;
font-family:arial, verdana;
font-size:10px;
padding:0 0 5px 0;
color:lightgrey;
}

/*.......................Commun......*/

.border{
margin:0px auto;
}

.form{
background:white;
}

.badge{
text-align:center;
height:170px;
width:200px;
background:#777777;
margin:20px;
padding:50px 30px 30px 30px;
float:left;
}


/*.......................Badge 6......*/

#b6 .form{
padding:30px 0 0 0;
background:transparent;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
}

#b6 .n1, #b6 .n2, #b6 .n3, #b6 .n4, #b6 .n5, #b6 .n6, #b6 .n7, #b6 .n8{
background:white;
}

#b6 .n1{
margin:-5px auto 0 auto;
width:190px;
height:10px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

#b6 .n2{
margin:-3px 10px 0 10px;
width:190px;
height:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

#b6 .n3{
margin:-20px auto 0 auto;
width:150px;
height:40px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}

#b6 .n4{
margin:-30px 0px 0 2px;
width:184px;
height:40px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
}

#b6 .n5{
-moz-border-radius:10px;
-webkit-border-radius:10px;
margin:-8px 0px 0 -10px;
width:190px;
height:15px;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
}
#b6 .n6{
-moz-border-radius:10px;
-webkit-border-radius:10px;
margin:-10px 0px 0 15px;
width:70px;
height:15px;
-webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
}
#b6 .n7{
-moz-border-radius:2px;
-webkit-border-radius:2px;
margin:-10px 0px 0 15px;
width:80px;
height:3px;
-webkit-transform: rotate(70deg);
-moz-transform: rotate(100deg);
}
#b6 .n8{
-moz-border-radius:5px;
-webkit-border-radius:5px;
margin:-10px 0px 0 22px;
width:40px;
height:7px;
-webkit-transform: rotate(70deg);
-moz-transform: rotate(100deg);
}

#b6 p{
margin:-37px 0 0 -5px;
font-family:market;
font-size:25px;
-webkit-transform: rotate(2deg);
-moz-transform: rotate(-2deg);
}

/*.......................Badge 5......*/

#b5{
padding:60px 30px 20px 30px;
}

#b5 .form{
font-family:lido;
font-size:35px;
margin:0px auto 0 auto;
height:110px;
width:80px;
line-height:26px;
margin-top:-30px;
}

#b5:after {
content:"\25BC";
font-size:8.5em;
color:white;
line-height:83px;
}

#b5 .n1, #b5 .n2, #b5 .n3{
display:block;
border-bottom:double 3px;
color:black;
width:20px;
float:left;
}

#b5 .n1, #b5 .n3{
line-height:60px;
margin:20px 5px 0px 5px;
height:70px;
}

#b5 .n2 {
line-height:60px;
margin:5px 0 0 0 ;
height:70px;
}
/*.......................Badge 4......*/

#b4{
padding:70px 30px 10px 30px;
}

#b4 .form{
font-family:elementa;
font-size:33px;
margin:0px auto 0 auto;
height:60px;
width:100px;
line-height:26px;
-moz-border-radius:50px;
-webkit-border-radius:100px;
margin-top:-30px;
}

#b4 .form p {
border-top:solid 1px;
width:100px;
}

#b4 .form .sub{
font-family:arial;
text-transform:uppercase;
letter-spacing:1px;
font-size:10px;
border-top:none;
}

#b4 .line0, #b4 .line1, #b4 .line2 {
margin:0 auto;
display:block;
background:white;
-moz-border-radius:0 0 5px 5px;
-webkit-border-radius:0 0 5px 5px;
}

#b4 .line0{
height:13px;
width:165px;
}
#b4 .line1{
height:13px;
width:145px;
}

#b4 .line2{
height:13px;
width:120px;
}

/*.......................Badge 3......*/

#b3{
padding:80px 30px 0px 30px;
}

#b3 .form{
display:block;
z-index:30;
background:white;
margin:8px auto 0 auto;
height:60px;
width:100px;
border-bottom:1px solid #575757;
-moz-border-radius:0 0 4px 4px;
-webkit-border-radius:0 0 4px 4px;
}

#b3 p{
padding:10px 0 0 0;
line-height:15px;
font-family: quicksand;
font-size:16px;
text-transform:uppercase;
letter-spacing:0px;
color:#777777;
}

#b3 .line1, #b3 .line2 {
border-bottom:1px solid #575757;
z-index: 0;
display:block;
width:48px;
height:60px;
background:#F7F7F7;
}

#b3 .line1{
float:left;
border-right:1px solid #DFDFDF;
-moz-border-radius:4px 4px 0px 4px;
-webkit-border-radius:4px 4px 0px 4px;
}

#b3 .line2{
border-left:1px solid #DFDFDF;
float:right;
-moz-border-radius:4px 4px 4px 0;
-webkit-border-radius:4px 4px 4px 0;
}

#b3 .line1:before {
content:"\25CF";
color:#777777;
font-size:35px;
line-height:55px;
margin:0 0px 0 -31px;
padding:0 20px 0 0;
}

#b3 .line2:after {
content:"\25CF";
color:#777777;
font-size:35px;
line-height:55px;
margin:0 0px 0 0px;
padding:0  0 0 40px;
}

/*.......................Badge 2......*/

#b2{
padding:60px 30px 20px 30px;
}

#b2 .form{
margin:5px auto 0 auto;
height:90px;
width:90px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
}

#b2 .form p{
display:block;
margin:0 auto;
padding-top:20px;
height:70px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
font-family: cosmetica;
text-transform:uppercase;
}

#b2 .line1{
display:block;
margin:0 auto;
width:90px;
border-bottom:1px solid white;
}

#b2 .line2{
display:block;
margin:0 auto;
width:90px;
border-bottom:1px solid white;
}

#b2 .n2{
display:block;
float:left;
width:30px;
font-size:45px;
}

#b2 .n1, #b2 .n3{
width:30px;
display:block;
float:left;
font-size:23px;
padding-top:12px;
}

/*.......................Badge 1......*/


#b1 .border{
margin:10px auto 0 auto;
height:110px;
width:110px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
border:solid 3px white;
    -moz-box-shadow: #535353 2px 2px 3px;
    -webkit-box-shadow: #535353 2px 2px 3px;
}

#b1 .form{
margin:5px auto 0 auto;
height:100px;
width:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
    -moz-box-shadow: #535353 2px 2px 3px;
    -webkit-box-shadow: #535353 2px 2px 3px;
}

#b1 .form p{
display:block;
margin:0 auto;
font-family:minimum;
font-size:40px;
padding:15px 0 0 0;
width:60px;
}

#b1 .form .line{
display:block;
margin:0 auto;
width:70px;
border-bottom:2px solid black;
    -webkit-transform: rotate(-15deg);
    -moz-transform: rotate(-15deg);
}






/*....................................*/


@font-face {
  font-family: minimum;
  src: url(fonts/min.otf);
}

@font-face {
  font-family: cosmetica;
  src: url(fonts/MgOpenCosmeticaBold.ttf);
}
@font-face {
  font-family: market;
  src: url(fonts/Market-Regular.otf);
}
 @font-face {
  font-family: julian;
  src: url(fonts/ARJULIAN.ttf);
}

 @font-face {
  font-family: circle;
  src: url(fonts/Cicle_Shadow.ttf);
}
 @font-face {
  font-family: elementa;
  src: url(fonts/ElementaSC.otf);
}

 @font-face {
  font-family: quicksand;
  src: url(fonts/Quicksand_Bold.otf);
}
 @font-face {
  font-family: lido;
  src: url(fonts/LidoSTFCondensed.otf);
}


a{
color:lightgrey;
}
a img{
border:none;}

a:hover{
color:black;
}

a:active{
outline: none;
}

:-moz-any-link:focus {
outline: none;
}

::selection {
color:white;
background: #0000ff;
}

::-moz-selection {
color:white;
background: #0000ff;
}