/* ------------------------------ Body ------------------------------ */
body{
	font-family: "Ubuntu";
	margin: 0px;
	padding: 9px 0px 0px 0px;
	font-size: 15px;
	background: #efefef; 	
}
/* ----------------------------- Header ----------------------------- */
header{
	margin: 0 0 9px 0;
	height: 50px;
	background: #2b71e9;
	box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
	overflow: hidden;
}
/* ------------------------------ Menu ------------------------------ */
nav ul{
	padding: 0;
	margin: 0 auto;	
	list-style-type: none;
}
nav ul li{
	float: left;
	margin: 1px 0px 1px 0;	
    line-height: 2.5em;    
	font-weight: bold;
    font-size: 20px;
    height: 100%;
    border-right: 1px solid #ddd;
	
}
nav ul li:hover, .actual{
	background: #2a69d1;
	box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.5);	
}
nav ul li:first-child a{
	background: transparent url('images/wifiguard_menu.png') no-repeat 97% 50%;
	padding-right: 30px;
}
nav a, nav a:hover{
	padding: 0 6px 0 6px;
	color: white;
	text-decoration: none;
	display: block;
}
.logo_header{
	float: left;
	padding: 0 10px 0 50px;
	border-right: 1px solid #ddd;
}
/* ---------------------------- Article ----------------------------- */
article{
	width: 950px;
	margin: 0 auto;
	padding: 20px;
	border: 1px solid #ddd;
	background: white; 
	border-radius: 5px;
}
/* --------------------- Top about application ---------------------- */
#top_app{		
	margin: 10px;
	padding: 10px;
	border: 1px solid #ddd;
	box-shadow: 0px 1px 5px rgba(100, 100, 100, 0.49);
	border-radius: 5px;
}
/* ---------------------- Container of table ------------------------ */
#container_table{
	display: table;
	margin: 10px;
	box-shadow: 0px 1px 5px rgba(100, 100, 100, 0.49);
	border-radius: 5px;	
}
#left_cell, #middle_cell, #right_cell{
	display: table-cell;
	width: 33%;
    padding: 10px;
    background: #efefef;
    border: 2px solid white;
}
#right_cell a{
	 color:  none; 
	 border: none;
}
/* ----------------------------- Footer ----------------------------- */
footer{
    height: 100%;
    color: black;
    margin: 10px 0 0 0;
    padding: 10px 0 10px 50px; 
    border-top: 1px solid #ddd;
}
/* ----------------------------- Button ----------------------------- */
.button{
	display: inline-block;
	text-decoration: none;	
	color: white;
	background: #2b71e9;
	padding: 10px 20px 10px 20px;	
	
	box-shadow: 1px 1px 5px rgba(100, 100, 100, 0.49);
	border-radius: 5px;	
}
.button_installation{
	display: inline-block;
	text-decoration: none;	
	color: white;
	background: #2b71e9;
	padding: 10px 20px 10px 20px;	
	
	box-shadow: 1px 1px 5px rgba(100, 100, 100, 0.49);
	border-radius: 5px;
	margin: 20% 0 0 0;
}
.button:hover, .button_installation:hover{
	background: #2a69d1;
	text-decoration: none;
}
/* ------------------------- Version Table -------------------------- */
#version_table_container{
	width: 98%;
	padding: 5px;
	margin: 0 auto;
	border: 1px solid #ddd;
	background-color: #2b71e9;
	box-shadow: 0px 1px 5px rgba(100, 100, 100, 0.49);
	border-radius: 5px;
}
.version_table{	
	width: 100%;
	text-align: center;
	border-collapse:collapse;
	margin: 0 auto;
}
.version_table thead{
	font-weight:bold;
	background-color: #2b71e9;
	color: white;
}
.version_table td,th{
	border: 2px solid #ccc;
}
.version_table tbody tr:nth-child(2n){
	background: #ddd;
}
.version_table tbody tr:nth-child(2n+1){
	background: white;
}
.img_version_table{
	width: 400px;
	margin: 0 auto;
}
/* ----------------------- Text container --------------------------- */
.text_container{
	background: #efefef;
	margin: 10px 0px 10px 0px;
	padding: 10px;
	border: 1px solid #ddd;
	box-shadow: 0px 1px 5px rgba(100, 100, 100, 0.49);
	border-radius: 5px; 
}
section{
	background: white;
	margin: 10px;
	padding: 10px;
	border: 1px solid #ddd;
	box-shadow: 0px 1px 5px rgba(100, 100, 100, 0.49);
	border-radius: 5px; 
}
/* ---------------------- Blocks - left, right ---------------------- */
#block_left_top_app{
	padding: 0.5%;
	float: left;
	width: 39%;
}
#block_right_top_app{
	float: right;
	width: 60%;
	overflow: hidden;	
}
#block_left_installation{
	float: left;
	width: 65%;
	padding: 0 2% 0 2%;
	border-right: 1px dotted black;
}
#block_right_installation{
	position: relative;
	text-align: center;
	padding: 2% 2% 2% 2%;
	float: right;
	width: 26%;
}
#block_right_installation p{
	font-size: 13px;
	font-style: italic;
}
#block_left_bug{
	float: left;
	width: 30%;
	overflow: hidden;
}
#block_right_bug{
	float: right;
	width: 70%;
}
.cleaner{
	clear: both;
	width: 100%;
}
/* ------------------------------ Link ------------------------------ */
a{
    color:  #2b71e9;
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}
/* --------------------------- Image List --------------------------- */
.image_list {
  line-height: 1.5em;
  list-style-image: url('images/list.png');
}
/* -------------------------- Align center -------------------------- */
.align_center{
	text-align: center;
}
/* --------------------- Images characteristic ---------------------- */
.img_security_project{
	max-height: 100px;
	width: 100%;	
}
.img_screenshot{
	display: block; 
	margin: 0 auto;
}
.img_table{
	margin: 0 5px 0 0;
	float: left;
}
.img_system_icon{
	margin: 0 10px 0 0;
}
footer img{
	display: inline-block;
	height: 20px;
	vertical-align: middle;
}
/* ------------------------------ Font ------------------------------ */
h1{
	font-size: 35px;
	font-weight: 500;
}
h2{
	font-size: 22px;
	font-weight: bold;
}
h3{
	font-size: 20px;
	font-weight: normal;
}
/* ------------------------- NOTIFICATION --------------------------- */
#notification{
	position: absolute;
	display: none;	
	padding: 5px;
	width: 200px;
	background: #ECA918;	
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	box-shadow: 0px 1px 5px rgba(100, 100, 100, 0.49);
	border-radius: 5px; 
}
#block_right_installation:hover #notification{
	display: block;
}
/* + RELATIVE in block_right_instalation */

