﻿/* ------------------------------------------------------------
    reset nasty things - all ccs by jason of custardfish - HI!
------------------------------------------------------------ */


* {
	margin: 0;
	padding: 0;
	outline: none;
}

.clear {clear: both;	height: 0px;}

/* ------------------------------------------------------------
    basic elements
------------------------------------------------------------ */

body {
	font-size: 62.5%;
	margin: 0; padding: 0;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #33407B;
}

img { border: none }

h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, legend { 
	padding: 0em;
	margin: 0;
	font-weight: normal;
}

p, ul, ol, li, dl, dt, dd, legend {font-family:  Arial, Helvetica, sans-serif;}
h1, h2, h3, h4, h5, h6 {font-family:  Arial, Helvetica, sans-serif;}
	
ul, li, dl, dt, dd { list-style: none }

/* lead local font-face code 
local('some other font name'),
url(../font/font.ttf) format('truetype');
*/

@font-face {
 font-family: Sketch;
 src: url("img/SketchRockwell-Bold.eot") /* EOT file for IE */
}
@font-face {
 font-family: Sketch;
 src: url("img/SketchRockwell-Bold.ttf") /* TTF file for CSS3 browsers */
}


#main-content p {font-size: 1.4em; line-height: 1.5em; color:#485295; padding: 0 0 10px 0;}
#main-content p a {color:#B72025;}
#main-content p a:hover{color: #148F39;}

#main-content h1 {
   font-size: 3em;
   font-family:Sketch, Impact;
   color: #33407B;

}

#main-content h2 {
   font-size: 1.8em;
   font-family:Sketch, Impact;
   color: #D29A17;
	 padding-top: 17px;
}

#main-content ul {
		font-size: 1.5em;
		line-height: 1.7em;
		color:#485295;
		padding: 10px 0 0 20px;
}

#main-content ul li{
	padding: 3px 0;
}

#main-content ul a {color:#B72025;}
#main-content ul a:hover{color: #148F39;}

/* ------------------------------------------------------------
    basic site structure
------------------------------------------------------------ */

body {
	background: #46B1D8 url(img/bg-tile.jpg) top left repeat;
	margin:auto;
}

#wrap-header {
	background: url(img/bg-header.jpg) top center no-repeat;
	width: 100%;
}

#wrap-footer {
	background: url(img/bg-footer.jpg) bottom center no-repeat;
	width: 100%;
  padding-bottom: 1px;
}

#main-body {
	width: 904px;
	padding: 20px 56px 40px 56px;
	margin: 0 auto;
	background: url(img/main-body-tile.png) top center repeat-y;	
}


#footer {
	width: 1016px;
	height: 140px;
	padding: 0;
	margin: 0 auto 200px auto;
	background: url(img/footer-bg.png) bottom center no-repeat;
}

#main-content {
	width: 520px;
	float: left;
}

#main-content.wide{width: 860px; margin: 0 auto;}

#extraInfo {
	width: 310px;
	float: right;
}


/* ------------------------------------------------------------
    main header bits
------------------------------------------------------------ */

#header{
	width: 1016px;
	height: 95px;
	margin: 20px auto 0 auto;
	background: url(img/main-body-top.png) bottom left no-repeat;
	}


#logo {
	padding: 6px 0 0 4px;
	text-indent: -9999px;
	float: left;
}

#logo a{
	background: url(img/justDuckIt-logo.png) transparent 0 0 no-repeat;
	display: block;
	top: 150px;
	height: 85px;
	width: 418px;
}


/* ------------------------------------------------------------
    navigation bits 
------------------------------------------------------------ */


.main_nav {
height:49px;
overflow:hidden;
width:924px;
margin: 0 auto;
}
.main_nav li {
display:inline;
float:left;
height:49px;
}
.main_nav li a {
background:transparent url(img/menu.png) no-repeat scroll 0 0;
display:block;
height:49px;
text-indent:-9999px;
}

#about {background-position:0 0;width:191px;}
#about:hover {background-position:0 -49px;}

#involved {background-position:-191px 0; width:149px;}
#involved:hover {background-position:-191px -49px;}

#whats-on {background-position:-340px 0;width:121px;}
#whats-on:hover {background-position:-340px -49px;}

#who-we-are {background-position:-461px 0;width:144px;}
#who-we-are:hover {background-position:-461px -49px;}

#blog {background-position:-605px 0;width:75px;}
#blog:hover {background-position:-605px -49px;}

#fun-games {background-position:-680px 0;width:141px;}
#fun-games:hover {background-position:-680px -49px;}

#contact {background-position:-821px 0;width:103px;}
#contact:hover {background-position:-821px -49px;}


/* ------------------------------------------------------------
    content bits - main text etc etc
------------------------------------------------------------ */

