<!--HTML-->
<div class="postcolor"> <link href="http://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700italic,900italic|Bree+Serif" rel="stylesheet" type="text/css"><style type="text/css">

/*  EAEEDF A8BBCC, 5372A1, 263E6E, 131732 */

.jgcontainer {
 margin: 20px auto; 
 height: 400px;
 width: 410px;
 background-image:url('https://s-media-cache-ak0.pinimg.com/736x/7f/2b/5d/7f2b5d3b5a70df85fd4be6eb08b728b5.jpg');
 font: normal normal normal 11px/105% 'Bree Serif', Calibri;
 text-align: justify;
 
 overflow: hidden;
 border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;
}

.jgtabs {
 margin: 0px 0px 0px 30px; 
 position: relative;
 width: 350px; 
 height:  300px;
 top: 20px;
}

.jgtab {
 display: block; 
}


.jgtab label {
 display: block; 
 width: 15px;
 height: 15px;
 background: #DEB887;
 border: 1px solid #FF8C00;
 margin: 0px 0px 10px;
 position: relative;
 top: 40px;
 left: 354px;
 z-index: 2;
 border-radius: 45%
}

.jgtab input[type=radio]:checked ~ label {
 background: white;
 z-index: 2;
}

.jgtab input[type=radio] {
 display: none; 
}

/* if you want tab transitions they go here */
.jgcontent {
 position: absolute;
 top: 250px;
 bottom: 3px;
 left: 0px;
 right: 0px;
 padding: 0px 3px;
 background: #F5DEB3;
 border: 2px dotted #A0522D;
 overflow: auto;
 opacity: 0;
 transition: all 0.4s linear 0s;
  -webkit-transition: all 0.4s linear 0s;
  -moz-transition: all 0.4s linear 0s;
  -o-transition: all 0.4s linear 0s;
}

/* if you want tab transitions they also go here */
.jgtab input[type=radio]:checked ~ label ~ .jgcontent {
 z-index: 1;
 left: 0px;
 top: 0px;
 opacity: 1;
 transition: all 0.4s linear 0s;
  -webkit-transition: all 0.4s linear 0s;
  -moz-transition: all 0.4s linear 0s;
  -o-transition: all 0.4s linear 0s;
}

.jgtab input[type=radio]:checked ~ label ~ .jgcontainerheader {
 opacity: 1;
 left: -140px;
 transition: all 0.4s linear 0s;
  -webkit-transition: all 0.4s linear 0s;
  -moz-transition: all 0.4s linear 0s;
  -o-transition: all 0.4s linear 0s;
}

.jgcontainerheader {
  width: 250px;
  height: 30px;
  margin: 0px;
  font: italic bold normal 25px/30px 'Playfair Display', 'Times New Roman';
  text-align: left;
  text-transform: lowercase;
  color: #F4A460;
  text-shadow: 1px 1px 0px black;
  position: absolute;
  top: 80px; 
  left: -170px;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  z-index: 3;
  opacity: 0;
}
  
.jgcontainer h1 {
  margin: 4px 0px;
  padding: 3px;
  font: normal normal normal 18px/100% Book Antiqua;
  text-transform: uppercase;
  text-align: center;
  color: #D2691E;
  
}

.jgcontainer h1:nth-of-type(1) { margin-top: 0px; }

.jgcontainer ::-webkit-scrollbar { background: #EAEEDF; width: 3px; }
.jgcontainer ::-webkit-scrollbar-thumb { background: #A8BBCC; width: 3px }
.jgcontainer ::-webkit-scrollbar-corner { background: #fff; }

.jgcontainer a:link, .jgcontainer a:active, .jgcontainer a:visited, .jgcontainer a:hover {
  color: #5372A1;
  text-decoration: none;
  font-style: none;
  font-weight: normal;
  letter-spacing: 1px;
  transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  -moz-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
}

.jgcontainer a:hover { color: #e8e8ea!important; }

</style>

<div class="jgcontainer">

<div class="jgtabs">


<div class="jgtab">
<input type="radio" id="jgtab-1" name="jgtab-group-1" checked="">
<label for="jgtab-1"> <!-- Tab One !--> </label>
<div class="jgcontainerheader">Биржа труда</div>
 
<div class="jgcontent">
  
 <center><font style="font-size:14px; color:#BEBEBE;"> профессии Грозового племени</font><hr><br>
<font style="font-size:14px; color:#DAA520;"> <center>
врач скорой помощи - <a href=http://cwnw.rusff.me/profile.php?id=14>Gillian Thunder</a>


</div>
</div>


<div class="jgtab">
<input type="radio" id="jgtab-2" name="jgtab-group-1">
<label for="jgtab-2"> <!-- Tab Two !--> </label>
<div class="jgcontainerheader">Биржа труда</div>
<div class="jgcontent">
 <justify><center> <font style="font-size:14px; color:#BEBEBE;">профессии племени Ветра</font><hr><br>
<center><font style="font-size:14px; color:#DAA520;">
авиатехник - <a href=http://cwnw.rusff.me/profile.php?id=10>Alexander Wind</a>


</div>
</div> 


<div class="jgtab">
<input type="radio" id="jgtab-3" name="jgtab-group-1">
<label for="jgtab-3"> <!-- Tab Three !--> </label>
<div class="jgcontainerheader">Биржа труда</div>
<div class="jgcontent">
     <center><justify>  <font style="font-size:14px; color:#BEBEBE;"> профессии Речного племени</font><hr><br>
<center><font style="font-size:14px; color:#DAA520;">
        текст
</div>
</div>

<div class="jgtab">
<input type="radio" id="jgtab-4" name="jgtab-group-1">
<label for="jgtab-4"> <!-- Tab Four !--> </label>
<div class="jgcontainerheader">Биржа труда</div>
<div class="jgcontent">
     <center> <font style="font-size:14px; color:#BEBEBE;">
      профессии племени Теней</font><hr><br>
       <center><font style="font-size:14px; color:#DAA520;">
мелкая воровка - <a href=http://cwnw.rusff.me/profile.php?id=5>Alllison Shadow</a><br>
гениальный хакер – <a href=http://cwnw.rusff.me/profile.php?id=7>Charlie Shadow</a>
</div>
</div>

<div class="jgtab">
<input type="radio" id="jgtab-5" name="jgtab-group-1">
<label for="jgtab-5"> <!-- Tab Five !--> </label>
<div class="jgcontainerheader">Биржа труда</div>
<div class="jgcontent">
   <justify>  <font style="font-size:14px; color:#BEBEBE;">
     <center>все, что не вошло в прочие сферы.</font><hr><br>
<center><font style="font-size:14px; color:#DAA520;">
кладовщик в спортивном магазине - <a href=http://cwnw.rusff.me/profile.php?id=9>Pavel Krzhehky</a>
</div>
</div>

</div>

</div>

</div>  </div>

сфера
профессия - <a href=ссылка на профиль>Имя Фамилия на англ.</a>