@charset "UTF-8";
/* CSS Document */


*
{
	padding: 0px;
	margin: 0px;
	font-size-adjust: 0.50;
}

body
{
	text-align: center;
	min-width: 600px;
	background-color: #ffffff;
	color: #555555;
	font-family: Arial, Helvetica, sans-serif;
}

a
{
	text-decoration: none;
	color: #d72227;
}

a:hover
{
	text-decoration: underline;
}

a img
{
	border: none;
}

h1
{
	font-size: 40px;
	font-weight: normal;
	color: #d72227;
}

h2
{
	font-size: 32px;
	font-weight: normal;
	color: #d72227;
}

h3
{
	font-size: 24px;
	font-weight: normal;
	color: #d72227;
}

p
{
	font-size: 18px;
	margin: 5px 0;
}

li
{
	font-size: 18px;
	margin: 5px 0;
}


#vert-container
{
	position: absolute;
	top: 50%;
	margin-top: -100px;/* half of #content height*/
	left: 0;
	width: 100%;
}

#horiz-container
{
	position: absolute;
	left: 50%;
	top: 0;
	margin-left: -100px;/* half of #content width*/
	height: 100%;
}

#vertStripe
{
	height: 100%;
	width: 200px;
	margin-left: auto;
	margin-right: auto;
	background-color: #d72227;	
}

#horizStripe
{
	height: 200px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	background-color: #d72227;	
}

#wrapper
{
	position: relative;
	top: 0px;
	left: 0px;
	margin: 0 auto;
	width: 974px;
	height: auto;
	text-align: left;
}

#main
{
	position: absolute;
	top: 40px;
	height: auto;
	width: 974px;
	margin-bottom: 40px;
	background-color: #ffffff;
	z-index: 0;
	clear: both;
	-webkit-box-shadow: 0px 2px 7px rgba(50, 50, 50, 0.75);
	-moz-box-shadow: 0px 2px 7px rgba(50, 50, 50, 0.75);
	box-shadow: 0px 2px 7px rgba(50, 50, 50, 0.75);
}


header
{
	position: relative;
	top: 0;
	left: 0;
	height: 91px;
	width: 974px;
	background-image: url(../images/Header.jpg);
	z-index: 5;
}

nav
{
	position: absolute;
	top: 0;
	left: 329px;
	height: 91px;
	width: 665px;
	z-index: 5;
}

nav a:hover
{
	color: #ffffff;
	text-decoration: none;
	background-color: rgb(147, 149, 152);
	/* RGBa with 0.6 opacity */
	background-color: rgba(147, 149, 152, 0.6);
	/* For IE 5.5 - 7*/
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
	/* For IE 8*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

nav ul
{
	list-style: none;
	padding: 0;
}

nav li a
{
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 21px;
	font-weight: bold;
	color: #d72227;
	text-transform: uppercase;
	text-decoration: none;
	padding: 30px 35px;
	margin-top: -5px;
	width: auto;
	height: 31px;
	display: inline;
}

nav li a.active
{
	color: #555555;
}

nav li a.active:hover
{
	color: #ffffff;
}


.logo
{
	margin: 13px 0 0 20px;
	width: 269px;
	height: 64px;
}

#content
{
	position: relative;
	left: 0;
	width: 894px;
	height: auto;
	padding: 20px 40px 40px 40px;
}

#content ul
{
	list-style-image: url(../images/Discovery-Red-Bullet.png);
	margin-left: 15px;
}

.bodyImg
{
	border: #a7a9ac 1px solid;
}

.sectionImg
{
	margin: 0 auto 20px auto;
	width: 820px;
	height: 335px;
	border: #a7a9ac 1px solid;
}


.buttonImg {
	margin: 15px 0 35px;
	display: inline-block;
	padding: 10px 15px;
	font-size: 30px;
	color: #fff;
	text-shadow: 1px 2px 4px #880606;
	border: 1px solid #B30308;
	background: #d35454;
	background: -moz-linear-gradient(top, #d35454 0%, #d72227 45%, #d72227 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d35454), color-stop(45%,#d72227), color-stop(100%,#d72227));
	background: -webkit-linear-gradient(top, #d35454 0%,#d72227 45%,#d72227 100%);
	background: -o-linear-gradient(top, #d35454 0%,#d72227 45%,#d72227 100%);
	background: -ms-linear-gradient(top, #d35454 0%,#d72227 45%,#d72227 100%);
	background: linear-gradient(to bottom, #d35454 0%,#d72227 45%,#d72227 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d35454', endColorstr='#d72227',GradientType=0 );	
}

.buttonImg:hover { 
	text-decoration: none; 
	opacity: 0.8;
} 

.buttonImg a, .buttonImg a:link, .buttonImg a:visited
{
	width: 213px;
	height: 69px;
	display: block;
}

.buttonImg a:hover img
{
	visibility: hidden;
}

.headline
{
	margin: 20px 0 5px 0;
	letter-spacing:-1px;
}

/* ---------- HOMEPAGE MAIN HEADLINE -------------------------- */

#hm-hdr {
	text-align: center;
	padding: 25px 10px;
	margin-bottom: 10px;
	border-top: 1px solid #555555;
	border-bottom: 1px solid #555555;
}

#hm-hdr h1 {
	font-size: 45px;
	font-weight: normal;
	font-style: italic;
}