#homeHeader {
		background:transparent url(img/header-pic-bg.png) no-repeat top left;
		display:block;
		width: 920px; height: 315px;
}

#homeHeader img {
		margin: 18px 45px 0 7px;
		width: 590px;
		height: 252px;
		float: left;
}

#homeHeader #intro {
		width: 250px;
		height: 305px;
		margin: 15px 0 0 0;
		float: left;
		background: url(img/duck-hat.png) no-repeat bottom right;
}		

#homeHeader h1 {
		font-size: 40px;
		background: url(img/text-headers.png) 0 -188px no-repeat;
		text-indent: -9999px;
		display: block;
		width: 250px;
		height: 75px;
}
		
#homeHeader p {
	font-size: 1.8em;
	line-height: 1.3em;
	color: #33407B;
	padding: 0 0 14px 0;
}

#homeHeader p a {color:#B72025;}
#homeHeader p a:hover{color: #148F39;}

#homeHeader p span a {
		background: url(img/buttons-bg.png) 0 0 no-repeat;
		text-indent: -9999px;
		display: block;
		width: 128px;
		height: 44px;
}

#homeHeader p span a:hover{
		background-position: 0 -46px;
}

#how-to-help {
		border: 8px solid #63BBE5;
		background: #C0DFFF url(img/box-bg-blue.png) repeat top left;
		width: 885px;
		height: 235px;
		margin-top: 5px;
}

#how-to-help.vertical {width: 293px; height: 520px;}

#how-to-help h1 {padding: 18px 0 0 20px;}
#how-to-help h1 a {
		background: url(img/text-header-help.png) 0 0 no-repeat;
		text-indent: -9999px;
		display: block;
		width: 841px;
		height: 33px;
}

#how-to-help h1 a:hover{
		background-position: 0 -32px;
}

#how-to-help li {
	display: block;
	float: left;
	width: 260px;
	height: 66px;
	margin: 16px 16px 2px 16px;
}

#how-to-help li p {
	font-size: 14px;
	line-height: 13px;
	width: 150px;
	padding: 14px 0 0 15px; 
	color: #333;
}

#how-to-help li#donate-salary p {padding-top: 20px; line-height: 1.6em;}

#how-to-help li p a{text-decoration: none; color: #333;}
#how-to-help li p a:hover{text-decoration: underline;}

#how-to-help li h1, #how-to-help li h2 {text-indent: -9999px;}

#how-to-help li#donate-salary {height: 151px; background: #FFF url(img/how-to-help-ducks.png) 0 0 no-repeat;}
#how-to-help li#buy-a-duck {background: #FFF url(img/how-to-help-ducks.png) 0 -151px no-repeat;}
#how-to-help li#pledge-a-prize {background: #FFF url(img/how-to-help-ducks.png) 0 -217px no-repeat;}
#how-to-help li#make-a-bid {background: #FFF url(img/how-to-help-ducks.png) 0 -283px no-repeat;}
#how-to-help li#keep-in-touch {background: #FFF url(img/how-to-help-ducks.png) 0 -349px no-repeat;}

#latest-news-feed {
		width: 242px;
		margin: 35px 30px;
		float: left;
}

#latest-news-feed h1 a {
		background: url(img/text-headers.png) 0 -4px no-repeat;
		text-indent: -9999px;
		display: block;
		width: 242px;
		height: 24px;
}

#latest-news-feed h1 a:hover{background-position: 0 -31px;}

#latest-news-feed p {
		background: url(img/news-arrow.png) right 15px no-repeat;
		font-family:  Arial, Helvetica, Verdana, sans-serif;
		font-size: 1.6em;
		line-height: 1.4em;
		padding: 12px 30px 16px 0;
		border-bottom: solid 1px #CCC;
		height: 40px;
}
		
#latest-news-feed p a {color: #33407B; text-decoration: none;}
#latest-news-feed p a:hover {color: #33407B; text-decoration: underline;}

#change-lives-block {
		width: 242px;
		margin: 35px 24px;
		float: left;
		/*border-bottom: solid 1px #CCC;*/
}

#change-lives-block h1 a {
		background: url(img/text-headers.png) -297px -4px no-repeat;
		text-indent: -9999px;
		display: block;
		width: 242px;
		height: 24px;
}

#change-lives-block h1 a:hover{background-position: -297px -31px;}

#change-lives-block p {
		font-family:  Verdana, Helvetica, Arial, sans-serif;
		font-size: 1.4em;
		line-height: 1.5em;
		padding: 12px 0 19px 0;
		color: #666;
}

#change-lives-block p span {color:#7FCE98; display: block;font-style:italic;text-align:right;}
#change-lives-block p span a{color:#7FCE98; text-decoration:none;}
#change-lives-block p span a:hover{color:#666;text-decoration:underline;}

