
.floatleft { float: left; }
.floatright { float: right; }
.clear { clear: both; }

/* THESE RULES APPLY TO THE HIGH REZ DISPLAY, AND CASCADE DOWN TO THE MEDIUM AND LOW REZ DISPLAYS */

body { margin: 0; font-family: Verdana, sans-serif; color: rgb(100,100,100); }

header { width: 100%; height: 60px; background: rgb(0,0,0); padding: 5px 0; }
	#logo img { width: 200px; padding-top: 10px; float: left; margin-left: 10px; }
	nav { margin-top: 3px; float: right; }
	nav li { display: inline; margin-right: 30px; font-weight: bold; font-size: 100%; }
	nav li a { color: rgb(255,255,255); text-decoration: none; }
	input.search { border-radius: 5px; height: 20px; margin-top: 15px; border: 1px solid rgb(150,150,150); width: 140px; background: rgb(255,255,255) url(search.png) no-repeat 4px 4px; padding: 4px 4px 4px 30px; margin-right: 10px; }

section.hero { width: 100%; max-height: 400px; padding: 5px 0; background: url(herobg.jpg); background-size: 100% 100%; margin-bottom: 70px; }
	.heroimage { margin: 70px 0 0 20px; float: left; }
	.herocontent { width: 390px; margin-left: 20px; padding-top: 40px; color: rgb(255,255,255); margin-right: 10px; text-shadow: 2px 2px 5px rgba(0,0,0,0.75); }
	section.hero h1 { font-size: 325%; margin-bottom: -10px; font-family: 'Oleo Script Swash Caps', cursive; line-height: 1em;font-weight: normal; }
	section.hero p { margin-bottom: 60px; }
	.button { width: 225px; height: 45px; background: url(buttonbg.jpg); text-align: center; font-size: 150%; padding: 20px 5px 5px; margin: 5px 5px 0 0; border: 1px solid rgb(205,101,14); border-radius: 5px; box-shadow: 0px 3px 12px 0px rgba(0,0,0,0.5),0px 2px 0px 0px rgba(185,91,12,1),inset 0px 1px 0px 0px rgba(255,255,255,0.5); cursor: pointer; }
	.button a { color: rgb(255,255,255); text-decoration: none; text-shadow: 2px 2px 0px rgba(0,0,0,0.25); }
	.button:hover { background: url(buttonbg_o.jpg); }

section.features { width: 940px; height: 370px; margin: 0 auto; padding: 5px 0; }
	section.features h2 { font-size: 300%; text-align: center; margin-bottom: -35px; font-family: 'Oleo Script Swash Caps', cursive; font-weight: normal; color: rgb(113,80,109); }
	section.features h4 { font-size: 125%; font-weight: normal; text-align: center; margin-bottom: 40px; color: rgb(200,200,200); }
	section.features aside { width: 286px; height: 200px; float: left; text-align: center; margin-left: 20px; }
	section.features aside img { width: 100%; height: 150px; margin-bottom: -30px; }
	section.features aside h3 { font-size: 200%; font-weight: normal; font-family: 'Oleo Script Swash Caps', cursive; color: rgb(113,80,109); }

section.organize { width: 100%; height: 260px; background: rgb(240,240,240); padding: 5px 0; margin-bottom: 5px; border-top: 1px solid rgb(200,200,200); border-bottom: 1px solid rgb(200,200,200); }
	section.organize img, section.share img { width: 440px; height: 225px; float: left; margin-left: 20px; margin-top: 20px; }
	.organizecontent, .sharecontent { float: left; margin-left: 20px; width: 440px; }
	.organizecontent h2, .sharecontent h2 { font-family: 'Oleo Script Swash Caps', cursive; color: rgb(113,80,109); font-size: 225%; margin-bottom: -20px; }

section.share { width: 940px; height: 260px; margin: 0 auto 5px; padding: 5px 0; }

section.get { width: 100%; height: 100px; background: rgb(113,80,109); padding: 5px 0; }
	section.get h2 { font-family: 'Oleo Script Swash Caps', cursive; font-size: 250%; color: rgb(255,255,255); margin-left: 60px; margin-top: 25px; font-weight: normal; float: left; }
	section.get .button { width: 150px; height: 38px; margin-right: 60px; margin-top: 25px; padding-top: 7px; }

