/*===========================================================
'  DRIN.TOOLS
'
'  NAME:    index.php
'  VERSION: 0.3
'  DATE:    13/04/2016
'  AUTHOR:  Luca Maroglio
'  COPY:    Zenity Sas (c) 2016
'===========================================================*/

body{
   background-color: #161616;
   color: #f3f3f3;
   font-family: arial, sans-serif;
   font-size: 12pt;
   font-style: normal;
   font-weight: normal;
   margin:72px 0px 0px 0px;
}
td {
   color:#4d4d4d;
}
.LogoBig{
   width:460px;
   height:216px;
   margin-top:40px;
   margin-bottom:40px;  
}
.TopBar{
   position:fixed;
   top:0px;
   left:0px;
   width:100%;
   height:66px;
   padding:2px 8px;
   border-top:3px solid #d88110;
   border-bottom:1px solid #eb901868;
   background-color: #0e0e0e;
}
.TopBarLogo {
   width:136px;
   height:64px;
   padding-left:80px;
}
.TopBarHeader{
   display: inline-block;
   float:right;
   height: 66px;
   padding:0px 80px 0px 0px;
}
.TopBarHeaderSM{
   display: none;
   float:right;
   height: 66px;
   padding:0px 10px 0px 0px;
}
.TopBarBorder{
   box-shadow:0px 5px 8px #1b1b1bc9;
   -moz-box-shadow:0px 5px 8px #1b1b1bc9;
   -webkit-box-shadow:0px 5px 8px #1b1b1bc9;
}
.TopBarButton {
   font-size:13pt;
   font-weight: bold;
   margin-left:6px;
   margin-right:6px;
   cursor: pointer;
   border:1px solid transparent;
   padding:22px 12px;
   display:inline-block;
   height:22px;
}
.TopBarButtonSel {
   color:#f09116;
   background-color:#000000;
   border-left: 1px solid #eb90183d;
   border-right: 1px solid #eb90183d;
}
.TopBarButton:hover {
   color: #f3f3f3;
   border:1px solid #b16e17;
   background-color: #da8a1f;
}

.TopBarMenuSM{
   display:none;
   position:fixed;
   top:74px;
   right:0px;
   width:160px;
   padding:8px 3px;
   background-color: #1C1C1C;  
}
.TopBarMenuBtSM {
   font-size:13pt;
   font-weight: bold;
   margin-left:6px;
   margin-right:6px;
   cursor: pointer;
   border:1px solid transparent;
   padding:14px 12px;
   display:block;
   height:22px;
}
.TopBarMenuBtSMSel {
   color:#f09116;
   background-color:#000000;
   border-top: 1px solid #eb90183d;
   border-bottom: 1px solid #eb90183d;
}
.TopBarMenuBtSM:hover {
   color: #f3f3f3;
   border:1px solid #b16e17;
   background-color: #da8a1f;
}

.BodyPage {
   padding: 10px;
   padding-bottom: 120px;
   background-size: cover;
}

.pageTitle{
   text-align: center;
   font-size: 28pt;
   font-weight: bold;
   margin-top: 14px;
   margin-bottom: 16px;
   text-shadow: 0px 0px 30px #000000;
}
.pageBox{
   display: block;
   padding:6px 4px 4px 4px;
   margin:10px 100px;
   min-height: 270px;
   border-radius: 5px;
   color: #2f2f2f;
   background-color: #292929f7;
   color:#f8f8f8;
}
.pageBoxHead{
   margin:0px;
   padding:0px;
   padding-left:4px;
}

.pageBoxHead_Tab {
   margin:0 5px;
   padding:5px 30px;
   display: inline-block;
   background-color: #383838;
   cursor: pointer;
   color:#f6f6f6;
   text-decoration: none;
}
.pageBoxHead_Tab:hover {
   background-color: #161616;
   color:#ffffff;
}

@media (max-width: 536px) {
   .pageBoxHead_Tab {
      margin:0 3px;
      padding:5px 20px;
   }
}
@media (max-width: 466px) {
   .pageBoxHead_Tab {
      margin:0 2px;
      padding:5px 10px;
   }
}
@media (max-width: 400px) {
   .pageBoxHead_Tab {
      margin:0 2px;
      padding:5px 8px;
      font-size:10pt;
   }
}
@media (max-width: 362px) {
   .pageBoxHead_Tab {
      margin:0 2px;
      padding:5px 4px;
      font-size:9pt;
   }
}

#pageBoxHead_Sel {
   background-color: #f6f6f6;
   color:#1d1d1d;
   text-decoration: none;
}

.pageBoxBody{
   display: block;
   text-align: left;
   padding:20px;
   min-height: 210px;
   border-radius: 5px;
   color: #a8a8a8;
   background-color: #0b0b0b;
}
.pageBoxBody b {
   color:#000000;
   color: #dfdfdf;
}
.bField1{
   display:inline-block;
   width: 100px;
}
.bField2{
   display:inline-block;
   width: 66px;
}


