@charset "UTF-8";
/******************************************************* 

chinese-basic.css

Basic Style Sheet for Chinese Association Website
Website : 		www.chineseassociation.org.uk
Author : 		Yvonne Tsang
Last Updated : 	1 July 2008


** TABLE OF CONTENTS **
	
	Global Layout
	Typography
	Header Layout
	Menu
	Content Layout
	Side Bar Layout
	Footer Layout
	Corner Photos



********************************************************/



/* Global Layout
--------------------------------------------------------------------------------------- */
html { }
body {  background: #fff;
		text-align:center;
		}
#gradient {background: #fff url(../images/ray-gradient.gif) top left repeat-x;
			width: 100%;
		}		
#wrapper {margin: 0 auto;
          z-index: 30;
          padding:0;
		  width: 780px;
          position: relative;
		  background: #fff url(../images/ray-bg-m.gif) top center repeat-y;
          
          }
.more {text-align:right;
		clear:both;
		border-bottom: 1px dashed #99CCFF;
		padding: 2px 5px;}
		
table, td {border:1px solid #eee;}		
th p, td p {text-align:center; padding:5px 2px;}
.photo {margin: 10px 15px; float:right;}
.photo.big {margin: 15px 50px; float:none}
.column {width:50%; float:left;}


/* Typography
--------------------------------------------------------------------------------------- */		  
* {font-family : "Trebuchet MS", verdana, helvetica, arial, sans-serif;}
h1 {font-family : "Trebuchet MS", verdana, helvetica, arial, sans-serif; color:#fff; text-align:center; font-weight: normal;}
h3 {color:#000055; font-size: 1.3em; letter-spacing:0.09em;}
#content p, #sidebar p {font-family : verdana, helvetica, arial, sans-serif; font-size:1.2em;}

ul.list {list-style-type: disc; margin:15px; padding:0px; font-size:1.2em;}
ul.list li {margin:5px;}
ul.list ul {list-style-type: disc; margin: 5px 0 5px 25px; padding:0; font-size:1em;}

.rayments, a .rayments, .rayments em, a .rayments em, a:hover .rayments em {font-family : georgia, times, serif; font-weight: normal; text-decoration:none; font-style:normal; color:#022BA4;}
.rayments em, a .rayments em, a:hover .rayments   {color: #BF0014;}
.panel h2 .rayments, .panel h2 a .rayments  {color:#fff}

q, cite {color:#000055;
		margin: 20px 25px;
		 display: block; 
		 font-size: 1.5em;
		 line-height: 1.5em;}
q { background:url(../images/ray-ql.gif) top left no-repeat;}	
q:before, q:after	{display:none;}
q span {margin: 0; padding: 20px;
	 background:url(../images/ray-qr.gif) bottom right no-repeat;
	 display:block;}
cite {text-align: right;
		font-weight: bold;
		margin: -10px 25px 10px 25px;}

dl {font-size: 1.5em; margin:10px 0; padding:0;}
dl dt {font-weight: bold; color: #000099; 
				border-top: 1px solid #eee; 
				margin-top: 10px;
				padding-top: 10px}
dl dd {margin:0; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic;}
dl dd strong {color:#BB0000; clear:both; 
				display: block; 
				text-align: right;
				font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
				font-style:normal;
				font-size:1.2em;}
dl img {float: right; margin: 0 0 5px 5px}
.caption {
	font-size: 0.9em;
	color:#AA0000;
	font-style:italic;
	text-align:center;
}

/* Header Layout
--------------------------------------------------------------------------------------- */		
#header {
		  background: url(../images/ray-bg-tl.gif) top left no-repeat;
		  height: 547px;
		  margin:0;
		  margin-bottom: -390px;}
#header-r {
		  background: url(../images/ray-bg-tr.gif) top right no-repeat;
		  height: 547px;}  
#header-m {background:url(../images/ray-header1.jpg) top center no-repeat;height: 355px; }  

#header h1 {position: absolute;
			z-index:30; 
			top: 12px; left:250px;
			}
#header h1 a {display:block;
			  font-size:1.4em;
			  line-height:1em;
			  letter-spacing:0.02em;}			
#header h1 a span {color: #DD0000;
			  display:block;}
#header h1 a:hover {color:#000}
#header h1 a:hover span  {color:#000}

/* Menu
--------------------------------------------------------------------------------------- */
ul.menu      { font-size: 1.1em; padding:0;}
ul.menu li   {display: block;
                  float: left; }
ul.menu li a {display: block;
                  padding: 5px;
                  border-left: 1px solid #880000;}
ul.menu li a:hover {border-color: #007FC4;}   
ul.menu li.first a {border:none;}               

/* Main Menu */
ul.menu#mainmenu { 
					font-size:1.5em;
					letter-spacing:0.07em;
					z-index: 20;
			position:relative;
					float:none;
					text-align:center;}
ul.menu#mainmenu li {float:none;}
ul.menu#mainmenu li a {color:#000066; 
					background:#CCD0E3;
						padding: 5px 10px;
						border-left:none;
						border-bottom:1px solid #000066;
						z-index:10;}
ul.menu#mainmenu li a:hover {background: #FFCCFF; 
							 border-color: #FFf;
							 color:#BB0000;}
							 
h1#carlogo {z-index: 30;
			position:absolute;
			top:155px; left:525px;
			xleft:-25px;
			margin:0px;
			padding:0;}
