/*
 * =======================
 * E D I T   H I S T O R Y
 * =======================
 * 
 * Date: 03/20/2009
 * Author: Z. Qi
 * Action: Create new file with existing TextBox and Button classes.
 *
 * Date: 03/23/2009
 * Author: Z. Qi
 * Action: Add background and v-menu classes.
 *
 */



/*
 *	Global Styles
 */

body
{
	font-family: Verdana, Geneva, Sans-serif, 宋体, 黑体;
	font-size: 14px;
	/*background: url("../Images/BgPage.gif");*/
	background-color: Silver;
}


table
{
	border-width: 0;
	border-collapse: separate;
	border-spacing: 0;
}


/* Toggle anchor tag text color on mouse hovering. 
a
{
	text-decoration: none;
	font-weight: bold;
	color: #777777;
}
a:hover
{
	text-decoration: underline;
	font-weight: bold;
	color: #5555FF;
}*/


/*
 *	ID Styles
 */

#navigation tr
{
	height: 24px;
	padding-top: 4px;
	padding-bottom: 4px;
}
#navigation td
{
	border-bottom: 1px solid Gold;
}
#navigation a
{
	font: 11px Verdana, Geneva, Sans-serif, 宋体, 黑体;
	font-weight: bold;
	color: #FFD700; /* Gold */
	line-height: 16px;
	letter-spacing: .1em;
	text-decoration: none;
	display: block;
	padding: 4px 0px 4px 16px;
}
#navigation a:hover
{
	/*color: #FFFFCC;*/
	color: yellow;
	background: url("../Images/BulletYellow.gif") 4px 50% no-repeat;
}
#navigation a:active, #navigation a:focus, /* IE does not implement :focus pseudo-classes */ .calendartextbox:active, .calendartextbox:focus, .watermarktextbox:active, .watermarktextbox:focus, .toggledropdownlist:active, .toggledropdownlist:focus
{
	color: Orange;
}
#navigation ul li a /* Sub-menu */
{
	font-size: 10px;
	line-height: 12px;
	padding: 0px 0px 8px 20px;
}
#navigation ul li a:hover
{
	/*color: #FFFFCC;*/
	color: yellow;
	background: url("../Images/BulletYellow.gif") 4px 30% no-repeat;
}

/* Popup pictures. */
#popuplogo {
	position: relative;
}
#popuplogo a img {
	border: 0;
}
#popuplogo a .popuppic {
	border: 0px;
	width: 0px;
	height: 0px;
}
#popuplogo a.popuptext, #popuplogo a.popuptext:visited {
	text-decoration: underline;
	color: Blue;
}
#popuplogo a.popuptext:hover {
	text-decoration: underline;
	color: Red;	
}
#popuplogo a.popuptext:hover .popuppic {
	border: solid 1px black;
	display: block;
	position: absolute;
	left: -404px;
	top: -26px;
	width: 400px;
	height: 400px;
}


/*
 *	Class Styles
 */

/* Backgrounds. */
.tableshadow
{
	padding-bottom: 2px;
	padding-left: 2px;
	padding-right: 2px;
	background: url("../Images/ShadowAlpha2.png");
}
.bordershadowleft, .bordershadowright
{
	width: 10px;
	padding: 0px;
	border: 0px;
	border-style: none;
	position: relative;
}
.bordershadowleft
{
	right: -1px;
	background: url("../Images/ShadowBorderLeft.png");
}
.bordershadowright
{
	left: -1px;
	background: url("../Images/ShadowBorderRight.png");
}
.bordercenter
{
	padding: 0px;
	border: 0px;
	border-style: none;
}
.tablebackground
{
	background-color: White;
	/*background: url("../Images/BgMain.jpg");*/
}
.headerbackground
{
	background: url("../Images/BgHeader.jpg");
}
.menubackground
{
	background-color: #D2691E;
	/*background: url("../Images/BgMenu.jpg");*/
}
.divpaypal
{
	background-image: url("../Images/PayPalGradient.gif");
}
.divannouncement
{
	background-image: url("../Images/AnnouncementGradient.gif");
}


/* Vertical ul menu. */
.v-menu
{
	border: solid 0px #7F9FBF;
	clear: both;
}
ul.v-menu, .v-menu li
{
	padding: 0;
	margin: 0;
	list-style: none;
}
ul.v-menu
{
	clear: both;
	margin-top: 0px;
	padding: 0px 10px;
}
.v-menu li a
{
	color: #555555;
	display: none;
	border-top: none;
	padding: 0px;
	text-decoration: none;
}
.v-menu li a:hover
{
	color: #999999;
}


/* Drop shadows*/

/* Paragraph shadow usage: http://www.alistapart.com/articles/cssdropshadows/

<div class="p-shadow">
 <div>
 <p>The rain in Spain ...</p>
 </div>
</div>

*/
.p-shadow
{
	width: 90%;
	float: left;
	background: url("../Images/ShadowAlpha.png") no-repeat bottom right !important;
	background: url("../Images/Shadow.gif") no-repeat bottom right;
	margin: 10px 0 0 10px !important;
	margin: 10px 0 0 5px;
}
.p-shadow div
{
	background: none !important;
	background: url("../Images/Shadow2.gif") no-repeat left top;
	padding: 0 !important;
	padding: 0 6px 6px 0;
}
.p-shadow p
{
	color: #777;
	background-color: #fff;
	font: italic 1em georgia, serif;
	border: 1px solid #a9a9a9;
	padding: 4px;
	margin: -6px 6px 6px -6px !important;
	margin: 0;
}

