/* Bon Fete bonfeteparty.com screen style sheet	 */

/* ********************** */
/* -- site wide styles -- */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
	display: block;	/* new elements in html 5; set to block for older browsers */
}

body {
	font-family: helvetica, sans-serif;
	color: black;
	background-color: #dfb;
	margin: 0;
	padding: 50px;
	line-height: 1.3em;
}

@media screen and (max-device-width: 700px) and (min-device-width: 481px) {
	body {
		padding: 25px;
	}
}

@media screen and (max-device-width: 480px) {
	body {
		padding: 10px;
	}
}

/*
We want the text in the banner "Bon Fete Good Party"
to have the same padding as the rest of the page, but we
want the background color to go to the edge of the browser
window. So:
set a negative margin to pull the banner color to edge of browser window;
then add left and rt padding to match left and rt padding for body.
*/

/* Bon Fete Good Party banner */

footer>div {
	margin-left: -50px;
	margin-right: -50px;	
	padding-left: 50px;
	padding-right: 50px;
}

@media screen and (max-device-width: 700px) and (min-device-width: 481px) {
	footer>div {
		margin-left: -25px;
		margin-right: -25px;	
		padding-left: 25px;
		padding-right: 25px;
	}
}

@media screen and (max-device-width: 480px) {
	footer>div {
 		margin-left: -10px;
		margin-right: -10px;	
		padding-left: 10px;
		padding-right: 10px;
	}
}

footer > div > div {
	overflow: hidden;
}

footer > p > small {
	color: #896;
	background-color: #dfb;
}

header h1 {
	font-size: 150%;
	font-style: italic;
	color: #765;
	background-color: #dfb;
	border-top: 1px solid #896;
	margin-top: 0;
	padding-top: .5em;
}

section h1, h2, span.coName, .home section, fieldset legend {
	color: #737519;
	background-color: #dfb;
}

h1:target {
	color: #737519;
	background-color: #cc9;
}

hgroup h2 {
	margin: 0;
}

span.coName {
	font-size: 110%;
}

section h1 {
	font-size: 120%;
	margin-top: 2em;
	margin-bottom: .3em;
}

header + section h1 {
	margin-top: 1em;
}

section section h1 {
	font-size: 110%;
	margin-top: .4em;
	margin-bottom: .2em;
}

section section section h1 {
	font-size: 105%;
	margin-top: .2em;
	margin-bottom: .2em;
}

p + ul, p + ol {
	margin-top: .2em;
}

p, li	{
	max-width: 37em;
}

li {
	margin-bottom: .4em;
}

footer {
	clear: both;
}

address {
	margin-top: 2em;
}

address p {
	margin-top: 0;
	margin-bottom: 0;
}

.vcard span.fn {
	display: none;
}

label {
	color: #341;
	background-color: #dfb;
}

img {
	max-width: 95%;
}

@media screen and (max-device-width: 480px) {
	img {
		height: auto;
	}
	.tent {
		width: 100px;	
	}
	.rabbitHat2 {
		width: 90px;	
	}
	.clownJuggling {
		width: 120px;	
	}
	.clownBalloons {
		width: 110px;	
	}
	.hatGlass {
		width: 120px;	
	}

	.hat {
		width: 85px;	
	}
	.horn {
		width: 140px;	
	}
}

textarea {
	max-width: 99%;
}

/* Bon Fete Good Party banner */

footer>div {
	clear: both;
	line-height: 1.8em;
	color: #dfb;
	background-color: #896;
	font-family: Garamond, Georgia, Serif;
	font-size: 140%;
	font-weight: bold;
	text-transform: lowercase;
	word-spacing: .1em;
	white-space: nowrap;
}


/* -- anchor styles -- */


a:hover, a:focus {
	text-decoration: none;
	color: #03f;
	background-color: #896;
}

a:active {
	color: #a00;
	background-color: #ff9;
}


/* navigation */

nav > ul {
	margin-top: 3em;
	margin-left: 0;
	padding-left: 0;
	line-height: 1.8em;
}

nav > ul > li {
	display: inline;
	padding-right: .5em;
	font-size: 105%;
	white-space: nowrap;
}

@media screen and (max-device-width: 480px) {
	nav > ul {
		text-align: center;
	}
	nav > ul > li {
		font-size: 115%;
	}
}

