<!--HTML-->

<center>
<div class="body">
<div style="margin-top: 17px; margin-left: 10px; text-align: center; font-family: Nautilus Pompilius;  color: #23396b;  text-shadow: 1px 1px 0px #ececf2;position: relative;letter-spacing: px; font-size: 40px;">биржа труда</div>
</span></p>

<div class="text">
<BR>



<center>

<div class="notebook2">
    <input type="radio" name="notebook2a" id="notebook2a_1" checked="checked">
    <input type="radio" name="notebook2a" id="notebook2a_2">
    <input type="radio" name="notebook2a" id="notebook2a_3">
    <input type="radio" name="notebook2a" id="notebook2a_4">
    <input type="radio" name="notebook2a" id="notebook2a_5">
    <input type="radio" name="notebook2a" id="notebook2a_6">

    <div>
        <label for="notebook2a_1">education</label><br><div class="l7"><div style="margin-left: 10px; text-align: center; font-family: Nautilus Pompilius;  color: #23396b;  text-shadow: 1px 1px 0px #ececf2;position: relative;letter-spacing: px; font-size: 36px;">образование</div></div>
     
 ►<b>студент</b>- <a href=http://exalted.rusff.me/profile.php?id=4><b>byun baekhuyn</b></a><br>

    </div>



    <div>
        <label for="notebook2a_2">civil the service</label><br><div class="l7"><div style="margin-left: 10px; text-align: center; font-family: Nautilus Pompilius;  color: #23396b;  text-shadow: 1px 1px 0px #ececf2;position: relative;letter-spacing: px; font-size: 36px;">госслужбы</div></div>

      
    </div>



    <div><label for="notebook2a_3">ser. & creat.</label><br>
<div class="l7"><div style="margin-left: 10px; text-align: center; font-family: Nautilus Pompilius;  color: #23396b;  text-shadow: 1px 1px 0px #ececf2;position: relative;letter-spacing: px; font-size: 36px;">сервис и креативность</div></div>
 ►<b> писатель </b>- <a href=http://exalted.rusff.me/profile.php?id=6><b>lee suwoong</b></a><br>        
       
    </div>


    <div><label for="notebook2a_4">medicine</label><br>
<div class="l7"><div style="margin-left: 10px; text-align: center; font-family: Nautilus Pompilius;  color: #23396b;  text-shadow: 1px 1px 0px #ececf2;position: relative;letter-spacing: px; font-size: 36px;">медицина</div></div>
   
 ►<b> медбрат </b>- <a href=http://exalted.rusff.me/profile.php?id=4><b>byun baekhuyn</b></a><br>

    </div>



    <div> <label for="notebook2a_5">crime</label><br>
<div class="l7"><div style="margin-left: 10px; text-align: center; font-family: Nautilus Pompilius;  color: #23396b;  text-shadow: 1px 1px 0px #ececf2;position: relative;letter-spacing: px; font-size: 36px;">криминал</div></div>
    

 
    </div>


  <div><label for="notebook2a_6">other </label><br>
<div class="l7"><div style="margin-left: 10px; text-align: center; font-family: Nautilus Pompilius;  color: #23396b;  text-shadow: 1px 1px 0px #ececf2;position: relative;letter-spacing: px; font-size: 36px;">другое</div></div>
    


  
    </div>






</div></center>


