/* contains all styles for basic layout, reset and typography */

/* -------------------------------------------------------------- 
  
   reset.css
   * Resets default browser CSS.
   
-------------------------------------------------------------- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

body { 
  line-height: 1.5; 
}

/* Tables still need 'cellspacing="0"' in the markup. */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
table, td, th { vertical-align: middle; }

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

/* Remove annoying border on linked images. */
a img { border: none; }

/* -------------------------------------------------------------- 
   
   typography.css
   * Sets up some sensible default typography.
      
-------------------------------------------------------------- */

/* Default font settings. 
   The font-size percentage is of 16px. (0.75 * 16px = 12px) */
body { 
  font-size: 75%;
  color: #222; 
  background: #fff;
  font-family: Cambria, Georgia, "Times New Roman", serif;
}


/* Headings
-------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #111; }

h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
h2 { font-size: 2em; margin-bottom: 0.75em; }
h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }
h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; height: 1.25em; }
h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }
h6 { font-size: 1em; font-weight: bold; }

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


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

p           { margin: 0 0 1.5em; }
p img       { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p img.right { float: right; margin: 1.5em 0 1.5em 1.5em; }

a:focus, 
a:hover     { color: #000; }
a           { color: #009; text-decoration: underline; }

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

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

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


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

ul {list-style-image: url('../../img/bird_tracks.gif'); list-style-position: inside;}

li ul, 
li ol       { margin:0 1.5em; }
ul, ol      { margin: 0 1.5em 1.5em 1.5em; }

ol          { list-style-type: decimal; }

dl          { margin: 0 0 1.5em 0; }
dl dt       { font-weight: bold; }
dd          { margin-left: 1.5em;}


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

table       { margin-bottom: 1.4em; width:100%; }
th          { font-weight: bold; background: #C3D9FF; }
th,td       { padding: 4px 10px 4px 5px; }
tr.even td  { background: #E5ECF9; }
tfoot       { font-style: italic; }
caption     { background: #eee; }


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

.small      { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; }
.large      { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; }
.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; }

/* -------------------------------------------------------------- 
   
   forms.css
   * Sets up some default styling for forms
   * Gives you classes to enhance your forms
   
   Usage:
   * For text fields, use class .title or .text
   
-------------------------------------------------------------- */

label       { font-weight: bold; display: block; }
fieldset    { padding:1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc; }
legend      { font-weight: bold; font-size:1.2em; }


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

input.text, input.title,
textarea, select {
  margin:0.5em 0;
  border:1px solid #bbb;
}

input.text:focus, input.title:focus,
textarea:focus, select:focus {
  border:1px solid #666;
}

input.text, 
input.title   { width: 300px; padding:5px; }
input.title   { font-size:1.5em; }
textarea      { width: 390px; height: 250px; padding:5px; }


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

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

