@charset "UTF-8";

#content-overview{
	background-image: url('assets/sentences-landing.jpg');
}

#content-inner #content-learn-it{
	margin: 90px 0 0 0;
}

.clear{
	clear: both;
}

#nav-module-outer {
	background-color:#ff767a;
}

#nav-module-inner li {
    background-color: #FFC2C4;
}

#content-outer {
	border-color:#ff767a;
}

/*
 * Headings
 */
header h1, header h2 {
	color:#ff767a;
}

#content-inner > header h1{
	font-size:inherit;
	margin:0;
}

#content-inner header h1 .heading-two{
	font-size: 24px;
	margin: 0 0 -10px 15px;
	font-weight: normal;
	line-height: 100%;
}

#content-inner header h1 .heading-one{
	font-size: 70px;
	margin: 10px 0 0 12px;
	font-weight: normal;
	line-height: 75%;
}

/*
 * The Pattern
 */
#the-pattern {
	float:left;
	position:absolute;
	height:24px;
	line-height:24px;
	top:26px;
	margin:0 20px;
	padding:0 40px;
	background-color:#B75647;
	color:#fff;
	font-size:75%;
	text-transform:uppercase;
}

/*
 * Button area
 */
#button-area {
	position:absolute;
	width:696px;
	height: 160px;
	margin:0 20px;
	background-color:#c9ddf0;
	top:50px;
	padding:0 6px;
}

#button-area ul {
	overflow:hidden;
}

#button-area ul li {
	float:left;
	width:104px;
	height:50px;
	padding:10px 3px 30px 3px;
	margin:10px 3px;
	background-color:#FFC2C4;
	font-size:75%;
	cursor:pointer;
	overflow:hidden;
	/*border-radius: 8px 8px 0 0;
	-moz-border-radius: 8px 8px 0 0;
	-moz-box-shadow: #413435 0px 0px 3px;
	-webkit-border-radius: 8px 8px 0 0;
	-webkit-box-shadow: #6E7849 0 0 3px;*/
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmYzJjNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjc2N2EiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top, #ffc2c4 0%, #ff767a 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc2c4), color-stop(100%,#ff767a)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffc2c4 0%,#ff767a 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffc2c4 0%,#ff767a 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #ffc2c4 0%,#ff767a 100%); /* IE10+ */
	background: linear-gradient(to bottom, #ffc2c4 0%,#ff767a 100%); /* W3C */
	/*border: 1px solid #969696;*/
	/*box-shadow: #413435 0px 0px 3px;*/
	color: #000;
	/*text-shadow: #000000 2px 2px 5px;*/
}

#button-area ul li .number {
	width:26px;
	font-size:250%;
	display:block;
	float:left;
	margin:-6px 0 0 2px;
}

#button-area ul li .number span {
	font-size:75%;
	display:inline-block;
	margin:0 0 0 -4px;
}

#button-area ul li .description {
	width:70px;
	font-size:87.5%;
	margin:8px 0 0 2px;
	font-weight:bold;
	text-transform:uppercase;
	display:block;
	float:left;
}

#button-area ul li:nth-child(4) .number,
#button-area ul li:nth-child(5) .number,
#button-area ul li:nth-child(6) .number {
	margin:-6px 0 0 6px;
}

#button-area ul li:nth-child(4) .description,
#button-area ul li:nth-child(5) .description,
#button-area ul li:nth-child(6) .description {
	margin:8px 0 0 -4px;
}

/*
 * Button connectors
 */
#button-connectors {
	position:absolute;
	width:706px;
	margin:0 20px;
	padding:0 6px;
	top:150px;
}

#button-connectors div {
	width:110px;
	height:20px;
	margin:0 3px;
	background-color:#FFC2C4;
	float:left;
	opacity:0;
}

#button-connectors div:nth-child(1) {
	opacity:1;
}

/*
 * Description area
 */
#description-area {
	position:absolute;
	width:688px;
	height:42px;
	margin:0 20px;
	padding: 15px 10px 15px 10px;
	background-color:#FFC2C4;
	overflow:hidden;
	top:160px;
	color:#000;
}

#description-area p {
	position:absolute;
	padding: 0 5px 0 0;
}

/*
 * Example area
 */
#example-area {
	position:absolute;
	margin:0 40px;
	width:666px;
	top:220px;
	font-size:112.5%;
}

#example-area span {
	padding: 2px 4.5px 0 4.5px;
	display:none;
}

#example-area #initial-example span {
	display:block;
}

