#content canvas#adminChart { width: 100%; height: 500px; margin-bottom: 21px; }
a.xlsx { background:url(/_assets/_gfx/sprite-icons.gif) no-repeat -221px -382px; padding: 0 0 0 20px; }
#right p.disclaimer { margin-top: 21px; margin-bottom: 21px; }

#content ol { margin-bottom: 21px; }
#content ol li { font-size: 1em; }

#content form fieldset textarea { height: 150px; }
#content #settingsForm button.submit { width: auto; }
#content button#login { margin-top: 0; float: left; }
#content a.btn-link { margin-top: 3px; float: left; }

#content a.delete img { width: 24px; }
#content td:nth-of-type(3) { width: auto; }

/* Set alignment for Google reCaptcha and submit button */
.g-recaptcha { float: left; }
#content button { margin-top: 20px; float: right; }
#content label.hidden { display: none;}

/* jquery date picker inline table */
#content #datepicker { background: #fff; margin-top: 21px; border: 1px solid #e4e4e4; }
#content #datepicker .ui-datepicker-header { padding: 7px; }
#content #datepicker .ui-datepicker-title { text-align: center; font-size: 16px; font-weight: bold; }
#content a.ui-datepicker-next { cursor: pointer; float: right; margin-top: 4px; }
#content a.ui-datepicker-prev { cursor: pointer; float: left; margin-top: 4px; }

#content table.ui-datepicker-calendar { margin-bottom: 0; padding: 0; }
#content table.ui-datepicker-calendar tr { border: none; }
#content table.ui-datepicker-calendar th { text-align: center; border: 1px solid #e4e4e4; font-weight: bold; background: #e1e1e1; padding: 7px; }
#content table.ui-datepicker-calendar td { text-align: center; border: 1px solid #e4e4e4; padding: 0; }
#content table.ui-datepicker-calendar td.ui-datepicker-current-day { background: #faeeac; }
#content table.ui-datepicker-calendar td span { padding: 7px; border: none; display: block; }
#content table.ui-datepicker-calendar td a { padding: 7px; border: none; display: block; }
#content table.ui-datepicker-calendar a:hover { padding: 7px; background: #faeeac; }

#right p.logout { border-bottom: none; }
#right p.logout a {
   background: url(/_assets/_gfx/circle-blue-arrow-up.svg) no-repeat 5px center #f9f9f9;
   border: 1px solid #cccccc;
   border-radius: 16px; 
   color: #416ebf;
   display: inline-block;
   width: auto;
   padding: 5px 7px 5px 30px;
   transition: all 0.3s ease-out;  
}
#right p.logout a:hover { background-color: #e4e4e4; }


/********** TINY MCE EDITOR **********/
#content .mce-tinymce { margin-bottom: 21px; }
#content .mce-tinymce button { width: auto; padding: 3px 5px; margin: 0; background: none; border: none; }
#content textarea.editor { width: 99%; height: 300px; }


/********** ERROR AND SUCCESS STYLES **********/
[role=alert] {
    padding: 1.0em 1.0em 1.0em 50px;
    background-repeat: no-repeat;
    background-position: 10px 10px;
    background-size: 32px;
    border-width: 1px;
    border-style: solid;
}
.errors { border-color: #f4c1c1; color: #790000; background-color: #FFE5E6; background-image: url(/_assets/_gfx/circle-red-cancel.svg); }
.success { border-color: #4F8A10; color: #4F8A10; background-color: #DFF2BF; background-image: url(/_assets/_gfx/circle-green-confirm.svg); }

#content input.error, #content textarea.error {
    color: #790000 !important;
    background: #FFE5E6 url(/_assets/_gfx/circle-red-cancel.svg) no-repeat right 5px center;
    border: 1px solid #f4c1c1;
}
#content textarea.error { background-size: 16px; background-position: right 5px top 5px; }
div.error {
	width: 100%;
	border-radius: 2px;
	padding: 3px 7px 4px 7px;
	box-sizing: border-box;
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-weight: 400;  
}
#content div.collapse {
    overflow: hidden;
    animation: slideup 2s;
    animation-delay: 2s;
    -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
    animation-fill-mode: forwards;
}



/********** Animation to use when collapsing messages **********/
@-webkit-keyframes slideup {
    0% { max-height: 300px; }
    100% { max-height: 0; }
}
@keyframes slideup {
    0% { max-height: 300px; }
    100% { max-height: 0; }
}



/*************************************************
	LARGEST @ MEDIA
	the default - base width: 1114px
cols    1     2      3      4
px      186   418    650    882

*************************************************/
@media only screen and (min-width: 1025px) {
}


/*************************************************
	MIDDLE @ MEDIA / iPad landscape
	base width: 882px
cols    1     2      3
px      186   418    650

**************************************************/
@media only screen and (min-width: 769px) and (max-width: 1024px) {
	#content form fieldset input {width: 100%;}
    #content form fieldset input[type=text] {width: 100%;}
    #content form fieldset textarea {width: 100%;}
    #content form fieldset label.longestlabel { width: 75%; }
	.errors { background-image: none; }
	/* Error styles */
	div.error {
		margin-left: 0;
		width: auto;
	}
	#content div.shoppingcart { width: 100%; top: 475px;}
	#content div.shoppingcart dl { width: 100% !important; }
	#content div.shoppingcart dt { width: 67% !important; }
	#content div.shoppingcart dd { width: 20% !important; }
	
}

/*************************************************

	SMALLEST @ MEDIA / iPad portrait
	base width: 650px

**************************************************/
@media only screen and (max-width: 768px) {
	.errors { background-image: none; }
	#right div.shoppingcart { width: 186px; top: 475px; }
	/* Fix email field width */
	#content form fieldset input {width: 75%;}
    #content form fieldset input[type=text] {width: 75%;}
    #content form fieldset textarea {width: 75%;}
    #content form fieldset label {width: 74%;}
    #content form fieldset label.longestlabel { width: 75%; }
	/* Error styles */
	div.error {
		margin-left: 0;
		width: 75%;
	}
	#content div.shoppingcart { width: 100%; top: 475px;}
	#content div.shoppingcart dl { width: 100% !important; }
	#content div.shoppingcart dt { width: 67% !important; }
	#content div.shoppingcart dd { width: 20% !important; }

    #content button { float: left; }	
}