.error      { background: #FBE3E4; color: #8a1f11; border-color: #FBC2C4; }
.notice     { background: #FFF6BF; color: #514721; border-color: #FFD324; }
.success    { background: #E6EFC2; color: #264409; border-color: #C6D880; }
.error a    { color: #8a1f11; }
.notice a   { color: #514721; }
.success a  { color: #264409; }

/* GRID
------------------------------------------------------------- */

.container { width: 950px; margin: 0 auto; }
div#main_about{margin-bottom: -130px; padding-bottom: 130px;}
#container {width: 950px; margin: 0 auto; background: url('../../img/container_bg.gif') repeat-y top left #fff; position: relative; padding-bottom: 130px; overflow-y: visible;z-index:11;}

/* Use this to create a horizontal ruler across a column. */
hr {
  background: #ddd; 
  color: #ddd;
  clear: both; 
  float: none; 
  width: 100%; 
  height: .1em;
  margin: 0 0 1.45em;
  border: none; 
}
hr.space {
  background: #fff;
  color: #fff;
}


/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clearfix:after, .container:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix, .container {display: inline-block;}
* html .clearfix,
* html .container {height: 1%;}
.clearfix, .container {display: block;}

/* Regular clearing
   apply to column that should drop below previous ones. */

.clear { clear:both; }

/* DEBUG
------------------------------------------------------------- */


/* Custom site layout */

body {background: url('../../img/site_bg.jpg') repeat-x top center #eeebfc; position: relative;}

/*Shadow*/
div.shadow {position: absolute; height: 100%; width: 960px; margin: 0 0 0 -480px; top: 0; left: 50%; z-index: 10;}
div#shadow_left {height: 100%; position: absolute; left: 0; top: 0; z-index: 10;}
div#shadow_left img {height: 100%; width: 5px; z-index: 10; position: relative;}
div#shadow_right {height: 100%; position: absolute; right: 0; top: 0; z-index: 10;}
div#shadow_right img {height: 100%; width: 5px; z-index: 10; position: relative;}

/*Logo*/
div.header {margin-top: 0; background: #fff;}
div.header h1 span { display: none; }
div.header h1 {width: 431px; height: 150px; background: url('../../img/chateau_logo.jpg') no-repeat top left; display: block; float: left; margin: 0; padding: 0;}

/*Email Signup*/
div.signup {border-left: 1px solid #c81612; border-right: 1px solid #c81612; background: url('../../img/signup_bg.gif') repeat-x top left; width: 360px; float: right; padding: 10px 0 0 0; margin-right: 10px;}
div.signup_bottom {float: right; margin-right: 10px;}
div.signup form {margin-left: 40px;}
div.signup label {color: #c81612; font-family: Georgia, "Times New Roman", serif; font-size: 1.2em;}
div.signup input[type="text"] {width: 200px;}

/*Nav*/
div.main_nav {border-bottom: 1px solid #4fd900; background: url('../../img/nav_bg.gif') repeat-x top left #3da800;}
div.main_nav ul {list-style: inside; list-style-type: none; margin: 0; padding: 0;}
div.main_nav ul li {float: left;}
div.main_nav ul li a {display: block; font-family: Georgia, "Times New Roman", serif; font-size: 1.4em; margin: 5px 3px; padding: 0 5px; text-transform: uppercase; text-decoration: none; color: #fff;}
div.main_nav ul li a:hover, div.main_nav ul li a.on {color: #fcf92b;}

/*Admin Menu*/
div.admin {text-align: right; background: #ccc; border-top: 2px solid #333; border-bottom: 2px solid #333;}
div.admin p {margin: 5px;}
div.admin p a {color: #333;}
div.admin p a:hover {color: red;}

/*Content*/
div#main {width: 574px; float: left; position: relative; background: url('../../img/right_shadow.gif') repeat-y right top;}
div#main h2 {font-family: Georgia, "Times New Roman", serif; font-size: 2.2em; color: #4fd900; font-weight: bold;}
div#main > * {margin: 10px 10px 0 10px;}
div#main h3 {color: #4fd900; font-weight: bold; font-size: 1.4em;}
div#main p, div#main_about p {font-size: 1.2em;}

/*News Preview*/
div.active div.date {background: url('../../img/active_date.gif') no-repeat top left; width: 43px; height: 43px;}
div.date {text-align: center; font-family: Arial, Helvetica, Verdana, sans-serif; color: #fff; font-size: 1.2em; float: left;}
div.item {width: 500px; float: left; background: #ee7a1d;}
div.item h4 {color: #fff; font-size: 1.6em; margin: 10px 10px; line-height: 1em; cursor: pointer;}
div.item p {color: #fff; margin: 10px;}
div.inactive div.date {background: url('../../img/inactive_tab.gif') no-repeat top left; width: 43px; height: 43px; color: #333;}
div.inactive.even div.item {background: #fff;}
div.inactive h4 {color: #ee7a1d;}
div.inactive.odd div.item {background: #fad7bc;}

/*About*/
div#main_about {width: 950px; float: left; position: relative; background: #fff;}
div#main_about h2 {font-family: Georgia, "Times New Roman", serif; font-size: 2.2em; color: #4fd900; font-weight: bold;}
div#main_about > * {margin: 10px 10px 0 10px;}
div#main_about h3 {color: #4fd900; font-weight: bold;}
div#main_about img {float: right; margin: 0 0 0 10px;}

/*News*/
div#news h4 {font-size: 1.6em; color: purple; margin: 0 0 5px 0;}
div#news p {margin: 0 0 10px 0;}

div.pawprints {background: url('../../img/main_bg.gif') no-repeat left bottom;position:relative;}
div.pawprints * {position: relative; z-index: 2;}

/*Gallery*/
a.lightbox {text-decoration: none; }
a.lightbox img {padding: 5px; margin: 10px; border: 1px #ccc solid; text-decoration: none;}
a.lightbox span {text-decoration: none; color: #4fd900; text-align: center;}

/*Events*/

/*Sidebar*/
div#sidebar div#events div {padding: 10px;}
div#sidebar {position: relative; width: 376px; float: left; background: #fffee9;}
div#sidebar h2 {background: url('../../img/sidebar_header_bg.gif'); padding: 5px 10px; color: #fff; margin-bottom: 0;}
div#sidebar div#events div.date {background: url('../../img/date_bg.png') no-repeat; width: 50px; height: 60px; color: purple; padding: 5px 0 0 0;}
div#sidebar div#events h4 { font-size: 1.6em; margin: 10px 5px;}
div#sidebar div#events p {margin: 0;}


div#sidebar div#events div.odd {color: #fff; background: #ee7a1d;}
div#sidebar div#events div.odd h4 {color: #fff;}

/*Donated*/
div#donated {position: relative;}
div#donated h3 {color: purple; margin: 5px 70px 0 0; text-align: right;}
div#donated img {float: right; margin: 20px 80px 0 0; position: relative; z-index: 10;}
div#donated div#total_donated {position: absolute; color: purple; font-size: 2em; font-weight: bold; top: 130px; left: 65px; z-index: 20;}

/*Featured*/
div#featured {background: url('../../img/featured_bg.jpg') top right no-repeat; height: 250px; position: relative; padding: 90px 0 0 20px;}
div#featured div#description {position: absolute; top: 90px; left: 230px; width: 120px;}
div#description span#featured_name {color: purple; font-size: 1.4em;}
div#sidebar p {padding: 10px;}

/*Contact*/
img.hydrant {position: absolute; z-index: 1; top:50px; left: 300px;}

/*Footer*/
div#footer {position: relative; z-index: 100;}
div#footer div.container {position: relative; background: url('../../img/container_bg.gif') repeat-y top left #fff;}
div#footer div p {text-align: right; padding: 50px 0 0 0; margin: 0; position:relative; z-index: 10000000; color: #fff;}
div#footer div p a {color: #fff; margin: 0;}

/*Grass and Animals*/
div#grass {width: 100%; height: 69px; background: url('../../img/grass.png') repeat-x; position: absolute; bottom: 0; left: 0; z-index: 1000;}
div#cat {position: absolute; bottom: 0; left: 0; z-index: 90; height: 180px; width: 380px;}
div#cat > * {position: relative; z-index: 100;}
div#cat embed, div#cat object {position: relative; z-index: 10;}
div#dalmation {position: absolute; bottom: 2px; left: -100px; z-index: 100;}
div#hydrant {position: absolute; bottom: 0px; left: 890px; z-index: 100;}
div#dog {position: absolute; bottom: 0px; left:750px; z-index: 100; height: 180px; width: 380px;}
div#dog * {position: absolute; bottom: -20px; left: 0px;}

div.backend {background: #fff;}