/* ----------------------- END OF NOTIFICATION ---------------------- */

/* ------------------------------- NEWS ----------------------------- */
#news{
	width: auto;
	margin: 5px 0 5px 0;
	text-align: center;
	font-size: 15px;
	/*background: #DF382C; /*Error*/
	/*background: #ECA918; /*Warning*/
	background: #38B44A; /*Success*/
	/*background: #19B6EE; /*Information*/
	/*display: none;	   /*Nothing*/
	box-shadow: 0px 1px 5px rgba(100, 100, 100, 0.49);
	border-radius: 5px; 		
	overflow: hidden;
}
.marquee{
	word-wrap: nowrap;                
	display: inline-block;
	position: relative;                
	-moz-animation-name: marquee;
	-webkit-animation-name: marquee;    
	-moz-animation-duration: 15s;
	-webkit-animation-duration: 15s;      
	-moz-animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;              
	-moz-animation-timing-function: linear;
	-webkit-animation-timing-function: linear;     
}
#news:hover .marquee{
	-webkit-animation-play-state: paused;
	-moz-animation-play-state: paused;
}          
@-webkit-keyframes marquee{
	0% {left: 100%;}
	100% {left: -100%;}
}              
@-moz-keyframes marquee{
	0% {left: 100%;}
	100% {left: -100%;}
}
/* + ADD for mobile and tablet */
/* --------------------------- END OF NEWS -------------------------- */