/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 01/05/2015, 3:03:08 PM
    Author     : Kostouros1
*/

html { 
    margin: 0; 
    padding: 0; 
    font-size: 62.5%; 
    background-color: #ECECEA;
}

body { 
    max-width: 1090px; 
    min-width: 300px; 
    margin: 0 auto; 
    padding: 4px 10px; 
    font-size: 14px; 
    font-size: 1.4em;    
    background-color: white;
}

h1 { 
    font-size: 1.8em; 
    color: #005ead;
    font-family: "Georgia", "Verdana", "Arial";
}

h2 { 
    font-size: 1.6em; 
    color: #005ead;
    font-family: "Georgia", "Verdana", "Arial";
}

.container { 
    width: 1090px; 
    margin: 4px auto;     
    background-color: white;
}

.container_header h1 { 
    font-size: 2.0em; 
    text-align: center;     
}

.logo {
    /* background: url(../images/logo-agrifood.gif) no-repeat; */
    background: url(../images/banner-petri-190.jpg) no-repeat;
    margin: 0px 0px 0px 0px;
    width: 1090px;
    height: 240px;
}

.logo1 {    
    background: url(../images/banner-petri-190.jpg) no-repeat;
    margin: 0px 0px 0px 0px;
    width: 1090px;
    height: 190px;
}

.logo2 {    
    background: url(../images/banner-tomato-190.jpg) no-repeat;
    margin: 0px 0px 0px 0px;
    width: 1090px;
    height: 190px;
}

.logo3 {    
    background: url(../images/banner-grain-190.jpg) no-repeat;
    margin: 0px 0px 0px 0px;
    width: 1090px;
    height: 190px;
}

.tree_column_heading {
    font-family: "Lucida Console", Monaco, Courier, monospace;     
    margin-bottom: 4px;
}

.container_footer {
    /* background: #2d2d2d; */
    color: #777;
    height: 78px;        
    position: relative;
    text-align: center;
    font: 13px/18px Arial, Helvetica, sans-serif;
    background: #222 url(../images/bg-footer.gif) repeat-x;
    border-top: 4px solid #e7e7e7;
    color: #e9e9e9;
}

.container_footer a, .container_footer a:hover, .container_footer a:active, .container_footer a:visited {
    font-size: 12px;
    color: #fefefe;
    text-decoration: none;
}

.container_footer span { 
    display: block;
    margin: 5px 0;
    margin-top: 15px;
}

.container_footer .section-map ul {
    list-style: none;
    padding: 0;
    margin: 0; 
}

#container_footer .phone {
    font-size: 12px;
    font-weight: normal;
    line-height: 20px;
    display: block;
    color: #fefefe;
}

.logotip {
    background: url(../images/logotip.png) no-repeat;
    position: absolute;
    left: 31px;
    top: 19px;
    overflow: hidden;
    text-indent: -9999px;
    height: 38px;
    width: 110px;
}

.logotip a {
    height: 100%;
    display: block;
}

.tree { 
    overflow: auto; 
    border: 1px solid silver; 
    min-height: 700px; 
    max-height: 700px; 
    font-family: "Lucida Console", Monaco, Courier, monospace; 
}

/* Setup paragraph item as a clickable item. */

.action_button p { 
    margin-top: 10px; 
    color: blue; 
    float: left; 
    text-decoration: underline; 

    padding: 0.25em 0.5em; 
    margin-bottom: 0;  
    margin-right: 0.5em;
    background: #eee; 
    line-height: 1; 
    border: 1px solid #ddd;   

    font-family: Arial;
    font-size: 13px;

}

.action_button p:hover { 
    cursor: pointer; 
}

/* Navigation items (Newest, Newer, Older, Oldest). */

#nav { 
    margin-top: 10px; 
    color: blue;     

    font-family: Arial;
    font-size: 13px;
}

#nav ul { 
    overflow: hidden; 
    margin: 0; 
    padding: 0;
    list-style-type: none; 
    float: right;
}

#nav li { 
    float: left; 
    margin-bottom: 0;  
    margin-right: 0.5em;
    background: #eee; 
    line-height: 1; 
    border: 1px solid #ddd;     
}

#nav a { 
    padding: 0.25em 0.5em; 
    display: block; 
    border: none; 
    color: blue;    
}

#nav a:visited {
    color: blue;    
}

/* This code was found at http://stackoverflow.com/questions/1964839/jquery-please-wait-loading-animation and modified to suit. */

/* Start by setting display:none to make this hidden.  Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak for themselves. Background we set to 80% white with
   our animation centered, and no-repeating 
*/
.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba(220, 220, 220, .8) url('../images/ajax-loader.gif') 50% 50% no-repeat;
}

/* When the body has the loading class, we turn the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our  modal element will be visible */
body.loading .modal {
    display: block;
}

.project_closed {
    color: black;
}

.project_opened {
    color: red !important;
}

.status_authorized {
    color: black;
}

.status_unauthorized {
    color: red !important;
}