@charset "UTF-8";
/* CSS Document */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	font-family: Arial, Helvetica, sans-serif;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
html, body {
	height: 100%;
	background-image:url(images/bedge_grunge/bedge_grunge.png);
}
.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
	width:1020px;
}
.footer, .push {
	height: 40px; /* .push must be the same height as .footer */
	clear: both;
	background-color:rgb(36, 36, 37);
	border-top: solid;
	border-width: 1px;
	border-color: gray;
	text-align: center;
	padding-top:20px;
	font-size:12px;
}
.logo{
	float: left;
	margin-top: -10px;
	margin-left: 25px;
}
.logo_title{
	font-family: 'Chango', cursive;
	color: white;
	float: left;
	font-size: 30px;
	margin-left: 20px;
	margin-top: 20px;
}
#nav{
	font-size: 13px;
	height: 80px;
	background-color: #1a6884;
}
#nav ul{
	overflow: hidden;
	width: 480px;
	float: right;
	margin-top: 16px;
}
#nav li{
	display:block;
}
#nav ul li{
	list-style: none;
	float: left;
	padding: 10px 8px;
	font-size: 16px;
}
/*nav bar page highlights*/
a:link, a:visited {color:#FFF; font-family: 'Chango', cursive;}      /* unvisited link */
a:link {text-decoration:none;}      /* unvisited link */
a:visited{color:#FFF; font-family: 'Chango', cursive;}

a:hover {color:#a8c048;}  /* mouse over link */
a:hover {text-decoration:none;}  /* mouse over link */

a:active {color:#a8c048;}/* selected link */
a:active {text-decoration:none;}/* selected link */
a:active {background-color:#2d2b27;}/* selected link */
body#index #nav li.index_link a:link, body#index #nav li.index_link a:visited{
	text-decoration:none;
	color:#4D8842;}
body#lesson #nav li.lessons_link a:link, body#lesson #nav li.lessons_link a:visited{
	text-decoration:none;
	color:#4D8842;}
body#contact #nav li.contact_link a:link, body#contact #nav li.contact_link a:visited{
	text-decoration:none;
	color:#4D8842;}	
/*nav bar page highlights*/
	
#container{
	margin-top: 30px;
	margin-bottom: 30px;
	background-color: white;
	border: 2px solid #dddbd4;
	border-radius: 10px;
	overflow:auto;
	width: 985px;
	margin-left: 14px;
}
.index_p{
	line-height: 25px;
}
.information{
	float:left;
	width: 690px;
}
.lessons_titles_one{
	padding-bottom: 15px;
	margin-left: 7px;
	color: #84aa57;
	font-size: 24px;
	font-family: 'Chango', cursive;
}
.all_lessons a:link, a:visited {color:#FFF; font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
background-color: #2d2b27;
padding: 6px;
border-top-right-radius: 7px;
border-top-left-radius: 7px;
margin-left: 7px;
font-size: 15px;
}      /* unvisited link */
.all_lessons a:link {text-decoration:none;}      /* unvisited link */
.all_lessons a:hover {color:#4DC5F0;}  /* mouse over link */
.all_lessons a:hover {text-decoration:none;}  /* mouse over link */
.all_lessons a:active {color:#a8c048;}/* selected link */
.all_lessons a:active {text-decoration:none;}/* selected link */
.all_lessons a:active {background-color:#2d2b27;}/* selected link */
.all_lessons{
	color: white;
	padding: 15px;
	padding-left: 20px;
	border-top-left-radius: 7px;
	margin-left: 48px;
	border-top-right-radius: 7px;
	width: 828px;
	margin-top: 50px;
}
.all_lessons ul li{
	list-style: none;
	padding-bottom: 10px;
	float: left;
	margin-left: -1px;
}
.lesson_image{
	margin-left: 58px;
	border-radius: 5px;
	margin-top: -33px;
	border-top-left-radius: 0px;
}
.objective{
	float: left;
	background-color: #2d2b27;
	color: white;
	padding: 15px;
	padding-left: 20px;
	border-top-left-radius: 7px;
}
.objective p{
	padding-bottom: 10px;
	line-height: 22px;
}
.objective_titles_one{
	padding-bottom: 5px;
	color: #84aa57;
	font-size: 24px;
	font-family: 'Chango', cursive;
}
.objective_titles_two{
	padding-bottom: 5px;
	color: #84aa57;
	font-family: 'Chango', cursive;
}
.view_full_demo a:link{
	color:#84aa57;
	font-family: 'Chango', cursive;
}
.view_full_demo a:hover{
	color:#84aa57;
	font-family: 'Chango', cursive;
}
.view_full_demo a:visited{
	color:#84aa57;
	font-family: 'Chango', cursive;
}
.content_info{
	padding: 20px;
	padding-left: 16px;
	margin-top: 8px;
	float: left;
	width: 700px;
}
.content_info_titles{
	color:#1a6884;
	font-size:18px;
	font-family: 'Chango', cursive;
}
.content_info_titles_home{
	color:#1a6884;
	font-size:24px;
	font-family: 'Chango', cursive;
}
.info{
	width: 385px;
	line-height: 22px;
	float: left;
	padding-top: 5px;
}
.info_p2{
	width: 385px;
	line-height: 22px;
	float: left;
	padding-bottom: 15px;
	margin-left: 99px;
	padding-top: 15px;
}
.important_text_info{
	color:#4DC5F0;
}
.info_icon{
	float:left;
	padding-right: 15px;
	padding-bottom: 120px;
}
.line{
	width: 669px;
	margin-left: 3px;
	clear:both;
}
.screen_shot{
	float:left;
	margin-top: -20px;
}
.code_button{
	width: 99px;
	background-color: #2d2b27;
	color: #84953d;
	border-radius: 10px;
	float: right;
	margin-right: 27px;
}
.code_box{
	width: 445px;
	text-align: left;
	background: #333333;
	border: #5ED4FF solid thin;
	overflow: auto;
	border-radius: 5px;
	padding-left: 5px;
	margin-left: 98px;
}
.code_box{
	color: #BEC9BD;
	font-family: "Courier New", Courier, monospace;
}

/*CSS Media Inquiries*/
.ex_box1{
	height: 50px;
	width: 50px;
	background-color: #069;
	color: white;
	float: left;
	text-align: center;
	margin-right: 3px;
	clear: both;
	margin-left: 100px;
}
.ex_box2{
	height:50px;
	width:50px;
	background-color:#903;
	color:white;
	float: left;
	text-align: center;
	margin-right: 3px;

}
.ex_box3{
	height:50px;
	width:50px;
	background-color:#6C9;
	color:white;
	float: left;
	text-align: center;
	margin-right: 3px;

}
/*CSS Media Inquiries*/

/*css dropdown styling example*/
#example_nav{
	list-style: none;
	font-weight: bold;
	margin-bottom: 10px;
	position: relative;
	margin-top: 20px;
	float: left;
	padding-bottom: 100px;
}
#example_nav li{
    float:left;
    margin-right:10px;
    position:relative;
}
#example_nav a{
    display:block;
    padding:5px;
    color:#fff;
    background:#333;
    text-decoration:none;
	border-radius: 10px;
}
#example_nav a:hover{
    color:#fff;
    background:#6b0c36;
    text-decoration:underline;
}

#example_nav ul{
    background:#fff; 
    background:rgba(255,255,255,0);
    list-style:none;
    position:absolute;
    left:-9999px;
}
#example_nav ul li{
    padding-top:1px;
    float:none;
}
#example_nav ul a{
    white-space:nowrap;
}
#example_nav li:hover ul{
    left:0; 
}
#example_nav li:hover a{
    background:#1a6884;
    text-decoration:underline;
}
#example_nav li:hover ul a{ 
    text-decoration:none;
}
#example_nav li:hover ul li a:hover{ 
    background:#333;
}
/*css dropdown styling example*/


