/* ===========================================================

 * 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;}

.bill-view { list-style: none;}
.bill-view li { padding: 10px 0;}
.bill-view .field-title { padding-bottom: 5px; color: #999; font-weight: bold; font-size: 14px;}
.bill-view p { font-size: 12px;}