h1 img, h2 img, h3 img,
h4 img, h5 img, h6 img {
  margin: 0;
}


/* Text elements
-------------------------------------------------------------- */

p { margin: 0 0 5px; }
/*
  These can be used to pull an image at the start of a paragraph, so
  that the text flows around it (usage: <p><img class="left">Text</p>)
 */
.left       { float: left !important; }
p .left     { margin: 5px 5px 5px 0; padding: 0; }
.right      { float: right !important; }
p .right    { margin: 5px 0 5px 5px; padding: 0; }



blockquote  { margin: 5px; color: #666; font-style: italic; }
strong,dfn  { font-weight: bold; }
em,dfn      { font-style: italic; }
sup, sub    { line-height: 0; }

abbr,
acronym     { border-bottom: 1px dotted #666; }
address     { margin: 0 0 5px; font-style: italic; }
del         { color:#666; }

pre         { margin: 5px 0; white-space: pre; }
pre,code,tt { font: 12px 'andale mono', 'lucida console', monospace; line-height: 1.5; }


/* Lists
-------------------------------------------------------------- */

li ul,
li ol  { margin: 0; }
ul, ol { margin: 0 5px 5px 0; padding-left: 5px; }

ul     { list-style-type: disc; }
ol     { list-style-type: decimal; }

dl     { margin: 0 0 5px 0; }
dl dt  { font-weight: bold; }
dd     { margin-left: 5px;}


/* Tables
-------------------------------------------------------------- */

/*
  Because of the need for padding on TH and TD, the vertical rhythm
  on table cells has to be 27px, instead of the standard 18px or 36px
  of other elements.
 */
table         { margin-bottom: 5px; width:100%; }
th            { font-weight: bold; }
thead th      { background: #c3d9ff; }
th,td,caption { padding: 4px 10px 4px 5px; }
/*
  You can zebra-stripe your tables in outdated browsers by adding
  the class "even" to every other table row.
 */
tbody tr:nth-child(even) td,
tbody tr.even td  {
  background: #e5ecf9;
}
tfoot       { font-style: italic; }
caption     { background: #eee; }


/* Misc classes
-------------------------------------------------------------- */

.small     { font-size: 10px; margin-bottom: 5px; line-height: 5px; }
.large     { font-size: 5px; line-height: 1; margin-bottom: 5px; }
.hide      { display: none; }

.quiet     { color: #666; }
.loud      { color: #000; }
.highlight { background:#ff0; }
.added     { background:#060; color: #fff; }
.removed   { background:#900; color: #fff; }

.first     { margin-left:0; padding-left:0; }
.last      { margin-right:0; padding-right:0; }
.top       { margin-top:0; padding-top:0; }
.bottom    { margin-bottom:0; padding-bottom:0; }
.typography h2 {
	font-size: 36px;
	padding-bottom: 20px;
	line-height: 36px;
}
.typography h3 {
	font-size: 18px;
	color: #000;
	padding-bottom: 10px;
	line-height: 18px;
}
.typography p.intro {
	font-size: 18px;
}
.typography p {
	font-size: 15px;
	color: #000;
	padding-bottom: 10px;
	margin: 0
}
.typography img {
	padding: 10px;
	background: #fff;
	border-radius: 7px
}
.typography img.left {
	margin-right: 20px;
}
.typography img.right {
	margin-left: 20px;
}
/*
  A special hack is included for IE8 since it does not apply padding
  correctly on fieldsets
 */
.typography form label {
	color: #000000;
    font-family: 'CalibriRegular';
    font-size: 15px;
    line-height: 30px;
    width: 70px;
}
fieldset { padding:0; margin: 0; }
fieldset, #IE8#HACK { padding-top:0; }
legend, #IE8#HACK { margin-top:0; margin-bottom:0; }

/* Form fields
-------------------------------------------------------------- */

/*
  Attribute selectors are used to differentiate the different types
  of input elements, but to support old browsers, you will have to
  add classes for each one. ".title" simply creates a large text
  field, this is purely for looks.
 */
.typography input[type=text], .typography input[type=password], .typography input[type=url], .typography input[type=email],
.typography input.text, .typography input.title,
textarea {
  background-color:#fff;
  border:1px solid #ccc;
  border-radius: 5px;
  box-shadow: 2px 2px 10px -4px #CCCCCC inset;
  color:#000;
  height: 28px;
  width: 240px;
  padding: 0 10px;
}
.typography input[type=text]:focus, .typography input[type=password]:focus, .typography input[type=url]:focus, .typography input[type=email]:focus,
.typography input.text:focus, .typography input.title:focus,
textarea:focus {
}
select { background-color:#fff; border-width:1px; border-style:solid; }

.typography input[type=text], .typography input[type=password], .typography input[type=url], .typography input[type=email],
.typography input.text, .typography input.title,
textarea, select {
  margin: 0;
}

textarea    { width: 90%; height: 150px; padding:5px; }

/*
  This is to be used on forms where a variety of elements are
  placed side-by-side. Use the p tag to denote a line.
 */
form.inline { line-height:3; }
form.inline p { margin-bottom:0; }


/* Success, info, notice and error/alert boxes
-------------------------------------------------------------- */

.error,
.alert,
.notice,
.success,
.info { padding: 0.8em; margin-bottom: 1em; border: 2px solid #ddd; }

.error, .alert { background: #fbe3e4; color: #8a1f11; border-color: #fbc2c4; }
.notice        { background: #fff6bf; color: #514721; border-color: #ffd324; }
.success       { background: #e6efc2; color: #264409; border-color: #c6d880; }
.info          { background: #d5edf8; color: #205791; border-color: #92cae4; }
.error a, .alert a { color: #8a1f11; }
.notice a          { color: #514721; }
.success a         { color: #264409; }
.info a            { color: #205791; }
.typography form .field {
	margin-bottom: 10px;
}
.typography form .field.text {
	width: 350px;
}
.typography form .field.textarea {
	clear: both;
}
.typography form .field.checkbox, .typography form .Actions {
	margin-left: 85px;
}
.typography form .field.checkbox .right {
	float: none!important;
}
.login_form form .field.checkbox .right {
    background-position: 0 0;
    line-height: 1.5;
    padding-left: 30px;
    width: auto;
}
.login_form .checkbox input[type="checkbox"]:checked + label {
	background-position: 0 0;
}
.typography form .field.checkbox a {
	text-decoration: underline;
}
.typography form .Actions {
	margin-top: 10px;
}
.typography form .Actions input {
	width: auto;
	border: solid 1px #0062a5;
	border-radius: 6px;
	padding: 6px 30px;
	text-align: center;
	background: #0879c9;
	background-image: -ms-linear-gradient(top, #0A9BD7 0%, #0879C9 100%);
	background-image: -moz-linear-gradient(top, #0A9BD7 0%, #0879C9 100%);
	background-image: -o-linear-gradient(top, #0A9BD7 0%, #0879C9 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0A9BD7), color-stop(1, #0879C9));
	background-image: -webkit-linear-gradient(top, #0A9BD7 0%, #0879C9 100%);
	background-image: linear-gradient(to bottom, #0A9BD7 0%, #0879C9 100%);
	font-family: 'NotoSansBold';
	font-size: 18px;
	color: #fff;
	text-transform: uppercase;
	box-shadow: 0px 0px 1px 0px #fff inset;
	cursor: pointer;
}
.typography form .Actions input.disabled {
	border: solid 1px #ccc;
	background-image: none;
	background: #ccc;
	cursor: default;
}
.typography form label.required {
	font-size: 12px;
	color: #ff8080;
	margin-left: 80px;
}
.typography form label.required {
	display: none!important;
}
.typography form input.required, .typography form textarea.required {
	border: solid 1px #ff9562;
	background: #fff5f0;
}
.typography .success_msg {
	text-align: center;
	display: block;
}
.typography .success_msg p {
	font-size: 30px;
}
.typography.login_form {
	margin-top: 20px;
}