h1#carlogo a {border:none; text-indent:-9999px;
								background:url(../images/rayments-menu.png) 0 0 no-repeat;
								width:268px ; height: 163px;
								display:block;
								margin: 0 1px 1px 0;}
h1#carlogo a:hover {margin: 1px 0 0 1px;}								
ul.menu#mainmenu li.first {z-index: 20}
ul.menu#mainmenu li.first a {padding-top: 50px; margin-top:105px;xmargin-top:-50px;}
ul.menu#mainmenu li.active a {background: #FFCCFF; color:#b00; font-weight:bold; font-size:1.1em;}
ul.menu#mainmenu li.active a:hover {background: #aa0000; color:#ccd0e3; font-weight:bold; font-size:1.1em;}

/* Info Menu */
ul.menu#infomenu { position:absolute;
					top:5px;; right:20px;
					z-index: 20;}
ul.menu#infomenu li a {color:#dbe9c8; border-color:#dbe9c8; padding:1px 5px;}					
ul.menu#infomenu li a:hover {color:#fff; border-color:#fff;}					
					
					
/* Content Layout
--------------------------------------------------------------------------------------- */
#content {width: 500px; float:left;
		  margin-left: 30px;
		  color:#222222}


/* Side Bar Layout
--------------------------------------------------------------------------------------- */
#sidebar {width: 200px; float:right;
		  margin-right: 30px;
		  margin-bottom:262px;}
		 
#sidebar .panel {background-color: #EDD1D1;
				 border: 5px solid #fff;
				 margin-top:20px;}		 
#sidebar .panel h2, #sidebar .panel h3, #sidebar .panel p	{margin: 0px; padding:10px;}
#sidebar .panel h2 {background:#BF0014; border-bottom:5px solid #fff; color:#fff; font-size:1.2em;}

#sidebar .panel.blue { background-color: #CCD0E3; color:#353D73}
#sidebar .panel.blue  h2 {background-color: #022BA4; color:#fff}
#sidebar .panel.border { 
	background:#FFFFFF;
	border:2px solid #BB0000;}	
#sidebar .panel.border#pupils img {width: 190px;}

/* Footer Layout
--------------------------------------------------------------------------------------- */
#footer {background: #fff url(../images/ray-bg-b.gif) bottom center no-repeat;}
#footer p { margin-left:30px;
					width: 250px;
					clear:both;}
#footer ul.menu {float:right; margin-right:30px;
					width: 400px;
					position:relative;
					z-index:20;}
#footer ul.menu li {float: right}		  


/* Corner Photos
--------------------------------------------------------------------------------------- */
#header .cphoto {width: 262px; height: 187px;
		 top:-1px; left:-15px;
		 margin-bottom:-210px;
		 position:relative;
		 xborder: 1px solid red;
		 background: url(../images/ray-photo1.png) top left no-repeat;
		 z-index:40;}
.cphoto2 {width: 262px; height: 187px;
		 top:0px; left:540px;
		 margin-top:-190px;
		 margin-bottom:-0px;
		 position:relative;
		 xborder: 1px solid red;
		 background: url(../images/ray-photo2.png) top left no-repeat;
		 z-index:40;}		 

.skip {padding: 5px;
		font-size:1.2em;
		border-bottom:1px solid #000044;
		background:#eee;	
}