body{

	font: normal 25px Arial, Helvetica, 
		san-serif;
	line-height:1.6em;
	margin:0;

	background-image: url('../images/bgimage.jpg');
	background-position: center right;
	min-height: 300px;
}



a{
	text-decoration: none;
	color:darkslateblue;
}

a:active{
	color:green;
}

.button{
	background-color: #333;
	color: #fff;
	padding: 10px 15px;
	border: none;
	text-decoration: none;
}

.button:hover{
	background-color: red;
}

#main-header{
	font-family:Tahoma;
	text-decoration:underline;
	text-transform:uppercase;
	letter-spacing:0.2em;
	word-spacing:0.5em;
	line-height: 40px;
	-webkit-text-stroke: 2px black;

	background-image: url('../images/banner.jpg');
	background-color: mediumpurple;
	color: whitesmoke;
	padding: 6px;
	font-size: 20px;
	border-bottom-width: 10px;
	padding-right: 80%;
	border-bottom-style:dotted;
}

.container{
	width:80%;
	margin:auto;				
}

.button{
	background-color:#333;
	color: #fff;
	padding:10px 15px;
	border: none;
}

.button:hover{
	background-color:red;
	color:#fff;
}

.clr{
	clear:both;
}

#nav-bar ul{
	padding: 0;
	list-style: none;
}

#nav-bar li{
	display: inline;
}

#nav-bar a{
	color: #fff;
	text-decoration: none;
	font-size: 18px;
	padding-right: 15px;
}

.box-1{
	background-color:#333;
	color:#fff;
	
	border: 5px red solid;
	border-width:3px;

	border-bottom-width:10px;
	border-top-style:dotted;
	
	border: 5px blue solid;
	
	padding:20px;
	padding-top: 20px;
	
	margin-top:20px;
	margin:20px 0;		
}
		
.box-1 h1{
	font-family:Tahoma;
	font-weight:800;	
	text-decoration:underline;
	text-transform:uppercase;
	letter-spacing:0.2em;
	word-spacing:0.5em;
}		

.box-2{

	box-sizing: border-box;
	border:3px dotted #ccc;
	padding:20px;
	margin:20px ;
}

.box-2 img{
    marign: 10px;
    width: 80%;
}

.lesson img{
    marign: 10px;
    width: 50%;
}


.box-3{
	background-color:#333;
	color:#fff;
	
	border: 5px red solid;
	border-width:3px;

	border-bottom-width:10px;
	border-top-style:dotted;
	
	border: 5px mediumpurple; solid;
	
	padding:20px;
	
	margin:20px 0;		
}

}

.my-form{
	padding:20px;
}

.my-form .form-group{
	padding-bottom:15px;
}

.my-form label{
	display:block;
}

.my-form input[type="text"], .my-form textarea{
	padding:8px;
	width:100%;
}

.block{
	float: left;
	width: 33.3%;
	border: 1px solid #ccc;
	padding: 10px;
	box-sizing: border-box;
}


#main-block{
	float: right;
	width: 70%;
}

#sidebar{
	float: left;
	width: 25%;
	background-color: white;
	color: #fff;
	padding: 15px;
	box-sizing: border-box; /*this is necisary to keep padding in the width 30*/
}

.my-list li:nth-child(even){
	background: lightgrey;
}

#main-footer{
	background: #301934;
	color: #fff;
	text-align: leftt;
	padding: 20px;
	margin-top: 40px;
}

#about{
	padding-left: 90px;
}