@media screen and (min-device-width: 481px) {
	nav > ul > li {
		border-right: 1px solid #896;
		padding-left: .5em;
	}

	nav > ul > li:first-child {
		border-left: 1px solid #896;
	}

}



/* *************************** */
/* styles for individual pages */


/* home */

.home header h1 span { /* home page h1 is a repeat of text in graphic logo */
	display:none
}

.home section {
	margin-top: 4em;
	border-top: 1px solid #896;
	background-image: url("/graphics/confetti.gif");
}

.home > section>img {
	position: relative;
	top: -20px;
}

.home > section > hgroup > h1 {
	font-size: 120%;
	font-weight: bold;
}

.home > section > hgroup > h2 {
	font-size: 110%;
	margin-left: 2em;
}

@media screen and (min-device-width: 481px) {
	.home > section > hgroup > h2 {
		margin-left: 6em;
	}
}

.home > section > hgroup > h2 > img {
	vertical-align: bottom;
	padding-left: 1em;
}

.home > section > ul > li {
	display: inline-block;
	width: 12em;
}


/* catering */

.catering > p:first-of-type {
	max-width: 45em;
}

.catering > p > img {
	float: right;
	margin-left: 1em;
	margin-bottom: .5em;
}

.catering > aside > p {
	font-style: italic;
	font-size: 95%;
	padding-left: 2em;
}



/* children */

.children > ul > li {
	font-weight: bold;
	font-size: 95%;
}

.children > p > img {
	float: right;
	margin-top: 10px;
}

.children > ul + p {
	font-style: italic;
}


/* childrenThemes */

.childrenThemes > section > ul {
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
}

.childrenThemes > section > ul > li {
	display: inline-block;
	margin-right: 1em;
}

@media screen and (min-device-width: 481px) {
	.childrenThemes > section > h1#story + ul > li {
		width: 15em;
	}
	.childrenThemes > section > h1#general + ul > li {
		width: 10em;
	}
	.childrenThemes > section > h1#holiday + ul > li {
		width: 11em;
	}
}

.childrenThemes > section > h1#general {
	max-width: 42em;
}

.clownBalloons {
	float: right;
}

.childrenEnt > section > p {
	font-size: 95%;
	font-weight: bold;
	font-style: italic;
}

.childrenEnt > section > ul {	
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
}

.childrenEnt > section > ul > li {
	padding-left: 1em;
	text-indent: -1em;
}

.childrenEnt > section > ul > li > span {
	font-style: italic;
}

@media screen and (min-device-width: 481px) {
	.childrenEnt > section:first-of-type > ul > li {
		width: 12.5em;
		display: inline-block;
	}
	.childrenEnt > section > img.tent {
		position: relative;
		top: -258px;
		left: 139px;
	}
}

.childrenEnt > section > img {
	float: right;
}

.childrenEnt > section + section > img {
	float: right;
}

.childrenEntH h1#amusements + ul {
	padding-right: 150px;
	background-image: url(../graphics/tent_balloons.gif);
	background-repeat: no-repeat;
	background-position: bottom right;
	max-width: 33em;
}

.childrenEnt > section + section {
	border-bottom: 1px solid #896;
	max-width: 33em;
}

.partySites > img {
	float: right;
	margin-left: 10px;
}

.partySites>ul {
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
}

@media screen and (min-device-width: 481px) {
	.partySites>ul > li {
		width: 12em;
		display: inline-block;
	}
	.partySites > img {
		position: relative;
		top: -5em;
	}
}

/* -- contact -- */

@media screen and (min-device-width: 481px) {
	section.tel, section.tel > h1 {
		display: inline;
	}

	h1#fax {
		padding-left: 1em;
	}

}

.contact > section.adr {
	max-width: 28em;
}

.contact > section.adr > img {
	float: right;
}

.contact > section > form > fieldset {
	max-width: 33em;
	margin-bottom: 1em;
}

.contact > section > form > fieldset > p {
	max-width: 18.5em;
	text-align: right;
}

.contact fieldset + fieldset {
	padding-bottom: 20px;
}

.contact fieldset + fieldset p:last-child {
	white-space: nowrap;
	margin-bottom: 0;
}

.contact > section > form img {
	vertical-align: bottom;
	position: relative;
	bottom: -22px;
	left: -22px;
	z-index: -1;
}

