/* site.css - specific styles for a particular web site */
/* site: jordanconsulate.org.hk */
/* created: 2008-09-11 */
/* modified: 2008-09-11 */

/* cgc todo:
	- style sheet for pda's: @media handheld - complete, but display menu as list
	- ok: remove some images from print media (i.e. header) - see fir below: works
	- markup for boxes and menus if style sheets not used, so that they display nicely
	- complete colours
*/

/* colours:
	8e3b35	(brown)							h1.., th, corp. hover, footer
	decbb5	(sandy colour)					page background, masthead background, middle border, full border
	8e3b35	(brown)							p, active, footer text
	D3D3D3	(light grey)					cell top border for print and handheld media
	8d4c00	(brownish)						link
	bc9a6d	(light brown)					visited

*/

/* languages:
	- default lang is 'en'
	- defined 'zh' lang, but not 'zh-tw' (zh-hant), nor 'zh-cn' (zh-hans)
	- ref: http://www.w3.org/International/questions/qa-css-lang
	- :lang does not work in IE
	- todo: check :lang font size in .grid (no Chinese text yet to test)
*/


/* hide message that will display on older browsers that do not support style sheets */
.ahem	{
	display: none;
}


/* ====================  MEDIA SCREEN  ==================== */
@media screen {


html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}

body {
	padding-bottom: 20px;
	background-color: #decbb5;
	/* background-image: url(images/gradbg.png); */
	/* background-repeat: repeat-x; */
}


/* ----------  LAYOUT  ---------- */

#container {
/* nothing */
}

#masthead {
	margin-top: 0;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1px;
	padding-bottom: 0;
	text-align: center;
	background-color: #decbb5;
}

#left {
	width: 190px;
	margin-left: 10px;
	padding-top: 25px;
	float: left;
	display: inline; /* floats are handled as block elements, this is to fix a margin collapsing bug in IE */
}

#right {
	width: 190px;
	margin-right: 10px;
	padding-top: 25px;
	float: right;
	display: inline; /* floats are handled as block elements, this is to fix a margin collapsing bug in IE */
}

#middle {
	margin-left: auto; /* 212px; */
	margin-right: auto; /* 212px; */
	border: none;
	padding: 0px;
	background-color: #decbb5;
}

#footer {
	margin-top: 20px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 0;
	padding: 20px;
	clear: both;
}

#full {
	border: thin dotted #C5CCDF;
	padding: 20px;
	background-color: #decbb5;
}


/* ----------  PRESENTATION  ---------- */

abbr, acronym {
	cursor: help;
	letter-spacing: normal;
}

h1, h2, h3, h4, h5, h6 {
	background: none;
	color: #8e3b35;
	font-family: "Trebuchet MS", "Times New Roman", Times, Serif;
	font-weight: normal;
}

h1:lang(zh-tw), h2:lang(zh-tw), h3:lang(zh-tw), h4:lang(zh-tw), h5:lang(zh-tw), h6:lang(zh-tw) {
	font-family: PMingLiU, MingLiU, "Trebuchet MS", "Times New Roman", Times, Serif;
}

h1:lang(zh-cn), h2:lang(zh-cn), h3:lang(zh-cn), h4:lang(zh-cn), h5:lang(zh-cn), h6:lang(zh-cn) {
	font-family: SimSum-18030, SimHei, "Trebuchet MS", "Times New Roman", Times, Serif;
}

th {
	font-family: Verdana, Arial, Helvetica, Sans-Serif;
 	font-size: 84%;
 	color: #EB1602;
}

td {
	vertical-align: top;
}

p, li, td {
	font-family: Verdana, Arial, Helvetica, Sans-Serif;
 	font-size: 84%;
 	color: #4E4850;
}

p:lang(zh), li:lang(zh), td:lang(zh), th:lang(zh) {
	font-size: 100%;
}

p:lang(zh-tw), li:lang(zh-tw), td:lang(zh-tw), th:lang(zh-tw) {
	font-family: PMingLiU, MingLiU, Verdana, Arial, Helvetica, Sans-Serif;
}

p:lang(zh-cn), li:lang(zh-cn), td:lang(zh-cn), td:lang(zh-cn) {
	font-family: SimSum-18030, SimHei, Verdana, Arial, Helvetica, Sans-Serif;
}

/* text colour of corporate words */
.corp {
	color: #EB1602;
	border-bottom: none;
}