/*RIGHT side*/
.lesson_nav a:link {color:black; font-family: Arial, Helvetica, sans-serif;}
.lesson_nav a:visited{color:black;}
.lesson_nav a:hover {color:#1a6884;}
.lesson_nav{
	float:right;
	width: 250px;
	padding-right: 25px;
	padding-top: 20px;
}
.lesson_nav_title{
	color:#1a6884;
	font-size:18px;
	font-family: 'Chango', cursive;
}
.lesson_nav ul{
	list-style:none;
	margin-top: -7px;
}
.lesson_nav li{
	background-color: #bec1c2;
	margin-top: 15px;
	padding: 5px;
	border-radius: 1px;
}
.web_add{
	margin-left: -28px;
	width: 265px;
}
.quiz_container{
	border: dashed 2px gray;
	padding: 10px;
	margin-top: 15px;
	margin-bottom: 20px;
	line-height: 25px;
}
.quiz_container_questions {
	color:#1C9BC9;
}
.quiz_container_answeres{
	padding-bottom:20px;
}
.question{
	margin: 0 0 40px 0;
}
.answer {
	top: 20px;
	left: 200px;
}

.correct {
	color: green;
	font-size: 16px;	
}

.incorrect {
	color: red;
	font-size: 16px;	
}
/*RIGHT side*/


/*FOOTER*/
.footer{
	font-size: 13px;
	height: 50px;
	background-color: #1a6884;
	color:white;
	padding-bottom: 10px;
}
.footer ul{
    overflow: hidden;
	width: 405px;
	margin-left: 315px;
}
.footer li{
	display:block;
}
.footer ul li{
	list-style: none;
	float: left;
	padding: 10px 8px;
}
/*FOOTER*/


/*CONTACT FORM STYLE*/
.information_contact{
	width: 690px;
}
.objective_contact{
	float: left;
	background-color: #2d2b27;
	color: white;
	padding: 15px;
	padding-left: 20px;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
	margin-left: 277px;

}
.form input, textarea {
	padding: 10px;
	border: 1px solid #E5E5E5;
	width: 200px;
	color: #999999;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
	-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;		
}

.form textarea {
	width: 400px;
	height: 150px;
	max-width: 400px;
	line-height: 18px;
}

.form input:hover, textarea:hover,
.form input:focus, textarea:focus {
	border-color: 1px solid #C9C9C9;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
	-moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;	
}

.form label {
	margin-left: 10px;
	color: #999999;
}

/* ===========================
   ====== Submit Button ====== 
   =========================== */

.submit input {
	width: 100px; 
	height: 40px;
	background-color: #84aa57; 
	color: #FFF;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;		
}
/*CONTACT FORM STYLE*/


/*CSS3 Media Inquiries*/

@media only screen and (min-width: 768px) and (max-width: 991px) {
.ex_box1{
	height: 50px;
	width: 50px;
	background-color: #069;
	color: white;
	float: left;
	text-align: center;
	border-radius: 30px;
	margin-right: 3px;
}
.ex_box2{
	height:50px;
	width:50px;
	background-color:#903;
	color:white;
	float: left;
	text-align: center;
	border-radius: 30px;
	margin-right: 3px;

}
.ex_box3{
	height:50px;
	width:50px;
	background-color:#6C9;
	color:white;
	float: left;
	text-align: center;
	border-radius: 30px;

}
}

@media only screen and (min-width: 320px) and (max-width: 480px) {
.ex_box1{
	height: 50px;
	width: 30px;
	background-color: #069;
	color: white;
	float: left;
	text-align: center;
	border-radius: 30px;
	margin-right: 3px;
}
.ex_box2{
	height:50px;
	width:30px;
	background-color:#903;
	color:white;
	float: left;
	text-align: center;
	border-radius: 30px;
	margin-right: 3px;

}
.ex_box3{
	height:50px;
	width:30px;
	background-color:#6C9;
	color:white;
	float: left;
	text-align: center;
	border-radius: 30px;

}
}

/*CSS3 Media Inquiries*/

/* This is the CSS3 rule without prefix. The name of this animation is myfirst. 
The @keyframes rule is where the animation is created. Specify a CSS style inside the @keyframes rule and the animation will gradually change from the current style to the new style.
*/
@keyframes myfirst 
{
	/*keyword 'from' same as 0% */
from {background: red;}
	/*keyword 'to' same as 100% */
to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
} 
/*

When the animation is created in the @keyframe, bind it to a selector, otherwise the animation will have no effect.

Bind the animation to a selector by specifying at least these two CSS3 animation properties:

    Specify the name of the animation
    Specify the duration of the animation. This is required because the default value is 0, meaning it will never play.

*/
#animation_notes1
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
margin-left: 240px;
clear: both;
}