.contact > section > form textarea {
	opacity: .8;
}

@media screen and (max-device-width: 480px) {
	.contact > section > form textarea {
		display: block;
	}
}

.sent th {
	text-align: right;
	padding-right: .5em;
	white-space: nowrap;
	font-weight: normal;
	color: #515307;
	background-color: #dfb;
}

.sent td p {
	margin-top: 0;
}

.sent tr:last-child th {
	vertical-align: top;
}


/* error pages */

.suggestUrl {
	font-size: 110%;
	border: 1px solid white;
	padding: .5em;
	margin: 2em 0;
	color: white;
	background-color: #765;
	width: 20em;
	max-width: 90%;
}



/* name */

.name > dl > dt {
	margin-top: 1em;
	counter-reset: definition;
}

.name > dl > dd {
	counter-increment: definition;
}

.name > dl > dd:before {
	content: counter(definition) ". " ;
}

.rabbit {
	max-width: 36em;
}

.rabbit > img {
	float: right;
	margin-left: 10px;
	margin-bottom: 10px;
}

@media screen and (min-device-width: 481px) {
	.rabbit > img {
		position: relative;
		top: -80px;
		margin-bottom: 0;
	}
}

@media screen and (max-device-width: 480px) {
	.rabbit > img {
		display: none;
	}
}

.name > aside {
	max-width: 36em;
	border-top: 1px solid #896;
	border-bottom: 1px solid #896;
	margin-top: 2em;
	margin-bottom: 2em;
}

.name > aside > p {
	font-size: 95%;
	max-width: 100%;
}

.name > aside + p {
	font-weight: bold;
}



/* party planning */

.planning > ul + p {
	clear: both;
	padding-top: 3em;
	font-style: italic;
}

.planning > ul:first-of-type > li {
	width: 14em;
	float: left;
	font-size: 95%;
}

@media screen and (max-device-width: 480px) {
	.planning > ul:first-of-type {
		margin-left: 0;
		padding-left: 0;
	}

	.planning > ul:first-of-type > li {
		display: inline;
		width: auto;
		float: none;
		margin-right: 1em;
	}
}

.planning > ul.touch {
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
}

@media screen and (min-device-width: 481px) {
	.planning > ul.touch > li:nth-child(n+3) {
		width: 19em;
		display: inline-block;
	}
	.planning > ul.touch > li:nth-child(n+12) {
		width: auto;
		display: block;
	}
}

@media screen and (max-device-width: 480px) {
	.planning > ul > li > div {
		float: none;
	}
}

.planning > ul > li > div {
	height: 11em;
	float: left;
	padding-top: 3em;
	width: 300px;
}

.planning > ul > li > div > img + img {
	position: relative;
	bottom: 68px;
	right: 20px;
}

.corporateEnt > ul, .corporateEnt > section > ul {
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
}

/* search */

.search {
	color: #000;
	background-color: #896;
	padding: .6em;
	display: table;
	border-radius: 0 20px 20px 0;
}

.advancedSearch > form {
	border-bottom-right-radius: 0;
}

.advancedSearch > form > fieldset > p > label {
	color: #000;
	background-color: #896;
}

.advancedSearch > section > ol > li > kbd {
	display: block;
	width: 18em;
	max-width: 90%;
	margin: .7em 0 .7em 2em;
	color: black;
	background-color: white;
	font-size: 120%;
	border: 1px solid black;
	padding: .4em;
}

.search legend {
	color: #fff;
	background-color: #896;
}

.advancedSearch fieldset p {
	margin-top: 0;
	margin-bottom: 0;
}

.google > form > img {
	vertical-align: middle;
}

.results > table td {
	vertical-align: top;
	padding-bottom: 1em;
}

.results > table td > p {
	margin-top: 0;
	margin-bottom: 0;
}

.results > table td > a {
	font-size: 110%;
}

.results > table td > small {
	color: #555;
	background-color: #dfb;
}

.results > table td > small > a {
	color: #555;
	background-color: #dfb;
	text-decoration: none;
}

/* wedding */

.wedding p img {
	float: right;
	margin-top: .5em;
	margin-bottom: .5em;
	margin-left: .5em;
}

.wedding>ul li {
	font-weight: bold;
}