@charset "utf-8";
/* CSS Document */
*{
	margin:0px;
	padding:0px;
	box-sizing:border-box;
	font-family:leagueGothic;
	}
	
	body{
		font-family:leagueGothic;
		background-color:#f2f2f2;
		
		}
div#header{
	width:100%;
	height:50px;
	background-color:#2c3e50;
	margin:0 auto;
	
	}
a{
	text-decoration:none;
	
	}
.logo a{
	font-size:1.6em;
	
	}
.logo{
	float:left;
	margin-top:10px;
	margin-left:15px;
	
	
	
	}
	.logo a{
		color:#C03;
		
		}
.logo a span{
	font-weight:300;
	color:#fff;
	
	}
div#container{
	width:100%;
	margin:0 auto;
	background-color:#f2f2f2;
	
	}
.side-bar{
	width:250px;
	height:100%;
	background-color:#171717;
	float:left;
	}
.content{
	width:auto;
	
	background-color:#f2f2f2;
	margin-left:250px;
	padding:15px;
	
	
	}
.content p{
	color:#424242;
	font-size:0.73em;
	
	}

ul#nav li{
	list-style:none;
	}
ul#nav li a{
	color:#ccc;
	display:block;
	padding:10px;
	font-size:0.8em;
	border-bottom:1px solid #0A0A0A;
	-webkit-transition:2s;
	-moz-transition:2s;
	-o-transition:2s;
	transition:2s;

	
	}
ul#nav li a:hover{
	background-color:#030303;
	color:#fff;
	
	
	
	}
ul#nav li a .selected{
	color:#fff;
	}
div#box{
	margin:15px;
	
	}
div#box .box-top{
	color:#fff;
	text-shadow:0px 1px #ddd;
	background-color:#2980b9;
	padding:5px;
	font-weight:300;
	padding-left:15px;
	
	
	}
	div#box .box-pannel{
		padding:15px;
		color:#333;
		
		}

			
	div#box .box-pannel	input[type=text], select, textarea {
    width: 100%; /* Full width */
    padding: 12px; /* Some padding */  
    border: 1px solid #ccc; /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */;
}
/* Style inputs with type="text", select elements and textareas */
div#box .box-pannel input[type=number] {
    width: 100%; /* Full width */
    padding: 12px; /* Some padding */  
    border: 1px solid #ccc; /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */;
}
/* Style the submit button with a specific background color etc */
ul,div#box .box-pannel input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
ul,div#box .box-pannel input[type=submit] ,div#box .box-pannel .col-md-5 input[type=submit]{
    background-color: rgb(90, 98, 90)68, 162);
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
div#box .box-pannel input[type=submit]:hover {
    background-color: #45a049;
}
	/*You can begin your mobile here*/
a.mobile{
		display:block;
		color:#fff;
		background-color:#000;
		text-align:center;
		padding:7px;
		}
a.mobile:active{
	background-color:#4a4a4a;
	}





	@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
	/* Styles */
	}
	/**********
	iPad 3
	**********/
	a.mobile{
		display:none;
	
	}
.side-bar{
	height:80%;
	display:block;
	
	}
	
	@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
	/* Styles */
	a.mobile{
		display:none;
	
	}
.side-bar{
	height:100%;
	display:block;
	
	}
	
	}
	
	@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
	/* Styles */
	a.mobile{
		display:none;
	
	}
.side-bar{
	height:100%;
	display:block;
	
	}
	
	}
	/* Desktops and laptops ----------- */
	@media only screen  and (min-width : 1224px) {
	/* Styles */
	a.mobile{
		display:none;
	
	}
.side-bar{
	height:100%;
	display:block;
	
	}
	}
	
	/* Large screens ----------- */
	@media only screen  and (min-width : 1824px) {
		a.mobile{
			display:none;
		
		}
	.side-bar{
		height:100%;
		display:block;
		
		}
		
	
	}
	
	/* iPhone 4 ----------- */
	@media only screen and (min-device-width : 400px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
	/* Styles */
	.side-bar{

		display:none;
		
		}
		a.mobile{
			display:none;
		
		}
		.content{
			margin-left:0px;
		
			}
	table {
		width:90%;
		font-size:.8em;
		
		}
	}
	
	@media only screen and (min-device-width : 400px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
	/* Styles */
	/*.side-bar{
		width:100%;
		display:none;
		
		}*/
		.content{
			margin-left:0px;
		
			}
	table {
		width:250px;
		font-size:.8em;
		
		}
	}
@media only screen and (max-width:420px){
	.side-bar{
	
		display:none;
		
		}
		.content{
			margin-left:0px;
		
			}
	table {
		width:150px;
		font-size:.8em;
		
		}
			}
@media only screen and (min-width:380px){
		a.mobile{
			display:none;
		width:100%;
		}
	.side-bar{
		height:100%;
		display:block;
		
		}
		
	
	
	}