/* Image shadow usage: http://www.alistapart.com/articles/cssdropshadows/

<div style="width: 16px; padding-left: 16px"><!--important to have this warpper div-->
	<div class="img-shadow">
		<img src="cat.jpg" alt="test"/>
		<asp:Image ID="imgCampSched" runat="server" ImageUrl="~/Images/School/CampSchedule.gif"
			ToolTip="Summer Camp Sample Programs" />
	</div> 
</div> 

*/
.img-shadow
{
	float: left;
	background: url("../Images/ShadowAlpha.png") no-repeat bottom right !important;
	background: url("../Images/Shadow.gif") no-repeat bottom right;
	margin: 10px 0 0 10px !important;
	margin: 10px 0 0 5px;
}
.img-shadow img
{
	display: block;
	position: relative;
	background-color: #E6E6FA;
	border: 1px solid #A9A9A9;
	margin: -6px 6px 6px -6px;
	padding: 4px;
}


/* Toggle Button border and text colors on mouse hovering. */
.togglebutton, .gridviewbutton, .excelbutton
{
	border-color: Silver;
	color: inherit;
}
.togglebutton:hover, .gridviewbutton:hover, .excelbutton:hover
{
	border-color: Navy;
	color: Background;
}

/* Button with background image. */
.gridviewbutton, .excelbutton
{
	background-repeat: no-repeat;
	background-position: right;
	text-align: left;
	padding-left: 4px;
}

/* View GridView Button with background image. */
.gridviewbutton
{
	background-image: url("../Images/favicon.ico");
}

/* View Excel Button with background image. */
.excelbutton
{
	background-image: url("../Images/favicon.ico");
}


/* Toggle TextBox border and background colors on mouse hovering. */
.toggletextbox, .calendartextbox, .watermarktextbox, .toggledropdownlist
{
	border-style: solid;
	border-width: 1px;
	border-color: #7F9DB9;
	vertical-align: middle;
	color: inherit;
}
.toggletextbox:hover, .calendartextbox:hover, .watermarktextbox:hover, .toggledropdownlist:hover
{
	border-color: Navy;
	color: Background;
}
.toggletextbox:active, .toggletextbox:focus, /* IE does not implement :focus pseudo-classes */ .calendartextbox:active, .calendartextbox:focus, .watermarktextbox:active, .watermarktextbox:focus, .toggledropdownlist:active, .toggledropdownlist:focus
{
	border-color: Navy;
	background-color: #F0F0FF;
	color: Background;
}

/* TextBox with background image. */
.calendartextbox
{
	background-image: url("../Images/favicon.ico");
	background-repeat: no-repeat;
	background-position: right;
}

/* Watermarked TextBox. */
.watermarktextbox, .watermarktextbox:hover
{
	font-style: italic;
	color: Silver;
}


/* Toggle HyperLink font color on mouse hovering. */
.togglehyperlink
{
	border-style: hidden;
	color: #FFD700; /* Gold */
	text-decoration: none;
}
.togglehyperlink:hover
{
	color: Yellow;
	text-decoration: underline;
}
/*
.togglehyperlink:active
{
	color: Yellow;
}
*/

.togglehypcontact
{
	text-decoration: none;
	font-weight: bold;
	border-style: hidden;
	color: #777777;
}
.togglehypcontact:hover
{
	text-decoration: underline;
	color: #5555FF;
}
.togglehypcontact:active
{
	text-decoration: underline;
	color: Red;
}

.togglehyptext
{
	border-style: hidden;
	color: Blue;
	text-decoration: none;
}
.togglehyptext:hover
{
	color: Red;
	text-decoration: underline;
}
.togglehyptext:active, .togglehyptext:focus
{
	color: Blue;
	text-decoration: none;
}

.togglehypalbum
{
	border-style: hidden;
	color: #DD0000;
	text-decoration: none;
}
.togglehypalbum:hover
{
	color: #0000D0;
}


/* Toggle LinkButton text decoration on mouse hovering. */
.togglelinkbutton
{
	text-decoration: inherit;
}
.togglelinkbutton:hover
{
	text-decoration: underline;
}


/* Content Page contents */
.subhead
{
	font-size: 12px;
	font-weight: bold;
	line-height: 30px;
	text-indent: 24px;
	text-align: left;
	text-decoration: none;
}
.subtext
{
	font-size: 13px;
	line-height: 20px;
	text-indent: 0px;
	text-align: justify;
	text-decoration: none;
}


/* album image */
.album
{
	width: 372; /*bgimage width*/
	height: 269px; /*bgimage height*/
	background-repeat: no-repeat;
	vertical-align: top; 
	text-align: center; 
	padding-left: 5px; /*adjust pic position*/
	padding-top: 54px; /*adjust pic position*/
	line-height: 104px; /*spacing between pic and title*/
}