#change-lives-block img {
		display: block;
		width: 100px;
		height: 100px;
		background: #CCC;
		float: left;
		margin: 17px 17px 12px 0;
}

#next-events-feed {
		width: 242px;
		margin: 35px 0 35px 30px;
		float: left;
}

#next-events-feed h1 a {
		background: url(img/text-headers.png) -594px -4px no-repeat;
		text-indent: -9999px;
		display: block;
		width: 242px;
		height: 24px;
}

#next-events-feed h1 a:hover{background-position: -594px -31px;}

#next-events-feed p {
		background: url(img/news-arrow.png) right 15px no-repeat;
		font-family:  Arial, Helvetica, Verdana, sans-serif;
		font-size: 1.6em;
		line-height: 1.4em;
		padding: 12px 0 16px 0;
		border-bottom: solid 1px #CCC;
		height: 40px;
}
		
#next-events-feed p a {color: #33407B; text-decoration: none;}
#next-events-feed p a:hover {color: #33407B; text-decoration: underline;}

#next-events-feed p a span {
		font-family:  Verdana, Helvetica, Arial, sans-serif;
		display: block;
		text-align: right;
		float: left;
		font-size: 19px;
		width: 44px;
		color: #B7346F;
		padding: 0px 10px 0 0;
		
}

#home-gallery {clear: both; width: 860px; margin: 20px auto 0 auto; padding-top: 20px;}

#home-gallery li {
	margin: 10px 0 10px 19px;
	float: left;
}
#home-gallery li img{
	padding: 2px;
	border: 1px solid #D6D6D6;
}

#home-gallery h1 a {
		background: url(img/text-headers.png) 0 -71px no-repeat;
		text-indent: -9999px;
		display: block;
		width: 860px;
		height: 26px;
}

#home-gallery h1 a:hover{background-position: 0 -97px;}

#home-gallery p {
		font-family:  Arial, Helvetica, Verdana, sans-serif;
		font-size: 1.4em;
		padding: 15px 0 0 0;
}


/*-------------------------------------------------------------
	gallery stuff here
-------------------------------------------------------------*/





/*-------------------------------------------------------------
	form stuff here
-------------------------------------------------------------*/

#main-content #body div.wpcf7 {
	border: 1px solid #D0CCB7;
	width: 440px;
	margin: 50px 0 0 0;
}

#main-content #body form.wpcf7-form{
	margin: 2px;
	background-color: #F7F7F2;
	padding: 10px;
}

#main-content #body form.wpcf7-form p{
	margin: 15px 0 15px 22px;
}
	
#main-content #body form.wpcf7-form input{
	margin: 5px 0 12px;
	padding: 6px;
	width: 350px;
}

#main-content #body form.wpcf7-form textarea{
	width: 350px;
	padding: 6px;
	font-family: Verdana,Arial,Helvetica,sans-serif;
}

#main-content #body form.wpcf7-form input.button, #main-content #body form.wpcf7-form #submit{
	margin:14px 0 0;
	padding:3px;
	width:140px;
}

#main-content #body form.wpcf7-form div.wpcf7-validation-errors{
	padding: 10px;
	color: #8E2B2B;
	font-weight: bold;
	background-color: #F7FF5E;
	border: 3px solid #8E2B2B;
}




/* ------------------------------------------------------------
    footer bits - serives and contact info etc
------------------------------------------------------------ */
#footer-content {width: 850px; margin: 0 auto;}
#footer-content li a {color: #FFF3C0; text-decoration: none;}

#footer-content li a:hover, #footer li a:active{text-decoration: underline;}

#footer-content ul#menu {float: left; margin-top: 22px;}

#footer-content ul#menu li{float: left; position: relative; margin-right: 50px;}
#footer-content ul#menu li ul li{float: left; position: relative; width: 120px;  margin-right: 0px;}

#footer-content ul#menu li ul li a, #footer ul#menu li ul li {color: #A3C972;}

#footer-content ul#menu li ul {position: absolute; width: 80px;}


#footer-content #custardfish {
	margin: 7px 0 0 0;
	float:left;
	clear: both;
	color: #A3C972;
	margin-top: 40px;
}

#footer-content #custardfish li {display: inline; margin-right: 30px;}
#footer-content #custardfish li a {color: #A3C972;}

#footer-content #social {
	float: right;
	text-align: right;
	margin-top: 22px;
}

#footer-content #copy {color: #A3C972; float: right;	margin-top: 40px;}

div.postmetadata_entry{color:#ddd;}
div.postmetadata_entry a {color:#ccc;}
div.postmetadata_entry a:hover{color:#999;}
