/*
CSS for Like A Hurricane | Working Dogs
Project re-started in February 2010
*/

body {
	background-color: #fff;
	text-align: center;
	font: 14px "Lucida Grande", Lucida, Verdana, sans-serif;
}

img, img a {
	border: 0;
}

#page {
	background-color: #fff;
	width: 940px;
	color: #7f7772;
	margin: 5px auto;
	padding: 0;
}

/**************************************************
 ** Header										 **
 *************************************************/

#header { margin: 0; padding: 0; width: 940px; color: #ddd;}
#h-top { height: 150px; background-image: url(../images/header.jpg); }

#m-menu { font-size: 18px; margin: 0; padding: 0; line-height: 19px; vertical-align: middle; }
#m-menu .whitebox_t { background: url(../images/m-menu-top.jpg) 0 0 no-repeat; height: 13px; }
#m-menu .whitebox_m { background: url(../images/m-menu.jpg) repeat-y; margin: 0;padding: 0; }
#m-menu .whitebox_b { background: url(../images/m-menu-bottom.jpg) 0 0 no-repeat; height: 13px; }
#m-menu .area { padding: 0 25px; }

.whitebox_m ul { margin: 0; padding: 0; }
.whitebox_m li { list-style-type: none; display: inline-block; float: left; margin: 0 39px 0 0; padding: 0; }

#m-menu a { text-decoration: none; color: #fff; }
#m-menu a:hover { text-decoration: underline; }

/**************************************************
 ** CONTENT										 **
 **************************************************/

#content { text-align: justify; padding: 0 25px 15px;}
#content a { color: #5B5B5B; text-decoration: none; font-weight: bold; }
#content a:hover { color: #ed2022; }
#content h1, h2, h3, h4 { font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans", Verdana, sans-serif; font-weight: bold; }
#content h1 { margin: 5px 0 10px; font-size: 19px; font-weight: bold; color: #ed2022; }
#content h2 { margin: 5px 0 10px; font-size: 17px; color: #5B5B5B; }
#content h3 { margin: 5px 0 10px; font-size: 17px; color: #ed2022; }
#content h4 { margin: 5px 0 10px; font-size: 15px; color: #ed2022; clear: left; }
#content p { margin: 5px 0 10px; clear: both; }
#content table { width: 100%; padding: 0; margin: 0; }
#content td { text-align: center; }

#content .dog { clear: both; margin: 10px 0 15px; }
/* #content .dog :hover { background-color: #e4e4e4; } */
#content .dog .left { margin-bottom: 15px; float: left; width: 570px; }
#content .dog .right { margin-bottom: 15px;float: right; width: 300px;}

.img_left { float: left; margin-right: 8px; }
.img_right { float: right; margin-left: 8px; }

/* News classes*/
.newstitle { line-height: 20px; }
.news { margin: 0; }
.date { margin: 0 0 20px 0; color: #ed2022; text-align: right; font-size: 11px; line-height: 18px; border-top: 1px dotted #7f7772; }

.img_bottom {padding-bottom: 15px; }

/**************************************************
 ** SHOWCASE									 **
 **************************************************/

#showcase {
	width: 890px;
	height: auto;
	margin: 0;
	padding: 0 0 20px;
	clear: right;
}

#showpics {
	width: 420px;
	height: auto;
	margin: 0;
	padding: 0;
}

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

/* COLUMNS */
.column { float: left; }
.column.first { clear: left; }
.column.first, .column.last { margin-left: 0 !important; }
.column.last { float: right !important; }
.column a .showtitle { font-weight: bold; text-decoration: none; }
.column a img, .column a:hover img { border: 0; }

/* GRID 2 COLUMNS */
.grid2col .column { width: 355px; margin-left: 20px; }
.grid2col .column .showtitle { width: 355px; height: 30px; line-height: 30px; text-align: center; color: #FFF; background: url(../images/grid2col.png) no-repeat 0 top; }
.grid2col .column .showimage { width: 355px; padding-bottom: 20px; }

/* GRID 3 COLUMNS */
.grid3col .column { width: 280px; margin-left: 25px; }
.grid3col .column .showtitle { width: 280px; height: 30px; line-height: 30px; text-align: center; color: #FFF; background: url(../images/grid3col.jpg) no-repeat 0 top; }
.grid3col .column .showimage { width: 280px; padding-bottom: 20px; }

/* GRID 3 COLUMNS A */
.grid3cola .column { width: 570px; margin-left: 15px; text-align: justify; }
.grid3cola .column.first { width: 140px; margin-left: 0 !important; }
.grid3cola .column.last { width: 140px; margin-left: 0 !important; float: right; }
.grid3cola .column img { margin: 5px 0; }

/* GRID 3 COLUMNS Litter (overview) */
.grid3litter .column { width: 430px; margin-left: 10px; text-align: center; }
.grid3litter .column.first { width: 210px; margin-left: 0 !important; }
.grid3litter .column.last { width: 210px; margin-left: 0 !important; float: right; }
.grid3litter .column img { border: 0; margin: 5px 0; padding-bottom: 15px; }

/* GRID 4 COLUMNS */
.grid4col .column { width: 170px; margin-left: 17px; }
.grid4col .column .showtitle { width: 170px; height: 30px; line-height: 30px; text-align: center; color: #FFF; background: url(../images/grid4col.png) no-repeat 0 top; }
.grid4col .column .showimage { width: 170px; padding-bottom: 20px; }

/* GRID 5 COLUMNS */
.grid5col .column { width: 140px; margin-left: 8px; margin-bottom: 20px; }

/* GRID 4 PICS */
.grid4pics .column { width: 75px; margin-left: 40px; margin-bottom: 10px; }
.grid4pics .column.first { width: 75px; margin-left: 0 !important; clear: both; }
.grid4pics .column.last { width: 75px; margin-left: 0 !important; float: right; }

.clr {
	clear: both;
}

/**********************************************************
 ** Footer												 **
 **********************************************************/

#footer {
	width: 890px;
	height: 50px;
	line-height: 50px;
	padding: 0 25px 20px;
	background: url(../images/footer-bg.jpg) no-repeat;
	font-size: 12px;
}

#footer .left {
	float: left;
	text-align: left;
	padding-left: 33px;
	width: 40%;
}

#footer .right {
	float: right;
	text-align: right !important;
}

#footer a {
	text-decoration: none;
	font-weight: bold;
	color: #ED2022;
}

#footer a:hover {
	text-decoration: underline;
}