footer { width: 100%; height: 60px; padding: 5px 0; text-align: center; }
	footer nav li a { font-size: 80%; color: rgb(0,0,0); text-decoration: underline; font-weight: normal; }

.container { width: 940px; height: 100%; margin: 0 auto; }



/* THESE RULES APPLY TO THE MEDIUM REZ DISPLAY, AND CASCADE DOWN TO THE LOW REZ DISPLAY */

@media (max-width: 768px) { 

body {  }

header {  }
	#logo {  }
	#logo img { width: 25%; }
	nav {  }
	nav li { margin-right: 15px; font-size: 90%; }
	nav li a {  }
	input.search { width: 10%; }

section.hero { background-size: 770px 410px; margin-bottom: 0; max-height: 100%; padding-bottom: 10px; }
	.heroimage { margin: 50px 0 0 20px; width: 50%; }
	.herocontent { width: 40%; margin-left: 10px; padding-top: 10px; }
	section.hero h1 { font-size: 290%; }
	section.hero p { margin-bottom: 20px; }
	.button { width: 200px; height: 35px; padding-top: 10px; font-size: 150%; }
	.button a {  }
	.button:hover {  }

section.features { width: 100%; }
	section.features h2 { margin-top: 20px; }
	section.features h4 {  }
	section.features aside { width: 33%; height: auto; margin-left: 0; }
	section.features aside img { width: 100%; height: auto; }
	section.features aside h3 {  }

section.organize { padding: 0 0 80px 0; }
	section.organize img, section.share img { width: 50%; height: auto; margin-left: 10px; margin-top: 60px; }
	.organizecontent, .sharecontent { width: 40%; }
	.organizecontent h2, .sharecontent h2 { line-height: 90%; margin-bottom: 5px; margin-left: 10px; }
	.organizecontent p, .sharecontent p { font-size: 90%; }

section.share { width: 100%; padding: 0 0 80px 0; }

section.get {  }
	section.get h2 { font-size: 180%; margin-left: 20px; }	
	section.get .button { margin-right: 20px; }

footer {  }
	footer nav {  }
	footer nav li a {  }
	
.container { width: 100%; }

 }


/* THESE RULES APPLY TO THE LOW REZ DISPLAY, AND DO NOT CASCADE */

@media (max-width: 320px) { 

body { }

header { height: auto; }
	#logo { margin: 0 auto; width: 200px; }
	#logo img { margin: 0 0 10px 0; width: 200px; }
	nav { float: none; margin-left: -15px; }
	nav li {  }
	nav li a {  }
	input.search { display: none; }

section.hero { background-size: 1000px 800px; padding-bottom: 20px; }
	.heroimage { float: none; width: 100%; margin: 20px 0 -50px 0; }
	.herocontent { width: 90%; margin: 0 auto; padding: 0; float: none; text-align: center; }
	section.hero h1 {  }
	section.hero p {  }
	.button { margin: 0 auto; }
	.button a {  }
	.button:hover {  }

section.features { width: 90%; height: auto; }
	section.features h2 { line-height: 100%; margin-bottom: -15px; }
	section.features h4 {  }
	section.features aside { float: none; width: 100%; }
	section.features aside img {  }
	section.features aside h3 {  }

section.organize { width: 100%; height: auto; }
	section.organize img, section.share img { width: 100%; float: none; }
	.organizecontent, .sharecontent { float: none; width: 90%; margin: 0 auto; padding: 0 10px; text-align: center; }
	.organizecontent h2, .sharecontent h2 {  }

section.share { width: 90%; height: auto; }

section.get { height: auto; text-align: center; padding: 20px 0; }
	section.get h2 { float: none; line-height: 100%; margin: 0 0 10px 0; }	
	section.get .button { float: none; margin: 0 auto; }

footer {  }
	footer nav {  }
	footer nav li a {  }
	
.container { width: 90%; }

 }