<div class = "title"><h1>The 10 Essentials</h1></div>
<form>
	<div class = "pad-header"></div>
		<fieldset class = "pad">
			<ol>
				<li>
					<input type="checkbox" id = "checkbox1"/>
          <label for="checkbox1"><span>Map</span></label>
				</li>
				<li>
					<input type = "checkbox" id = "checkbox2"/>
					<label for = "checkbox2">Compass</label>
				</li>
				<li>
					<input type = "checkbox" id = "checkbox3"/>
					<label for = "checkbox3">Sunglasses and Sunscreen</label>
				</li>
				<li>
					<input type = "checkbox" id = "checkbox4"/>
					<label for = "checkbox4">Extra Clothing</label>
				</li>
				<li>
					<input type = "checkbox" id = "checkbox5" />
					<label for = "checkbox5">Flashlight</label>
				</li>
				<li>
					<input type = "checkbox" id = "checkbox6" />
					<label for = "checkbox6">First-aid Kit</label>
				</li>
				<li>
					<input type="checkbox" id = "checkbox7"/>
					<label for = "checkbox7">Firestarter</label>
				</li>
				<li>
					<input type="checkbox" id = "checkbox8"/>
					<label for = "checkbox8">Matches</label>
				</li>
				<li>
					<input type="checkbox" id = "checkbox9"/>
					<label for = "checkbox9">Knife</label>
				</li>
				<li>
					<input type="checkbox" id = "checkbox10"/>
					<label for = "checkbox10">Extra Food</label>
				</li>
			</ol>
		</fieldset>
</form>

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
/*resets*/h1,h2,ol,input,label,fieldset{margin:0;padding: 0;}fieldset{border: none;}

body { background: url('http://jamesbarnett.me/img/classy_fabric.png'); }
	
/***** Containers *****/

.title { 
  width: 625px;
  margin: auto;
  padding-top: 15px;
}

form { 
  width: 520px; 
  margin: auto;
}

.pad-header, .pad { width: 500px; }
.pad-header {
  height: 70px;
  margin-top: 10px;
  background-color: #623B18;
  box-shadow: 10px -3px 20px #0A0A0A;
}

.pad { 
  margin-bottom: 50px; 
  box-shadow: 10px 2px 20px #0A0A0A;
}

/***** Lined Paper *****/

/* lines for list items */

ol { 
  padding: 30px 50px;
  min-height: 500px;
	background: linear-gradient(#6496b9, #E1E9A0 2px);
	background-size: 90px 30px;
}

/* checkboxes */

/* to hide the checkbox itself */
input[type=checkbox] { 
  display:none; 
  position: relative;
} 

input[type=checkbox] + label:before, input[type=checkbox]:checked + label:before {
  font-family: FontAwesome;
  display: inline-block;
  vertical-align: middle;
}

/* unchecked icon */
input[type=checkbox] + label:before { content: "\f096"; } 

/* checked icon */
input[type=checkbox]:checked + label:before { content: "\f046"; } 

/* space between checkbox and label */
input[type=checkbox] + label:before { letter-spacing: 10px; } 

/* allow space for check mark */
input[type=checkbox]:checked + label:before { letter-spacing: 8px; } 
	
/***** Typography *****/

body { 
	font-family: Verdana; 
	color: #333;
	}

h1 { 
	font-size: 75px;
	color:  #6496b9;
  font-family: "Trebuchet MS";
	}
	
li { 
  line-height: 30px; 
  position: relative;
}

label { 
  font-size: 22px; 
  line-height: 20px;
}

/* 10 Essentials list from http://www.rei.com/learn/expert-advice/ten-essentials.html */