/* normal links */
a[href]		{ text-decoration: none; }
a:link		{ color: #8d4c00; }
a:visited	{ color: #bc9a6d; }
a:hover		{ color: #EB1602; text-decoration: underline; }
a:active	{ color: #4E4850; }

a.ext {
	/* i.e. <a href="http://www.link.com" title="title" class="ext">External link here</a> */
	background: url(images/extlink.png) right center no-repeat;
	padding-right: 12px;
}

/* footer */
.footerText {
	font-size: 70%;
	text-align: center;
	color: #4E4850;
	padding: 5px;
}

.footerText:lang(zh) {
	font-size: 84%;
}

/* note: set hr style as below so it can display colour in Firefox (http://www.computergripes.com/firefoxsites.html) */
hr.foot {
	color: #EB1602;
}
hr.foot {
	margin-left: 212px;
	margin-right: 212px;
	border-width: 1px;
	border-style: solid;
	border-color: #EB1602;
}

a.foot			{ text-decoration:	none; }
a.foot:link		{ color: #EB1602; }
a.foot:visited	{ color: #EB1602; }
a.foot:hover	{ color: #EB1602; text-decoration: underline; }
a.foot:active	{ color: #EB1602; }

img	{ border: none; }

img.left-floating {
	float: left;
	margin-top: 0;
	margin-right: 20px;
	margin-bottom: 10px;
	margin-left: 0;
	clear: left;
}

img.right-floating {
	float: right;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 10px;
	margin-left: 20px;
	clear: right;
}

img.centred {
	float: none;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
	display: block;
	clear: both;
}


/* ----------  BOXES  ---------- */

h1.g, h2.g, h3.g, h4.g, h5.g, h6.g {
	margin: 0;
	padding-bottom: 2px;
	color: #314F80;
	text-align: center;
}

h1.o, h2.o, h3.o, h4.o, h5.o, h6.o {
	margin: 0;
	padding-bottom: 2px;
	color: #FF9900;
	text-align: center;
}

h1.p, h2.p, h3.p, h4.p, h5.p, h6.p {
	margin: 0;
	padding-bottom: 2px;
	color: #803176;
	text-align: center;
}

h1.r, h2.r, h3.r, h4.r, h5.r, h6.r {
	margin: 0;
	padding-bottom: 2px;
	color: #803931;
	text-align: center;
}

h1.cs, h2.cs, h3.cs, h4.cs, h5.cs, h6.cs {
	margin: 0;
	padding-bottom: 2px;
	color: #96A3C5;
	text-align: center;
}

.boxg {
	display: block;
	background: #FFFFFF;
	border: medium outset #314F80;
	position: relative;
	padding: 5px;
	margin: 1em 0;
}

.boxo {
	display: block;
	background: #FFFFFF;
	border: medium outset #FF9900;
	position: relative;
	padding: 5px;
	margin: 1em 0;
}

.boxp {
	display: block;
	background: #FFFFFF;
	border: medium outset #803176;
	position: relative;
	padding: 5px;
	margin: 1em 0;
}

.boxr {
	display: block;
	background: #FFFFFF;
	border: medium outset #803931;
	position: relative;
	padding: 5px;
	margin: 1em 0;
}

.boxcs {
	display: block;
	background: #FFFFFF;
	border: medium outset #96A3C5;
	position: relative;
	padding: 5px;
	margin: 1em 0;
}

/* note: set hr style as below so it can display colour in Firefox (http://www.computergripes.com/firefoxsites.html) */
hr.g {
	color: #314F80;
}
hr.g {
	border-width: 1px;
	border-style: solid;
	border-color: #314F80;
}

hr.o {
	color: #FF9900;
}
hr.o {
	border-width: 1px;
	border-style: solid;
	border-color: #FF9900;
}

hr.p {
	color: #803176;
}
hr.p {
	border-width: 1px;
	border-style: solid;
	border-color: #803176;
}

hr.r {
	color: #803931;
}
hr.r {
	border-width: 1px;
	border-style: solid;
	border-color: #803931;
}

hr.cs {
	color: #96A3C5;
}
hr.cs {
	border-width: 1px;
	border-style: solid;
	border-color: #96A3C5;
}

p.g, li.g, td.g, p.o, li.o, td.o, p.p, li.p, td.p, p.r, li.r, td.r, p.cs, li.cs, td.cs {
 	font-size: 72%;
}

p.g:lang(zh), li.g:lang(zh), td.g:lang(zh), p.o:lang(zh), li.o:lang(zh),
td.o:lang(zh), p.p:lang(zh), li.p:lang(zh), td.p:lang(zh), p.r:lang(zh),
li.r:lang(zh), td.r:lang(zh), p.cs:lang(zh), li.cs:lang(zh), td.cs:lang(zh) {
 	font-size: 84%;
}


/* ----------  IMAGE REPLACEMENT  ---------- */

	/* e.g.		<h2 id="firHeader"><span>Lili K Rock</span></h2> */

#firHeader {
	background-image: url(images/csheader.png);
	background-repeat: no-repeat;
	background-position: center top;
	/* width: 540px; - if include, will not centre in Firefox, though it does in IE */
	height: 80px;
}

#firHeader span {
	display: none;
}


/* ----------  GRID  ---------- */

.grid {
	width: 96%;
	background-color: #FFFFFF;
	padding: 10px;
	float: left;
}

.grid .cell {
	float: left;
	margin: 5px;
	width: 156px;
	text-align: center;
	border: solid 1px #C5CCDF;
}

.grid .cell .image {
	/* width: 150px; */
	/* height: 150px; */
	margin: 3px;
}

.grid .text {
	text-align: center;
	width: 156px;
	font-family: Verdana, Arial, Helvetica, Sans-Serif;
 	font-size: 84%;
 	color: #4E4850;
	padding-top: 7px;
	padding-bottom: 7px;
	margin-top: 10px;
}

.grid .header {
	border-bottom: solid 1px #C5CCDF;
	text-align: center;
	width: 156px;
	font-family: Verdana, Arial, Helvetica, Sans-Serif;
 	font-size: 84%;
	font-weight: bold;
	color: #EB1602;
	padding-top: 7px;
	padding-bottom: 7px;
	margin-top: 10px;
}

.grid .footer {
	border-top: solid 1px #C5CCDF;
	text-align: center;
	width: 156px;
	font-family: Verdana, Arial, Helvetica, Sans-Serif;
 	font-size: 84%;
	/* color: #C5CCDF; */
	padding-top: 7px;
	padding-bottom: 7px;
	margin-top: 10px;
}


/* ----------  DOCUMENTATION  ---------- */

pre.doc {
	background: #ffffeb;
	border: 1px solid #eec;
	padding: 0.9ex 0.9em;
	margin: 1ex 0;
	line-height: 120%;
}

div.doc {
	font: 100% serif;
	background: #ffffff;
	border: 1px dashed #dcb;
	padding: 1px 0.9em;
	margin: 1ex 0;
	line-height: normal;
}


/* ----------  FRONT PAGE  ---------- */

#home {
	text-align: center;
	background-color: #decbb5;
}

.title {
	text-align: center;
}

p.home {
	color: #FFFFFF;
}

.logo {
	color: #8e3b35;
}

.font200 {
	font-size: 200%;
	color: #8e3b35;
}

.font120 {
	font-size: 120%;
	color: #8e3b35;
}

.font80 {
	font-size: 80%;
	color: #8e3b35;
}

a.home			{ text-decoration:	underline; }
a.home:link		{ color: #8e3b35; }
a.home:visited	{ color: #8e3b35; }
a.home:hover	{ color: #8e3b35; text-decoration: underline; }
a.home:active	{ color: #8e3b35; }

a.current {
	color: #FFFFFF;
	background-color: #8e3b35;
}

#flashcontent {
	float: left;
	width: 600px;
	height: 600px;
	color: #decbb5;
	background-color: #FFFFFF;
}

/* table 1 */

table.layout1 {
	border-spacing: 0px;
	border-collapse: collapse;
	background: #F9F5D7;
	border: 0.3em solid #8e3b35;
	margin-left: auto;
	margin-right: auto;
}

table.layout1 td {
    border: 0px;
    border-bottom: 1px dotted #8e3b35;
    padding: 0.3em 0.8em;
}

table.layout1 td.odd {
    background: #E8E4C0;
}


}		/* end media screen */



/* ====================  MEDIA PRINT  ==================== */
@media print {

* {
	/* print all elements as black on white with a serif font */
	background-color: #FFFFFF;
	color: #000000;
	font-family: Georgia, "Times New Roman", Times, serif;
}

th {
 	text-align: left;
 	text-decoration: underline;
}

td {
	vertical-align: top;
}

p, li, td, th, .grid {
	font-size: 12px;
}

pre {
	font-size: 10px;
}

a[href] {
	text-decoration: none;
}

#middle a[href]:after {
	color: #999999;
	background: transparent;
	font-weight: normal;
	text-decoration: underline;
}

#middle a[href]:after {
	/* display url after each link - for CSS2 browsers only; and for the middle content only) */
	content: " (" attr(href) ") ";
	font-size: 90%;
}

#container {
	/* flow printable area */
	width: auto;
	border: 0;
	margin: 0 5%;
	padding: 0;
	float: none !important;
	background: transparent none;
}

#menu, .boxg, .boxo, .boxp, .boxr, .boxcs, .hideprint {
	/* hide */
	display: none;
}

.grid .cell {
	margin-top: 10px;
	border-top: solid 1px #D3D3D3;
}


}		/* end media print */



/* ====================  MEDIA HANDHELD  ==================== */
@media handheld {

* {
	/* print all elements as black on white with a serif font */
	background-color: #FFFFFF;
	color: #000000;
	font-family: Georgia, "Times New Roman", Times, serif;
}

th {
 	text-align: left;
 	text-decoration: underline;
}

td {
	vertical-align: top;
}

p, li, td, th, .grid {
	font-size: 100%;
}

pre {
	font-size: 100%;
}

/*
a[href] {
	text-decoration: none;
}
*/

#container {
	/* flow printable area */
	width: auto;
	border: 0;
	margin: 0 5%;
	padding: 0;
	float: none !important;
	background: transparent none;
}

.boxg, .boxo, .boxp, .boxr, .boxcs {
	/* hide */
	display: none;
}

.grid .cell {
	margin-top: 10px;
	border-top: solid 1px #D3D3D3;
}


}		/* end media handheld */


/* ----- end ----- */