* {
	margin:0;
	padding:0;
	font-size:100%;
}
html { overflow-y:scroll }
body {
	background:#fff;
	font-size:13px;
	color:#666;
	font-family:Arial, helvetica, sans-serif
}
ol, ul {
	list-style:none;
	margin:0
}
ul li {
	margin:0;
	padding:0
}
h1, h2 {
	margin-bottom:10px;
	color:#111;
	width:100%;
	font-size:140%;
}
a, img {
	outline:none;
	border:none;
	color:#000;
	font-weight:700;
	text-transform:uppercase
}
p {
	margin:0 0 10px;
	line-height:1.4em;
	font-size:110%;
}
img {
	display:block;
	margin-bottom:10px
}
aside {
	font-style:italic;
	font-size:100%;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block }
a { text-decoration:none }
a:hover { text-decoration:underline }
.description { display:none }
#wrapper {
	width:96%;
	max-width:1400px;
	margin:auto;
	padding:2%
}
#main {
	width:60%;
	margin-right:5%;
	float:left
}
aside {
	width:32%;
	float:right;
	background:#fae1bd;
	padding:1%;
	box-shadow:1px 1px 10px #343434;
	border-radius:5px
}
footer {
	float:left;
	clear:left;
	margin-top:2%;
	margin-bottom:2%;
	width:100%;
	height:auto;
	border-top:3px solid #da000e;
	padding-top:1%;
	text-align:center
}
header li#goTo {
	background:#fae1bd;
	font-size:90%;
	width:100%;
	padding:1%;
	box-sizing:border-box
}
p { font-size:110% }

header h1 {
	height:70px;
	width:160px;
	float:left;
	display:block;
	background:url(../images/tulip-header.png) 0 0 no-repeat;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	color:#000
}
header nav {
	float:right;
	margin-top:40px
}
header nav li {
	display:inline;
	margin-left:15px;
	font-size:1.5em
}
#goTo { display:none }
#goTo li { background:#f7b0b0 }
#banner {
	float:left;
	margin-bottom:15px;
	width:100%;
	background-color:#e2dad8;
	box-shadow:1px 1px 10px #343434
}
#goTo { display:none }
.normal { display:inline }
.phone { display:none }
a[title="responsive"] {
	color:red;
	padding-top:5px;
	text-decoration:underline
}
header::before {
	content:"Normal CSS ";
	border:1px solid #333;
	padding:2px;
	background-color:#333;
	color:#FFF
}
#banner img {
	width:60%;
	margin:auto
}
aside h2 { text-align:center }
@media screen and (max-width:1600px) {
header::before {
	content:"max-width:1600px ";
	border:1px solid #333;
	padding:.2%;
	background-color:#000;
	color:#FFF
}
#wrapper { max-width:1200px }
#banner img {
	width:70%;
	margin:auto
}
}
@media screen and (max-width:1400px) {
header::before {
	content:"max-width:1400px ";
	border:1px solid #333;
	
	background-color:#FFF;
	color:#000
}
#wrapper { max-width:1058px }
#banner img {
	width:80%;
	margin:auto
}
}
@media screen and (max-width:1280px) {
#wrapper {
	width:96%;
	max-width:920px;
	margin:auto;
	padding:2%
}
header::before {
	content:"max-width:1280px ";
	border:1px solid #333;
	
	background-color:#e28db1
}
body { background-color:#e5d7dd }
header nav li {
	margin-left:10px;
	font-size:1.4em
}
p { font-size:1.3em }
#banner { background-color:#e28db1 }
#main p { color:#000 }
aside { background-color:#EEE }
#banner img {
	width:100%;
	margin:auto
}
}
@media screen and (max-width:960px) {
header::before {
	content:"max-width:960px ";
	border:1px solid #333;
	background-color:#edb23c;
	color:#FFF
}
body { background-color:#f1e5cd }
header nav li {
	margin-left:10px;
	font-size:1.3em
}
p { font-size:1.2em }
#banner { background-color:#edb23c }
}
@media screen and (max-width:768px) {
header::before {
	content:"max-width:768px ";
	border:1px solid #333;
	background-color:#5accf9
}
body { background-color:#dcf3fc }
header nav li {
	margin-left:3px;
	font-size:1.1em
}
p { font-size:1.1em }
#banner { background-color:#5accf9 }
.normal { display:none }
.phone {
	display:block;
	text-align:center;
	width:80px;
	margin:auto
}
.phone a {
	font-size:1em;
	color:#900
}
section#main, aside {
	display:block;
	margin:2% auto;
	padding:0;
	width:100%
}
aside p { padding:0 5px 5px }
aside h2 {
	padding-top:10px;
	font-size:1.7em
}
}
@media screen and (max-width:540px) {
header::before {
	content:"max-width:560px ";
	border:1px solid #333;
	background-color:#fae1bd;
	color:#000
}
#wrapper {
	width:100%;
	margin:auto;
	padding:0
}
#banner, header, header nav, #main, aside, footer {
	width:100%;
	float:none;
	margin:5px auto;
	clear:both
}
#main, aside, footer { width:95% }
#main p, aside p {
	width:95%;
	margin:0 auto;
	
}
body { background-color:#FFF }
h2 { text-align:center }
a { font-size:120% }
p { font-size:120% }
#banner {
	background-color:#FFF;
	box-shadow:none
}
#banner img {
	text-align:center;
	padding:0;
	background:transparent;
	width:100%
}
#main p { color:#111 }
header nav li {
	display:block;
	width:100%;
	margin:0 auto;
	text-align:center;
	background-color:#f7eee1;
	padding:1% 0;
	box-shadow:1px 0 4px #343434;
	background:linear-gradient(to bottom, rgba(246,230,180,1) 0%, rgba(234,209,178,1) 100%)
}
header h1 {
	float:none;
	margin:0 auto;
	padding:0
}
aside {
	box-shadow:none;
	border-radius:5px;
	margin-bottom:4%;
	background-color:#fae1bd
}
#goTo { display:block }
footer a { font-size:110%; }
}
@media screen and (max-width:350px) {
footer a { font-size:1.9em }
header::before {
	content:"max-width:350px ";
	border:1px solid #333;
	padding:.2%;
	background-color:#900;
	color:#FFF
}
}
 img[alt="CSS Validate"], img[alt="html5 Validate"] {
	 width:44px;
	 height:15px;
	 display:inline-block;}