#you, #dance, #period, #i, #dream, #period2, #she, #listens, #s, #period3, #music, #plays, #period4, #crazily, #sweetly, #he, #and1, #carefully, #others, #in, #the-mall, #your-own-dance, #sweet-dreams, #hear, #nothing, #fills, #comma1, #and, #comma2, #for, #we, #who, #ipods, #our-own-music, #the-unrequested, #that, #but, #comma{
	position: absolute;
}

#comma1, #period, #period2, #period3, #period4{
	z-index: 100;
}

#you{
    top: 70px;
    left: 250px;
}

#dance{
    top: 70px;
    left:287px;
}

#period{
    top: 70px;
    left:335px;
}

#i{
    top: 100px;
    left:275px;
}

#dream{
    top: 100px;
    left:287px;
}

#period2{
    top: 100px;
    left:337px;
}

#she{
    top: 130px;
    left:248px;
}

#example-area #listens{
    top: 130px;
    left:287px;
	padding: 2px 1px 0 3px;
}

#s{
	top: 130px;
	left:328px;
}

#period3{
    top: 130px;
    left:336px;
}

#music{
    top: 160px;
    left:233px;
}

#plays{
    top: 160px;
    left:287px;
}

#period4{
    top: 160px;
    left:328px;
}

#crazily{
	top: 70px;
	left: 340px;
	opacity: 0;	
	font-size: 26px;
	color: #BD30E8;
}

#sweetly{
	top: 100px;
	left: 342px;
	opacity: 0;
	font-size: 26px;
	color: #BD30E8;
}

#carefully{
	top: 130px;
	left: 332px;
	opacity: 0;
	font-size: 26px;
	color: #BD30E8;
}

#he{
	top: 130px;
	left: 186px;
	opacity: 0;
	font-size: 26px;
	color: #BD30E8;
}

#and1{
	top: 130px;
	left: 214px;
	opacity: 0;
	font-size: 26px;
	color: #BD30E8;
}

#others{
	top: 160px;
	left: 172px;
	opacity: 0;
	font-size: 26px;
	color: #BD30E8;
}

#in{
	top: 160px;
	left: 334px;
	opacity: 0;
	font-size: 26px;
	color: #BD30E8;
}

#the-mall{
	top: 160px;
	left: 352px;
	opacity: 0;
	font-size: 26px;
	color: #BD30E8;
}

#your-own-dance{
	top: 70px;
	left: 343px;
	opacity: 0;
	font-size: 26px;
	color: #BD30E8;
}

#sweet-dreams{
	top: 100px;
	left: 343px;
	opacity: 0;
	font-size: 26px;
	color: #BD30E8;
}

#hear{
	top: 130px;
	left: 287px;
	opacity: 0;
	font-size: 26px;
	color: #BD30E8;
}

#nothing{
	top: 130px;
	left: 329px;
	opacity: 0;
	font-size: 26px;
	color: #BD30E8;
}

#fills{
	top: 160px;
	left: 287px;
	opacity: 0;
	font-size: 26px;
	color: #BD30E8;
}

#comma1{
	top: 70px;
	left: 350px;
	opacity: 0;
	font-size: 26px;
	color: #BD30E8;
}

#and{
	top: 70px;
	left: 357px;
	opacity: 0;
	font-size: 26px;
	color: #BD30E8;
}

#for{
	top: 100px;
	left: 340px;
	opacity: 0;
	font-size: 26px;
	color: #BD30E8;
}

#comma2{
	top: 100px;
	left: 331px;
	opacity: 0;
	font-size: 26px;
	color: #BD30E8;
}

#we{
	top: 70px;
	left: 40px;
	opacity: 0;
	font-size: 26px;
	color: #BD30E8;
}

#who{
	top: 70px;
	left: 72px;
	opacity: 0;
	font-size: 26px;
	color: #BD30E8;
}

#ipods{
	top: 70px;
	left: 109px;
	opacity: 0;
	font-size: 26px;
	color: #BD30E8;
}

#our-own-music{
	top: 70px;
	left: 468px;
	opacity: 0;
	font-size: 26px;
	color: #BD30E8;
}

#the-unrequested{
	top: 100px;
	left: 177px;
	opacity: 0;
	font-size: 26px;
	color: #BD30E8;
}

#that{
	top: 100px;
	left: 363px;
	opacity: 0;
	font-size: 26px;
	color: #BD30E8;
}

