/*  box sizing */
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* styling basics */
html {padding: 20px 0; background-color: #ededed;}
body {width: 90%; padding: 20px; margin: 0 auto; background: #fff; box-shadow: 1px 1px 5px rgba(0,0,0,0.5); font-family: Verdana, Arial, sans-serif; font-size: 16px;}

/* clearfix */
.clearfix:after { clear:both; content:"."; display:block; font-size:0; height:0; visibility:hidden; }
.clearfix { display:block; } /* extra for Safari */
.clearfix { *height:1%; }  /* trigger hasLayout for IE6 + 7 */

a {color: #a20000;}
a:hover, a:focus {text-decoration: none;}

.visuallyhidden { position: absolute; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; white-space: nowrap; }


.flexible {
  width: 100%;
  max-width: 100%;
  height: auto;
}

.info {
  padding: 10px;
  background: #f4f4f4;
}

.success {
  padding: 10px;
  background: #88cc88;
}

.warning {
  padding: 10px;
  background: #cccc88;
}

.error {
  padding: 10px;
  background: #cc8888;
}