/* CSS Document - Children Art Foundation */

#wrapper {width: 778px; height: 100%; background-color:#FFFFFF; margin: 0 auto; padding: 0px;}
#popup { width:450px; padding: 10px; float:left; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: black; line-height: 200%; background-color: #FFFFFF; /* Color of Background Content within the page #DEDEDE */
		color:#black; }  /* ----------- Content Font Color ------------ */}

/*---------------------------------------------TOP MENU BAR ------------------------------------------------*/
.preload1 {background: url(images/six_0a.gif);} /* Top menu background */
.preload2 {background: url(images/six_1a.gif);}

/*---- Top Menu - Normal Stage------*/
#nav {padding:0; margin:0; list-style:none; height:38px; background:#fff url(images/six_0.gif) repeat-x; position:relative; z-index:200; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left;}
#nav li a.top_link {display:block; float:left; height:28px; line-height:30px; color:white; text-decoration:none; font-size:12px; font-weight:bold; padding:0 12px 0 12px; cursor:pointer;background: url(images/six_0.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:28px; background: url(images/six_0.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(images/six_0.gif) no-repeat right top;} /* don't change the height. Otherwise they can't slide properly.*/

/*---- Top Menu - Hover Stage-------*/
#nav li:hover a.top_link, #nav a.top_link:hover
{color:black; background: url(images/six_1.gif) no-repeat;}

#nav li:hover a.top_link span, #nav a.top_link:hover span
{background:url(images/six_1.gif) no-repeat right top;}

#nav li:hover a.top_link span.down, #nav a.top_link:hover span.down
{background:url(images/six_1a.gif) no-repeat right top; padding-bottom:3px;}

#nav table {border-collapse:collapse; padding:0; margin:0; position:absolute; left:0; top:0; } 

#nav li:hover {position:relative; z-index:200;}
#nav a:hover {position:relative; white-space:normal; z-index:200;}