#but{
	top: 70px;
	left: 314px;
	opacity: 0;
	font-size: 80px;
	color: #BD30E8;
}

#example-area #comma{
	top: 70px;
	left: 308px;
	opacity: 0;
	font-size: 80px;
	padding: 2px 3px 0 0;
	color: #BD30E8;
}

/*
 * Checkbox area
 */
#checkbox-area {
	position:absolute;
	margin:35px 40px;
	width:666px;
	top:400px;
	left: 190px;
}

#checkbox-area ul li {
	float:left;
	cursor:pointer;
	line-height:20px;
	margin:6px 20px 0 0;
}

#checkbox-area ul li > span {
	display:inline-block;
	height:15px;
	width:15px;
	border-radius:3px;
	margin:0 4px -3px 0;
	overflow:hidden;
	line-height:18px;
	color:rgba(255, 255, 255, 0);
	font-weight:bold;
	font-size:150%;
}

#checkbox-area ul li span.x span {
	background-image:url(assets/x.png);
	display:block;
	width:15px;
	height:15px;
}

.checkboxes{
	overflow: hidden;
}

#objects, #independent-clauses, #relative-pronouns, #conjunctions, #dependent-clauses, #coordinating-conjunctions, #necessary-commas{
	display: none;
}

.green{
	background-color: #b5cbb7;	
}