<br> <br> <br>
</div></div></div>
<style type="text/css">
.body{ width: 616px; height: auto; margin-left: -3px; padding-top: 20px; padding-bottom: 30px; display: block; background: url(http://s8.uploads.ru/Gc4AQ.png) top no-repeat, url(http://s4.uploads.ru/yZxfn.png) bottom no-repeat, url(http://s2.uploads.ru/0cGyC.png) repeat-y;} 


.text {font-family: 'verdana', font-size: 13px; color: #160e29; letter-spacing: 1px; text-align: center; padding-top: 5px;  width: 580px}

.naz {position: relative; height: 18px; top: 4px; margin-left: 2px; }

.naz1 {position: relative; height: 10px; top: 10px; margin-left: 2px; }

.chcharname, .chchardesc{font-family:arial; font-size:8px; line-height:22px;letter-spacing:2pt; text-transform:uppercase}
.chcharname{border-radius: 20px; background:#23396b; color:#515602; width:85px; height:20px; text-align:center; display:block;position:relative; margin:10px 20px 10px 20px; opacity:1}

.notebook2 {
    width: 560px;
    height: 450px;
    position: relative;
}

.notebook2 > input {
    display: none;
}

.notebook2 > div {
    position: absolute;
    box-sizing: border-box;
    top: 30px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    border-radius: 10px;
    padding: 0px 1em;
z-index: 0;
    
 background: #e5e5ee;
  border: 1px solid #e5e5ee;
  border-top: 0px solid #036ec0;
  border-bottom: 4px solid #036ec0;
 -webkit-box-shadow:0 1px 4px #97afc9, 0 0 30px #97afc9 inset;

    transition: all 0.5s ease 0s, z-index 0s 0.5s;
}

.notebook2 > div > *:first-child {
    display: block;
    position: absolute;
    box-sizing: border-box;
    top: -35px;
    width: 95px;
    height: 35px;

    font-family:Bebas Neue;
    font-size: 16px;

background: #a4bad2 url("");
padding: 1px;
border: 1px solid #e4e4ed;
border-top: 2px solid #dadadc;
border-bottom: 1px solid #dadadc;

    color: #fff;
    line-height: 28px;
    cursor: pointer;
    text-align: center;

    transition: all 0.5s ease 0s;
}

.notebook2 > div > *:not(:first-child) {
    opacity: 0;
    transition: all 0.5s ease 0s;
}

.notebook2 > div:nth-of-type(1) > *:first-child { left: -2px; }
.notebook2 > div:nth-of-type(2) > *:first-child { left: 91px; }
.notebook2 > div:nth-of-type(3) > *:first-child { left: 181px; }
.notebook2 > div:nth-of-type(4) > *:first-child { left: 276px; }
.notebook2 > div:nth-of-type(5) > *:first-child { left: 370px; }
.notebook2 > div:nth-of-type(6) > *:first-child { left: 464px; }

.notebook2 > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.notebook2 > input:nth-of-type(2):checked ~ div:nth-of-type(2),
.notebook2 > input:nth-of-type(3):checked ~ div:nth-of-type(3),
.notebook2 > input:nth-of-type(4):checked ~ div:nth-of-type(4),
.notebook2 > input:nth-of-type(5):checked ~ div:nth-of-type(5),
.notebook2 > input:nth-of-type(6):checked ~ div:nth-of-type(6)
 {
    z-index: 10;

    transition: all 0.5s ease 0.5s, z-index 0s 0.5s;
}

.notebook2 > input:nth-of-type(1):checked ~ div:nth-of-type(1) > *:first-child,
.notebook2 > input:nth-of-type(2):checked ~ div:nth-of-type(2) > *:first-child,
.notebook2 > input:nth-of-type(3):checked ~ div:nth-of-type(3) > *:first-child,
.notebook2 > input:nth-of-type(4):checked ~ div:nth-of-type(4) > *:first-child,
.notebook2 > input:nth-of-type(5):checked ~ div:nth-of-type(5) > *:first-child,
.notebook2 > input:nth-of-type(6):checked ~ div:nth-of-type(6) > *:first-child 
{
    color: #d3d3dd;
    transition: all 0.5s ease 0.5s;
}

.notebook2 > input:nth-of-type(1):checked ~ div:nth-of-type(1) > *:not(:first-child),
.notebook2 > input:nth-of-type(2):checked ~ div:nth-of-type(2) > *:not(:first-child),
.notebook2 > input:nth-of-type(3):checked ~ div:nth-of-type(3) > *:not(:first-child),
.notebook2 > input:nth-of-type(4):checked ~ div:nth-of-type(4) > *:not(:first-child),
.notebook2 > input:nth-of-type(5):checked ~ div:nth-of-type(5) > *:not(:first-child),
.notebook2 > input:nth-of-type(6):checked ~ div:nth-of-type(6) > *:not(:first-child)

 {opacity: 3;
    
    transition: all 0.5s ease 0.5s;
}.l7 {
  text-align: center;
  width: 460px;
 padding: 3px;
 background: #b0c3d6
  border: 1px solid #e5e5ee;
  border-top: 4px solid #e5e5ee;
  border-bottom: 4px solid #e5e5ee;
  -webkit-box-shadow:0 1px 4px #ebdcde, 0 0 30px #c7d8e8 inset;
  border-radius: 30px;
  color: #000;
}



</style></div></div></div></div></div>

 ►<b> профессия  </b>- <a href=http://ссылка на профиль><b>имя на англ.</b></a><br>