#nav :hover ul.sub
{left:0px; top:38px; background: #BBFFFF; padding:4px; white-space:nowrap; width:260px; height:auto; z-index:300; border: 1px solid #CCC }/*-- Change submenu property/color --*/

#nav :hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:260px; font-weight:normal;}

#nav :hover ul.sub li a
{display:block; font-size:12px; height:20px; width:260px; line-height:20px; text-indent:5px; color:#000; text-decoration:none;}

#nav :hover ul.sub li a:hover 
{background:yellow; color:black;} /* Control the submenu style */

#nav li b {display:block; font-size:13px; font-weight: bold; height:18px; width:155px; line-height:20px; margin-bottom:3px; 
text-indent:3px; color:blue; border-bottom:2px solid #00DD00; cursor:default;} /* control the property of the submenu heading */

#nav a:hover a:hover ul,
#nav a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover a:hover ul
{left:89px; top:-4px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:245px; z-index:400; height:auto;}

#nav ul, 
#nav a:hover ul ul,
#nav a:hover a:hover ul ul,
#nav a:hover a:hover a:hover ul ul,
#nav a:hover a:hover a:hover a:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover > ul
{left:230px; top:-4px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:230px; z-index:400; height:auto;}
#nav li:hover > ul ul 
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

*/-------------------------------------------END OF TOP MENU BAR ------------------------------------------------*/

body{
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 12px; color: black; line-height: 140%;
		background-color: white;
		margin:0; padding:0; }

div, h1, h2, h3, h4, h5, h6, form, label, input, span, ul, li, p, a {
	margin:0;
	padding:0;
}

a { text-decoration:none; color: #09F;} /*---- original color #33F ---*/
a:hover { text-decoration:underline; color: #6C0; }

b1 { color:#003366; font-weight: bold; font-size:14px;}
b2 { color:#666; font-weight: bold; font-size:13px;}
b3 { color:#3C0; font-weight: bold; }

ul { list-style:none;}

.spacer{ font-size:0; line-height:0; clear:both;}


/* ----------------- top navigation start --------------------- */

#menucaf {
		width:778px; position:relative;
		padding:0; margin:0 0 0 0; }

/* ----------------- body start --------------------------- */
#body{
		width:778px; margin:0 auto; position:relative; 
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 10px/12px; color: black;
		margin:0; padding:0; }

#content {
		width:740px; padding:18px 20px; float:left;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 12px; color: black; line-height: 140%;
		background-color: #EBEBEB; /* Color of Background Content within the page #DEDEDE */
		color:#black; }  /* ----------- Content Font Color ------------ */
		
/*---------------------Button---------------------------*/		
#button{
	float:left;
   	width:92px;
   	margin:10px 0px 10px 0px;
   	display: inline-block;
   	padding: 5px 5px 5px 10px;
	color: #FF0;
 	background-color: #ffb515;
 	text-decoration: none;
 	font-weight: bold;
 	line-height: 1.2;
 	-moz-border-radius: 8px;
 	-webkit-border-radius: 7px;
	-moz-box-shadow: 0 1px 3px #999;
	-webkit-box-shadow: 0 1px 3px #999;
}

#button1{
	float:left;
   	width:170px;
   	margin:10px 0px 10px 0px;
   	padding: 5px 10px 5px 15px;
 	background-color: #CCF;
 	text-decoration: none;
 	line-height: 1.2;
 	-moz-border-radius: 5px;
 	-webkit-border-radius: 7px;
	-moz-box-shadow: 0 1px 3px #999;
	-webkit-box-shadow: 0 1px 3px #999;
}

#button2{
	float:left;
	position:relative;
   	width:183px;
   	margin:5px 0px 0px 0px;
   	display: inline-block;
   	padding: 5px 0px 5px 69px;
	color: #FFF;
 	background-color: #3F6;
 	text-decoration: none;
 	font-weight: bold;
 	line-height: 2.5;
 	-moz-border-radius: 7px;
 	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 1px 4px #999;
	-webkit-box-shadow: 0 1px 4px #999;
}

/* ----------------- footer --------------------------- */

#footer{
		clear:both;
		position:relative; margin:0 auto; width:778px;}
#footer ul{
		float:left;padding:4px 8px;}
#footer ul li{
		float:left; background-color:white;
		font:normal 12px/14px Arial, Helvetica, sans-serif;}
#footer ul li a{
		color:grey; background-color:white; padding:0 8px; text-decoration:none;
		font:normal 12px/14px Arial, Helvetica, sans-serif;}
#footer p{
		color:grey; background-color:white; padding:4px 8px; float:right;
		font:normal 12px/14px Arial, Helvetica, sans-serif;}


/* ----------------- Header Styles --------------------------- */
h1 {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 13px; font-weight: bold; color: black;
		text-decoration: underline; } 

h2 {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 14px;font-weight: bold;color: #666666; }

h3 {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 16px;font-weight: bold;color:  #0198E1; }

h4 {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 13px; font-weight: bold; color: #666;
		text-decoration: underline; }
		
h5 {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 14px;font-weight: bold;color: #666; }

h6 {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 16px;font-weight: bold;color:  #0198E1; 
		text-align:center;}

/* ----------------- Map------------------------- */
#caf_map { float:left; margin:5px 0 0 35px; }

/* ----------------- Program Table ----------------*/
#programs { float: left; margin: 0 0 0 50px; }

/* ---------------- Site Map ------------------------------- */
#menu_aboutus {
		width: 778px;
		text-decoration: none;
		margin: 0 0 0 0;
		padding: 0px 0px;}

/* -----------------email or print this page ------------------ */
#emailprint {
	float: right;
	margin:0px 0px 0 10px;
	width:auto;
	height: 20px;
	border-bottom:1px solid yellow;
}

/*------Calendar Icon on Press Releases page---*/
#calendar-icon {
	text-align:center;
	font-size:11px;
}

.calendar-day {
	float: left;
	margin: 0 10px 0 0;
  	width: 42px;
  	height: 45px;
  	background: url(images/calendar.gif) 
}

