<!--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('http://ipic.su/img/img7/fs/6.1433358011.png');
 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">
<h1><b>Политическая сфера</b></h1>
  
 <center> <font style="font-size:14px; color:#BEBEBE;"> работа в госструктурах</font><hr><br>
  <font style="font-size:14px; color:#DAA520;"> 
  - детектив, полицейский департамент - <a href="http://philgood.rusff.me/profile.php?id=3">Lauren Marlowe</a><br>
- детектив-следователь, полицейский департамент - <a href="http://philgood.rusff.me/profile.php?id=18">Thomas di Angelo</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">
<h1><b>Бизнес</b></h1>
 <justify> <font style="font-size:14px; color:#BEBEBE;">Эта сфера, в свою очередь, подразделяется на несколько отдельных сфер: производственный бизнес, коммерческий бизнес, финансовый бизнес, посреднический бизнес и страховой. </font><hr><br>
<center><font style="font-size:14px; color:#DAA520;">


 - Директор в отеле - <a href="http://philgood.rusff.me/profile.php?id=2">Emma Gatsby</a><br>
 - владелец ночного клуба- <a href="http://philgood.rusff.me/profile.php?id=15">Chris Hamilton</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">
<h1><b>криминал</b></h1>
     <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">
<h1><b>Сфера обучения</b></h1>
     <center> <font style="font-size:14px; color:#BEBEBE;">
       Воспитательская и преподавательская деятельность. А также студенчество.</font><hr><br>
       <center><font style="font-size:14px; color:#DAA520;">
          - студент - <a href="http://philgood.rusff.me/profile.php?id=7">Allison Payne</a>
 - профессор, Университет искусств Филадельфии - <a href="http://philgood.rusff.me/profile.php?id=11">Elizabeth O'Brian</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">
<h1><b>искусство и творчество| СМИ</b></h1>
   <justify>  <font style="font-size:14px; color:#BEBEBE;">
     В этой сфере самовыражаются артисты, художники, писатели, режиссеры, композиторы и другие.</font><hr><br>
<center><font style="font-size:14px; color:#DAA520;">
 - прима-балерина - <a href="http://philgood.rusff.me/profile.php?id=20">Jessica Oswald</a>
 - Театр, актриса- <a href="сhttp://philgood.rusff.me/profile.php?id=6">Daisy Stevens</a>
</div>
</div>

<div class="jgtab">
<input type="radio" id="jgtab-6" name="jgtab-group-1">
<label for="jgtab-6"> <!-- Tab Six !--> </label>
<div class="jgcontainerheader">Биржа труда</div>
<div class="jgcontent">
<h1><b>медицина</b></h1>
  <center> <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-7" name="jgtab-group-1">
<label for="jgtab-7"> <!-- Tab Seven !--> </label>
<div class="jgcontainerheader">Биржа труда</div>
<div class="jgcontent">

<h1><b>Рестораны и развлечения</b></h1>
 <justify> <font style="font-size:14px; color:#BEBEBE;"> в данную категорию входят, как правило, клубы, бары, рестораны и прочие места для приятного времяпровождения.</font><hr><br>
   <center><font style="font-size:14px; color:#DAA520;">
     -------------------------
 - певица в кабаке - <a href="http://philgood.rusff.me/profile.php?id=2">Emma Gatsby</a>
</div>
</div>

<div class="jgtab">
<input type="radio" id="jgtab-8" name="jgtab-group-1">
<label for="jgtab-8"> <!-- Tab Eight !--> </label>
<div class="jgcontainerheader">Биржа труда</div>
<div class="jgcontent">
<h1><b>сфера услуг</b></h1>
  
<justify> <font style="font-size:14px; color:#BEBEBE;"> салоны красоты, кинотеатры, магазины, супермаркеты, гостиничный бизнес, автомойки, парикмахерские, солярии, парки развлечений и так далее</font><hr><br>
  <center><font style="font-size:14px; color:#DAA520;">
   - продавец в кондитерской - <a href="http://philgood.rusff.me/profile.php?id=7">Allison Payne</a>
<br>
   - риэлтор - <a href="http://philgood.rusff.me/profile.php?id=14">Jordana C. Grey</a>

</div>
</div>
<div class="jgtab">
<input type="radio" id="jgtab-9" name="jgtab-group-1">
<label for="jgtab-9"> <!-- Tab Eight !--> </label>
<div class="jgcontainerheader">Биржа труда</div>
<div class="jgcontent">
<h1><b>Другое</b></h1>
  <center> <font style="font-size:14px; color:#BEBEBE;"> все что не вошло в остальные категории</font><hr><br>
    <center><font style="font-size:14px; color:#DAA520;">
      -----------------------


</div>
</div>

</div>

</div>  </div>