<meta charset="utf-8">
<div class="header">
 <h1><font  face="roboto - medium">Описание интерфейса программы</font></h1>
 <h2>Описание интерфейса клиентского приложения White Label</h3>
</div>          
  <img class="main-picture" src="/download/attachments/26968566/White_Label_icon.png?version=1&modificationDate=1516894347159&api=v2">
  <div class="menu-container">
     <ul class="accordion">
     	<li class="accordion_item">
           <input type="checkbox" class="accordion_toggle" id="toggle-01" hidden>
           <label class="accordion_trigger" for="toggle-01">Заказать</label>
           <i></i>
			<div class="accordion_target">
				<img src="/download/attachments/26968566/Order_WL_350.png?version=1&modificationDate=1516877110928&api=v2">
				<div class="description_text">
							</br>
							<p>Тип маршрута</p>
                        		<p>- По адресу</p>
								<p>- По городу</p>
							<p>Формирование маршрута</p>
                        		<p>- Начало маршрута</p>
								<p>- Конец маршрута</p>
								<p>- Промежуточные точки</p>
							<p>Дополнительно</p>
                        		<p>- Время подачи</p>
                 	      		<p>- Контактный телефон</p>
                      	 		<p>- Дополнительные услуги</p>
                        	<p>Изменение стоимости заказа</p>
							<p>Тип машины</p>
							<p>Заказ и сброс</p>
							</br>
				</div>
			</div>
        </li>
        <li class="accordion_item">
            <input type="checkbox" class="accordion_toggle" id="toggle-02" hidden>
            <label class="accordion_trigger" for="toggle-02">Мои заказы</label>
            <i></i>
             <div class="accordion_target">
				<img src="/download/attachments/26968566/Мои_заказы_350.png?version=1&modificationDate=1516888646250&api=v2">
				<div class="description_text">
							</br>
							</br>
				</div>
           	</div>
        </li>

        <li class="accordion_item">
            <input type="checkbox" class="accordion_toggle" id="toggle-03" hidden>
            <label class="accordion_trigger" for="toggle-03">Профиль</label>
            <i></i>
            <div class="accordion_target">
				<img src="/download/attachments/26968566/Профиль_350.png?version=1&modificationDate=1516888646913&api=v2">
				<div class="description_text">
							</br>

							</br>
				</div>
           	</div>
        </li>


       <li class="accordion_item">
            <input type="checkbox" class="accordion_toggle" id="toggle-04" hidden>
            <label class="accordion_trigger" for="toggle-04">Настройки</label>
            <i></i>
            <div class="accordion_target">
				<img src="/download/attachments/26968566/Настройки_350.png?version=1&modificationDate=1516888646609&api=v2">
				<div class="description_text">
							</br>
                        	
							</br>
				</div>
           	</div>
        </li>

     </ul>
 </div>


			  
              
<style>


	.main-picture {
		position: absolute;
		top: 220px;
		left: 140px;
	}
    .menu-container * {
        list-style: none;
        margin: 0;
        padding: 0;
    }

	.accordion {
        padding: 0 0 0 400px;
	}


    .accordion_item {
        border-bottom: 1px solid #DFE1E6;
        position: relative;
    }

    .accordion_trigger:hover {
        background-color: #F4F5F7;
    }

    .accordion_item:last-of-type {
        border-bottom: none;
    }

    .accordion_trigger {
        display: block;
        font-weight: normal;
        cursor: pointer;
        padding: 1.2em;
        color: #253858;
        font-weight: bold;
    }

    .accordion_toggle {
        position: absolute;
        display: none;
    }
    .accordion_target {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        overflow: hidden;
        position: absolute;
        width: 1px;
    }

	.accordion_target img {
		position: absolute;
		top: 0px;
		left: -380px;
		border: 3px solid #195177;
		border-radius: 8px;
	}


	.description_text {
		height: 600px;
	}
    .accordion_target p {
        margin-bottom: 1em;
    }

    .accordion_toggle:checked~.accordion_target {
        position: static;
        overflow: visible;
        clip: auto;
        padding: 0.2em 1.2em 0.2em 1.2em;
        width: auto;
        height: auto;
    }

    .accordion_item i {
        width: 0.7em;
        height: 0.7em;
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        margin: 1.4em;
        border-color: #253858;
        border-style: solid;
        border-top-width: 0.3em;
        border-right-width: 0.3em;
        border-left-width: 0;
        border-bottom-width: 0;
        transform: rotate(45deg);
    }

    .accordion_toggle:checked~i {
        border-top-width: 0;
        border-right-width: 0.3em;
        border-left-width: 0;
        border-bottom-width: 0.3em;
    }
</style>


<style>
    .header {
        background-image: url("/download/attachments/6817598/bg_3.png");
        text-align: center;
        padding: 20px;
    }

    .header h1,

    .header span {
        color: #583C00;
    }


    .header h2,
    .header span {
        color: #444444;
    }

    .header h1,
    .header h2 {
        margin: 20px;
    }

    .header h1 {
        font-size: 48px;
    }

    .header h2 {
        font-size: 18px;
    }

    .header a:link,
    .menu a:link {
        text-decoration: none;
    }

    .header a:visited,
    .menu a:visited {
        text-decoration: none;
    }

    .header span {
        margin: 10px 15px 10px 15px;
        font-weight: 600;
    }

    .header span:hover {
        background-color: #4DA0EA;
        border-radius: 0.5em;
        margin: 0px;
        padding: 10px 15px 10px 15px;
    }


    #title-heading {
        display: none;
    }

    .page-metadata {
        visibility: hidden;
    }
</style>