/*---------------- Auction Item Listing-------------*/
#auctionitems 

a img { border:none;}  */---Ged rid of the border of the image with link---*/

/*---------------- Right/Left box ------------------*/

#left {
	float:left;
	width:200px;
	margin-left:25px;
	padding: 0px 10px 10px 0px;
	display:inline;
}

#right {
	float:right;
	width:140px;
	padding: 20px 20px 20px 20px;
	border: 2px solid white ; /* -- Color of the vertical bar in the content section --*/
}

/* --------------Paypal Button --------------*/
#paypal {
		float: right;
		width: 100%;
		height: 100%;
}

/*------------------Google Checkout ----------------------*/
#googlecheckout {
	float: leftt;
	margin: 0px 10px 0px 60px;
	padding: 5px;
	width: 250px;
	background: #FFFFFF;
}

/*---------- Content Box ------------------------*/
#leftbox  {
	float:left;
	width: 440px;
	padding: 5px 0px 0px 10px;
	margin: 5px 0px 0px 5px;
	background-color:#FFF;
	border: 1px solid #CCC;
}
	
#rightbox {
	width: 245px;
	height: auto;
	position: absolute;
	margin: 0px 0px 0px 480px;
	padding: 5px 15px 0px 15px;
	text-align:left;
	background-color: #EBEBEB;
}

#rightboxevent {
	width: 280px;
	height: 265px;
	position: absolute;
	left: 2px;
	top: 53px;
	margin: 0px 0px 0px 450px;
	padding: 10px 5px 10px 15px;
	text-align:left;
	background-color: white;
}

#leftbox_1  {
	float:left;
	width: 680px;
	padding: 5px 10px 10px 10px;
	margin: 5px 0px 12px 20px;
	background-color:#FFF;
	border: 1px solid #CCC;
	font-size:12px;
	line-height: 1.6em;
}

#leftbox_2  {
	float:left;
	width: 450px;
	padding: 5px 5px 0px 10px;
	margin: 5px 0px 0px 0px;
	background-color:#FFF;
	border: 1px solid #CCC;
	font-size:12px;
	line-height: 1.6em;
}

#imgbox {
	width: 230px;
 	position: relative;
	float:left;
	clear:both;
	padding:10px;
	margin: 5px 5px 0px 0px;
	background-color:#FFF;
	font-size:11px;
	line-height:130%;
	border: 1px solid #CCC;
}

#imgbox_noline {
	width: 230px;
 	position: relative;
	float:left;
	clear:both;
	padding:10px;
	margin: 5px 5px 0px 0px;
	font-size:11px;
	line-height:130%;
}

#footnote{
	float:left;
	width: 720px;
	padding: 5px;
	margin-left: 10px;
	border: 0px;
	font-size:11px;
}

/*-------------- Print Text only ------------------*/
.printtext {display: none;}


/*------------------ Images Style --------------------- */

#imgstyleround{
	float:left;
	position:relative;
   	width:450px;
	height:25px;
   	padding: 5px;
	color: #FFF;
 	background-color: #CCC;
 	font-weight: bold;
	text-align:center;
 	-moz-border-radius: 7px;
 	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 1px 4px #999;
	-webkit-box-shadow: 0 1px 4px #999;
}

/* button in main gallery page*/
#imgstyleround2{
	float:left;
	position:relative;
   	width:200px;
	height:230px;
   	margin:0px 0px 5px 0px;
   	display: inline-block;
   	padding: 10px;
 	background-color: #FF0;
 	text-align:center;
 	-moz-border-radius: 7px;
 	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 1px 4px #999;
	-webkit-box-shadow: 0 1px 4px #999;
}

/* Polaroid imagage background */
#imgstylepolaroid { 
	float:left;
	position:relative;
   	width:150px;
	height:125px;
   	display: inline-block;
   	padding: 10px;
 	background-color: #F7F7F7;
 	text-align:center;
	-moz-border-radius: 6px;
 	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 1px 4px #999;
}