/* site.css - specific styles for a particular web site */
/* site: www.joliejolie-uk.com */
/* created: 2008-08-09 - cgc aims */
/* modified: 2008-08-15 - cgc aims */

/* 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:
	E976AF									Jolie Jolie pink (h1.., th, corp. hover, footer) (RGB: 233, 118, 175)
	96A3C5	(1 - mauve grey)
	AEB8D2	(1 - medium mauve grey)
	C5CCDF	(1 - light mauve grey)			masthead background, middle border, full border
	DCE0ED	(1 - very light mauve grey)
	4E4850	(2 - brown grey)				p, active, footer text
	D3D3D3	(light grey)					cell top border for print and handheld media

	to change:
	1B9EDA	(bright blue)					link
	1D7BB6	(blue)							visited

	1. Macho digital
	2. Mellow
*/

/* 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: #000000;
	/* 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: #000000;
}

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

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

#middle {
	margin-left: 70px;
	margin-right: 70px;
	border: none;
	padding: 0px;
	background-color: #000000;
}

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

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


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

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

h1, h2, h3, h4, h5, h6 {
	background: none;
	color: #E976AF;
	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: #E976AF;
}

td {
	vertical-align: top;
}

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

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: #E976AF;
	border-bottom: none;
}

/* normal links */
a[href]		{ text-decoration: none; }
a:link		{ color: #1B9EDA; }
a:visited	{ color: #1D7BB6; }
a:hover		{ color: #E976AF; 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: #E976AF;
}

hr.foot {
	margin-left: 70px;
	margin-right: 70px;
	border-width: 1px;
	border-style: solid;
	border-color: #E976AF;
}

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

img	{ border: none; }

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

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


/* ----------  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>Jolie Jolie</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: #E976AF;
	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: #000000;
}

p.home {
	color: #FFFFFF;
}

.logo {
	color: #E976AF;
}

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

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

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

/*
a.home			{ text-decoration:	underline; }
a.home:link		{ color: #E976AF; }
a.home:visited	{ color: #E976AF; }
a.home:hover	{ color: #E976AF; text-decoration: underline; }
a.home:active	{ color: #E976AF; }

a.current {
	color: #FFFFFF;
	background-color: #E976AF;
}
*/

.menubar {
	background-color: #E976AF;
}

a.home			{ text-decoration:	none; }
a.home:link		{ color: #FFFFFF; }
a.home:visited	{ color: #FFFFFF; }
a.home:hover	{ color: #E976AF; background-color: #FFFFFF; }
a.home:active	{ color: #FFFFFF; }

a.current {
	color: #1D7BB6;
	background-color: #E976AF;
	text-decoration:	none;
}

/*
#order-by li{display:inline;margin:0 2px;}
#order-by button{text-align:center;}
#order-by button{color:#7598b5;background-color:#fff;border:1px solid #89a8c1;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;}
#order-by button:hover{background-color:#e9eff4;color:#496377;}
#order-by button.current,#order-by button.current:hover{background-color:#89a8c1;color:#fff;}
#order-by button{cursor:pointer;padding:8px 2px;width:12%;}
#order-by button.current,#order-by button.current:hover{cursor:default;}
*/

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

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


/* ----------  POWERPOINT LINKS  ---------- */

.apps {
	font-size: 130%;
	text-align: center;
}


}		/* 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 ----- */