.serverArea{
   text-align: center;
   /* margin:0px 10px 10px 10px; */
   padding:0px auto;
}


.serverBox{
   display: block;
   background-color: #292929f7;
   text-align: left;
   border-radius: 5px;
   padding:6px 4px 4px 4px;
   margin:10px 4px;
   min-height: 98px;
   width: calc( ( 100% - 64px ) / 4 );

   float: left;
   color:#ffffff;
}
.serverBoxHead{
   padding-left:4px;
}
.serverBoxBody{
   display: block;
   text-align: left;
   padding:10px 20px 4px 20px;
   margin-top:3px;
   min-height: 62px;
   border-radius: 5px;
   background-color: #0b0b0b;
}
.serverBoxBody b {
   display:inline-block;
   width: 66px;
   color: #b1b1b1;
}



.BottomPage {
   position:fixed;
   bottom: 0px;
   width: 100%;
   border-top:1px solid #eb901868;
   p---adding:0px 40px 10px 40px;
padding:0px 0px 10px 0px;
   font-size: 11pt;
   color: #dddddd;
   background-color: #060606;
}

.BottomPageBlock {
   display:inline-block;
   width: calc( 32% - 180px) ;
   height:94px;
   padding: 0 90px;
}
.BottomPageBlockLeft {
   float:left; 
   width: calc( 35% - 180px) ;
}
.BottomPageBlockRight {
   float: right;
   text-align: right;
   width: calc( 33% - 180px) ;
}

.BottomPageBlock b {
   display:inline-block;
   margin-top: 12px;
   margin-bottom: 6px;
   color: #ffffff;
}
.BottomPageBlock a {
   color: #ffffff;
   text-decoration: none;
}

.BottomPageBlockRight b {
   margin-top: 12px;
   margin-bottom: 2px;
}
.BottomPageBlockRight span {
   display: block;
   margin-top: 6px;
   margin-bottom: 2px;
}
.txtTime {
   display: inline-block;
}

.textField {
   width:300px;
   font-size:11pt;
   padding:8px;
   margin-bottom:4px;
}
.submitField {
   left: 140px;
   border:1px solid black;
   width:300px;
   padding:10px;
   font-size:11pt;
   border:1px solid #b16e17;
   cursor:pointer;
   background-color: #da8a1f;
   color: white;
   border-radius: 3px;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;            
}
.submitField:hover {
   background-color: #cd7500;
}


.DataConf_Table {
   width: 100% ;
   border: 1px solid #7a7a7a;
}
.DataConf_Table td {
   color: #a5a5a5;
}

@media (max-width: 885px) {
   .TopBarLogo {
      padding-left:10px;
   }
   .TopBarHeader{
      padding-right:10px;
   }
   .pageBox{
      margin:10px 50px;
   }
   .LogoBig{
      width:410px;
      height:192px;
      margin-top:30px;
      margin-bottom:30px;  
   }
   .serverBox{
      width: calc( ( 100% - 48px ) / 3 );
   }

   .BottomPageBlock {
      width: calc( 32% - 40px) ;
      padding: 0 20px;
   }
   .BottomPageBlockLeft {
      width: calc( 35% - 40px) ;
   }
   .BottomPageBlockRight {
      width: calc( 33% - 40px) ;
   }


}

@media (max-width: 744px) {
   .TopBarLogo {
      width:110px;
      height:52px;
      padding:7px 0 7px 0;
   }
   .TopBarHeader{
      padding-right:10px;
   }
   .TopBarButton {
      padding:22px 4px;
      font-size: 12pt;
   }
   .pageBox{
      margin:10px 20px;
   }
   .LogoBig{
      width:360px;
      height:169px;
      margin-top:20px;
      margin-bottom:20px;  
   }

   .BottomPageBlock {
      width: calc( 32% - 20px) ;
      padding: 0 10px;
   }
   .BottomPageBlockLeft {
      width: calc( 35% - 20px) ;
   }
   .BottomPageBlockRight {
      width: calc( 33% - 20px) ;
   }

}

@media (max-width: 590px) {
   .TopBarHeader{
      display:none;
   }
   .TopBarHeaderSM{
      display:inline-block;
   }
   .pageBox{
      margin:10px 10px;
   }
   .LogoBig{
      width:320px;
      height:150px;
      margin-top:6px;
      margin-bottom:6px;  
   }
   .serverBox{
      width: calc( ( 100% - 32px ) / 2 );
   }
}


@media (max-width: 356px) {

   .BodyPage {
      padding-bottom: 120px;
      padding-bottom: 260px;
   }
   .BottomPageBlock {
      width: 100%;
      height: 80px;
      padding-left: 25px;
   }
   .BottomPageBlock b {
      margin-top: 10px;
      position: relative;
      left:-15px;
   }   
   .BottomPageBlockLeft {
      width: 100%;
      float: unset;
   }
   .BottomPageBlockRight {
      width: 100%;
      text-align: left;
      float: unset;
   }

}