#animation_notes2
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;  /* Calls myfirst animation name with a 5 second duration */
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
margin-left: 240px;
clear: both;
}

@keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

#transform_notes1
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
margin-left: 240px;
clear: both;
}
#transform_notes1, .transform_notes1_p2
{
transform:translate(50px,100px);
-ms-transform:translate(50px,100px); /* IE 9 */
-moz-transform:translate(50px,100px); /* Firefox */
-webkit-transform:translate(50px,0px); /* Safari and Chrome */
-o-transform:translate(50px,100px); /* Opera */
}

#transform_notes2
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
margin-left: 240px;
clear: both;
}
#transform_notes2, .transform_notes2_p2
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
margin-left: 240px;
clear: both;
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
}


#transform_notes3
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
#transform_notes3, .transform_notes3_p2
{
margin:100px;
transform:scale(2,4); /* 2 times the height, 4 times the width */
-ms-transform:scale(2,4); /* IE 9 */
-moz-transform:scale(2,4); /* Firefox */
-webkit-transform:scale(2,4); /* Safari and Chrome */
-o-transform:scale(2,4); /* Opera */
}


.transform_notes4
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
.transform_notes4, .transform_notes4_p2
{
margin:100px;
margin-left: 270px;
margin-top: 125px;
transform:scale(2,4); /* 2 times the height, 4 times the width */
-ms-transform:scale(2,4); /* IE 9 */
-moz-transform:scale(2,4); /* Firefox */
-webkit-transform:scale(2,4); /* Safari and Chrome */
-o-transform:scale(2,4); /* Opera */
}


.transition_notes1
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
margin-left: 240px;
clear: both;
}

.transition_notes1:hover
{
width:300px;
}


/*
To add a transitional effect for more than one style, add more properties, separated by commas:
*/
.transition_notes2{
width:100px;
height:100px;
background:red;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
margin-left: 240px;
clear: both;
}

.transition_notes2:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}