/* ===========================================================
 * Filename: style.css
 * Version: 0.1
 * Project: web_360_cms
 * Author: web360 (Marino Dedic, Ban Domesic)
 * =========================================================== */

 /*---CUSTOM ELEMENTS---*/
#user_panel { width: 100%; height: 40px; background-color: #594374; margin-bottom: 40px; box-shadow: 5px 5px 5px #000;}
#left_side { float: left; width: 20%; min-width: 154px; height: auto;}
#right_side { float: right; width: 77%; min-width: 300px; height: auto; margin-right: 3%;}
#container { float: left; width: 100%; height: auto; margin: 0 auto;}


/*-----LOGIN-----*/
#login { position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 400px;
  height: 250px; background:none repeat scroll 0 0 rgba(51, 51, 51, 0.4); text-align: center; padding: 20px 0 0 0;}
#login_error { position: absolute;
  margin: auto;
  top: 10%;
  right: 0;
  left: 0;
  width: 400px;
  height: 50px; background:none repeat scroll 0 0 rgba(51, 51, 51, 0.4); text-align: center; padding: 20px 0 0 0;}

.icon-user{ background-image: url('../images/icons/login_user.png');}
.icon-pass{ background-image: url('../images/icons/login_pass.png');}

/*---404 EROOR---*/
#error404 { position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 400px;
  height: 250px; text-align: center; padding: 20px 0 0 0;}

/*---MENU---*/
#menu { width: 155px; height: auto; margin: 0 auto; color: #D2D2D2;}
#menu a { color: silver;}
#menu a:hover { color: white;}
#menu ul li { padding: 10px 25px 10px 25px; list-style: none;}
#menu ul li:hover { background-color: rgba(51, 51, 51, 0.5)}
.active { border-left: 3px solid white; color: white; background-color: rgba(51, 51, 51, 0.5)}

.sub_nav_m { background-color: rgba(0,0,0,0.3);}
#menu .sub_nav_m:hover { background-color: rgba(0,0,0,0.3);}
#menu .sub_nav li:hover { background-color: rgba(0,0,0,0.3);}
.sub_nav { text-indent: 5px; background-color: rgba(0,0,0,0.3);}
.sub_nav .active { background-color: rgba(0,0,0,0.3); }

/*---USER PANEL---*/
#user_details { width: 150px; height: 100%; float: right;}
.user_details_avatar { width: 35px; height: 35px; border-radius: 50%;}
#user_panel_details_panel { width: 150px; height: auto; position: absolute; right: 0; top: 40px; display: none;}
#user_details:hover #user_panel_details_panel{ display : block; z-index: 99;}
#user_panel_details_panel a { color: white;}
#user_panel_details_panel a:hover { color: silver;}
#messages { float: right; height: 100%; width: 50px; border-right: 1px solid silver; text-align: center;}
.msg_number { position:absolute; top:20px; right: 5px;}

/*---PROFILE---*/
#packet li{ width: 60%; height: 30px; margin: 0 auto; padding-top: 13px; background:none repeat scroll 0 0 rgba(51, 51, 51, 0.5); font-size: 13px; color: white;}
#packet li:hover { width: 70%; background:none repeat scroll 0 0 rgba(51, 51, 51, 0.8); font-size: 15px;  transition: width 0.5s; -webkit-transition: width 0.5s; /* Safari */}

.tooltip:hover:after{
    bottom: -12px;
    left: -70%;
    color: #fff;
    content: attr(alt);
    z-index: 1;
    width: 120px;
    font-size: 12px;
    position: absolute;
}
.tooltip{
    display: inline;
    position: relative;
}

.bw {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
 
.bw:hover {
  -webkit-filter: grayscale(100%);
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    width:100%;
}

table tr td a img { vertical-align: middle; }

.zebra td {
    padding: 10px;
    text-align: center;
    font-size: 14px;
}
.zebra td a img{
    vertical-align: middle;
}

.zebra th, .zebra th:hover {
    padding: 15px;  
    color:#fff !important;
    font-weight:bold;
    border-bottom: 1px solid #fff;
    text-align: center;
    font-size: 15px;
}

.zebra tbody tr:nth-child(even) {
  background-color: rgba(51, 51, 51, 0.8);
  color:#fff;
}

.zebra tbody tr:hover{
  color: #000;
  background-color: rgba(255, 255, 255, 0.4);
}

.zebra tr {
  color:#fff;
}
.thumb{
  width: 100px;
  height: 100px;
  margin: 0 5px 0 0;
}

#files {
   display: none;
}
#upload_click{
  width: 350px;
  height: 70px;
  margin: 0 auto;
  text-align: center;
  padding-top: 50px;
  border: 3px dashed white;
  color: silver;
  font-weight: bold;
  cursor: pointer;
  font-style: italic;
}
#list{
  display: block;
}
#list img{
  padding: 5px;
}
.cell-border { text-align: center;}
.dataTables_wrapper label{ color: #fff;}
#order_plug_info { color: #fff;}

#order_plug { padding: 20px 0 0 0; }
#order_plug thead th { color: #000; font-size: 14px;}
#order_plug td { vertical-align: middle;}
#order_plug tbody { font-size: 12px;}
#order_plug tbody tr:hover { background-color: #333; color: #fff;}
#order_plug tbody tr:hover a{ color: #7AC142;}
.dataTables_paginate * { color: #fff;}
#order_plug_paginate .order_plug_next { color: #fff;}
.dataTables_wrapper .dataTables_paginate .paginate_button { background-color: rgba(255,255,255,0.7);}
.has-tooltip {
    color: #fff;
    cursor: help;
    position: relative;
}

.bold_info { color: red; font-weight: bold; font-size: 1.2em;}

.has-tooltip .info_tooltip {
    background: #1496bb;
    bottom: 100%;
    line-height: 1.2em;
    color: #fff;
    display: block;
    left: -25px;
    margin-bottom: 15px;
    opacity: 0;
    padding: 20px;
    position: absolute;
    visibility: hidden;
    width: 100%;
    -webkit-transform: translateY(10px);
       -moz-transform: translateY(10px);
        -ms-transform: translateY(10px);
         -o-transform: translateY(10px);
            transform: translateY(10px);
    -webkit-transition: all .25s ease-out;
       -moz-transition: all .25s ease-out;
        -ms-transition: all .25s ease-out;
         -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
    -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
        -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
         -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
            box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.has-tooltip .info_tooltip:before {
    bottom: -20px;
    content: " ";
    display: block;
    height: 20px;
    left: 0;
    position: absolute;
    width: 100%;
}  

/* CSS Triangles - see Trevor's post */
.has-tooltip .info_tooltip:after {
    border-left: solid transparent 10px;
    border-right: solid transparent 10px;
    border-top: solid #1496bb 10px;
    bottom: -10px;
    content: " ";
    height: 0;
    left: 50%;
    margin-left: -13px;
    position: absolute;
    width: 0;
}
  
.has-tooltip:hover .info_tooltip {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0px);
       -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
         -o-transform: translateY(0px);
            transform: translateY(0px);
}
#posalji_email { display: none;}
#form_email p { padding: 20px 0 10px 0; font-weight: bold; }
#form_email span { display: inline-block;}