#hm-hdr h2 {
	font-size: 24px;
	font-weight: normal;
	color: #555555;
}

#col1
{
	width: 415px;
	height: auto;
	float: left;
	padding-right: 25px;
	}

#col2
{
	width: 415px;
	height: auto;
	padding: 0;
	float: right;
}

#singleCol
{
	width: auto;
	height: auto;
	padding: 0 35px 35px 35px;
}

#firstAidProducts {
	margin: 30px 0;
}

/* ---------  HOMEPAGE BANNER STYLES  -------------------------------------------- */
#homeBanner {
	width: 895px;
	height: 335px;
	background-image: url('../images/discovery-first-aid-homepage-banner.jpg');
	overflow: hidden;
	border: #a7a9ac 1px solid;
	margin-bottom: 30px;
}
#movingVan {
	background-image: url('../images/discovery-first-aid-van.png');
	height: 128px;
	width: 593px;
	position: relative;
	-webkit-animation: driving 7s linear infinite;
	animation: driving 7s linear infinite;
}
@-webkit-keyframes driving {
	0%		{ right: -895px; top: 170px; }
	45%		{ right: -200px; top: 175px; }
	65%		{ right: -70px; top: 174px; }
	100%	{ right: 1000px; top: 170px; }
}
@keyframes driving {
	0%		{ right: -895px; top: 170px; }
	45%		{ right: -200px; top: 175px; }
	65%		{ right: -70px; top: 174px; }
	100%	{ right: 1000px; top: 170px; }
}
/* ---------  SLIDESHOW STYLES  -------------------------------------------------- */
.slideShow {
	position: relative;
	float: right;
	width: 178px;
	height: 178px;
	margin: 10px 0;
	border: #a7a9ac 1px solid;
}

.slideShow div {
	position: absolute;
	z-index: 0;
}

.slideShow div.previous {
	z-index: 1;
}

.slideShow div.current {
	z-index: 2;
}

.slideShow2 {
	position: relative;
	float: right;
	width: 178px;
	height: 178px;
	margin: 10px 0;
	border: #a7a9ac 1px solid;
}

.slideShow2 div {
	position: absolute;
	z-index: 0;
}

.slideShow2 div.previous {
	z-index: 1;
}

.slideShow2 div.current {
	z-index: 2;
}


/* -----------  FOOTER STYLES  -------------------------------------- */

footer
{
	position: relative;
	height: 46px;
	width: 974px;
	background-image: url(../images/Footer.jpg);
	z-index: 4;
	clear: both;
}

footer p
{
	padding-top: 15px;
	color: #d72227;
	font-size: 14px;
	text-align: center;
}

footer ul
{
	list-style: none;
	padding: 0;
	margin: 0;
}

footer li
{
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-transform: uppercase;
	margin-right: 15px;
}

footer a
{
	text-decoration: none;
	color: #000000;
}

/*--------------------------------------------------------------------------------------------------------------
FORM STYLES */


#form
{
	text-align:justify;
	float: left;
	width: 415px;
	padding-bottom: 75px;
}


#form p
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #555555;
	margin-top: 0;
	padding-top: 3px;
}

.required {
	margin: -15px 0 10px 0;
	padding-left: 30px;
	font-size: 15px;
}

label {
	display: block; 
	margin: 20px 0 2px 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	padding: 10px 0 0 8px;
	color: #d72227;
}

#contact-info em { color: #d72227; }

#contactform {
	width: 415px; 
	overflow: hidden;
}

form .buttonImg { 
	margin-left: 20px;  
	padding: 10px 25px;
}

#contactform li {
	list-style: none; 
	padding-bottom: 20px;
}

#contactform li .fieldbox {
	float: left;
	height: 27px; 
}

#contactform li .fieldbox input {
	height: 30px; 
	padding: 5px;
	margin-left: 5px;
	width: 300px;
}

.input
{
	font-size: 18px;
	color: #555555;
	border: 3px solid #e5e5e5;
}


textarea#message {
	width: 350px;
	height: 120px;
	border: 3px solid #e5e5e5;
	padding: 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #555555;
	margin-left: 5px;
}


.submitButton
{
	margin: 0 0 0 22px;
}

/* These are the classes applied on the error messages
 * which prevent them from being displayed by default.
 */ 
.textfieldRequiredMsg, 
.textfieldInvalidFormatMsg, 
.textfieldMinValueMsg,
.textfieldMaxValueMsg,
.textfieldMinCharsMsg,
.textfieldMaxCharsMsg,
.textfieldValidMsg {
	display: none;
}

/* These selectors change the way messages look when the widget is in one of the error states.
 * These classes set a red color for the error text.
 * The state class (e.g. .textfieldRequiredState) is applied on the top-level container for the widget,
 * and this way only the specific error message can be shown by setting the display property to "inline".
 */
.textfieldRequiredState .textfieldRequiredMsg, 
.textfieldInvalidFormatState .textfieldInvalidFormatMsg, 
.textfieldMinValueState .textfieldMinValueMsg,
.textfieldMaxValueState .textfieldMaxValueMsg,
.textfieldMinCharsState .textfieldMinCharsMsg,
.textfieldMaxCharsState .textfieldMaxCharsMsg
{
	padding-left: 5px;
	margin-bottom: 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	display: block;
	color: #555555;
}