.green.button-square {
	border-color:#739B79;
	background: #f4fff7; /* Old browsers */
	background: -moz-linear-gradient(top,  #f4fff7 0%, #b5cbb7 80%, #739b79 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4fff7), color-stop(80%,#b5cbb7), color-stop(100%,#739b79)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #f4fff7 0%,#b5cbb7 80%,#739b79 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #f4fff7 0%,#b5cbb7 80%,#739b79 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #f4fff7 0%,#b5cbb7 80%,#739b79 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #f4fff7 0%,#b5cbb7 80%,#739b79 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4fff7', endColorstr='#739b79',GradientType=0 ); /* IE6-9 */
}

.light-blue{
	background-color: #c9dee8;	
}

.light-blue.button-square {
	border-color:#7CA7BF;
	background: #edf6ff; /* Old browsers */
	background: -moz-linear-gradient(top,  #edf6ff 0%, #c9dee8 80%, #7ca7bf 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#edf6ff), color-stop(80%,#c9dee8), color-stop(100%,#7ca7bf)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #edf6ff 0%,#c9dee8 80%,#7ca7bf 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #edf6ff 0%,#c9dee8 80%,#7ca7bf 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #edf6ff 0%,#c9dee8 80%,#7ca7bf 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #edf6ff 0%,#c9dee8 80%,#7ca7bf 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edf6ff', endColorstr='#7ca7bf',GradientType=0 ); /* IE6-9 */
}

.purple{
	background-color: #b19aca;
}

.purple.button-square {
	border-color:#8A1EAA;
	background: #e199f7; /* Old browsers */
	background: -moz-linear-gradient(top,  #e199f7 0%, #bd30e8 80%, #8a1eaa 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e199f7), color-stop(80%,#bd30e8), color-stop(100%,#8a1eaa)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #e199f7 0%,#bd30e8 80%,#8a1eaa 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #e199f7 0%,#bd30e8 80%,#8a1eaa 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #e199f7 0%,#bd30e8 80%,#8a1eaa 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #e199f7 0%,#bd30e8 80%,#8a1eaa 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e199f7', endColorstr='#8a1eaa',GradientType=0 ); /* IE6-9 */
}

.dark-purple{
	background-color: #cab1c5;
}

.dark-purple.button-square {
	border-color:#592552;
	background: #ad699d; /* Old browsers */
	background: -moz-linear-gradient(top,  #ad699d 0%, #77386c 80%, #592552 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ad699d), color-stop(80%,#77386c), color-stop(100%,#592552)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ad699d 0%,#77386c 80%,#592552 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ad699d 0%,#77386c 80%,#592552 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ad699d 0%,#77386c 80%,#592552 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ad699d 0%,#77386c 80%,#592552 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ad699d', endColorstr='#592552',GradientType=0 ); /* IE6-9 */
}

.underline-dark-purple{
	border-bottom: 2px solid #cab1c5;
}

.cyan{
	background-color: #00aeef;
}

.cyan.button-square {
	border-color:#005F9B;
	background: #dae8ed; /* Old browsers */
	background: -moz-linear-gradient(top,  #dae8ed 0%, #00aeef 82%, #005f9b 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dae8ed), color-stop(82%,#00aeef), color-stop(100%,#005f9b)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #dae8ed 0%,#00aeef 82%,#005f9b 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #dae8ed 0%,#00aeef 82%,#005f9b 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #dae8ed 0%,#00aeef 82%,#005f9b 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #dae8ed 0%,#00aeef 82%,#005f9b 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dae8ed', endColorstr='#005f9b',GradientType=0 ); /* IE6-9 */
}

.orange{
	background-color: orange;
}

.orange.button-square {
	border-color:#F49F00;
	background: #fffb9e; /* Old browsers */
	background: -moz-linear-gradient(top,  #fffb9e 0%, #ffd51c 80%, #f49f00 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fffb9e), color-stop(80%,#ffd51c), color-stop(100%,#f49f00)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #fffb9e 0%,#ffd51c 80%,#f49f00 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #fffb9e 0%,#ffd51c 80%,#f49f00 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #fffb9e 0%,#ffd51c 80%,#f49f00 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #fffb9e 0%,#ffd51c 80%,#f49f00 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffb9e', endColorstr='#f49f00',GradientType=0 ); /* IE6-9 */
}

.pink{
	background-color: pink;
}

.blue{
	background-color: #b0ccd9;	
}

.blue.button-square {
	border-color:#5D88A3;
	background: #dee5ea; /* Old browsers */
	background: -moz-linear-gradient(top,  #dee5ea 0%, #b0ccd9 82%, #5d88a3 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dee5ea), color-stop(82%,#b0ccd9), color-stop(100%,#5d88a3)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #dee5ea 0%,#b0ccd9 82%,#5d88a3 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #dee5ea 0%,#b0ccd9 82%,#5d88a3 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #dee5ea 0%,#b0ccd9 82%,#5d88a3 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #dee5ea 0%,#b0ccd9 82%,#5d88a3 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dee5ea', endColorstr='#5d88a3',GradientType=0 ); /* IE6-9 */
}

#example-area .beige{
	background-color: #e5dbb8;	
	z-index: 20;
}

.objects-dark-pink{
	background-color: #FF767A;	
}

.objects-dark-pink.button-square {
	border-color:#AD3434;
	background: #fff2f2; /* Old browsers */
	background: -moz-linear-gradient(top,  #fff2f2 0%, #ff767a 82%, #ad3434 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff2f2), color-stop(82%,#ff767a), color-stop(100%,#ad3434)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #fff2f2 0%,#ff767a 82%,#ad3434 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #fff2f2 0%,#ff767a 82%,#ad3434 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #fff2f2 0%,#ff767a 82%,#ad3434 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #fff2f2 0%,#ff767a 82%,#ad3434 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff2f2', endColorstr='#ad3434',GradientType=0 ); /* IE6-9 */
}

.dark-pink{
	color: #FF767A !important;
}

.beige {
	background-color: #e5dbb8;	
}

.beige.button-square {
	border-color:#A09659;
	background: #f4f0e1; /* Old browsers */
	background: -moz-linear-gradient(top,  #f4f0e1 0%, #dbcfa6 82%, #a09659 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f0e1), color-stop(82%,#dbcfa6), color-stop(100%,#a09659)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #f4f0e1 0%,#dbcfa6 82%,#a09659 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #f4f0e1 0%,#dbcfa6 82%,#a09659 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #f4f0e1 0%,#dbcfa6 82%,#a09659 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #f4f0e1 0%,#dbcfa6 82%,#a09659 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f0e1', endColorstr='#a09659',GradientType=0 ); /* IE6-9 */
}

.brown {
	background-color: #e4b587;
}

.brown.button-square {
	border-color:#A07E55;
	background: #f7e6d7; /* Old browsers */
	background: -moz-linear-gradient(top,  #f7e6d7 0%, #af9469 82%, #a07e55 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7e6d7), color-stop(82%,#af9469), color-stop(100%,#a07e55)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #f7e6d7 0%,#af9469 82%,#a07e55 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #f7e6d7 0%,#af9469 82%,#a07e55 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #f7e6d7 0%,#af9469 82%,#a07e55 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #f7e6d7 0%,#af9469 82%,#a07e55 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7e6d7', endColorstr='#a07e55',GradientType=0 ); /* IE6-9 */
}

.underline-brown{
	border-bottom: 2px solid #e4b587;
	z-index: 20;
}

.underline-cyan{
	border-bottom: 2px solid #00aeef;
}

#verbs {
	padding:0 0 0 16px;
}