/*
 ========================================================================
 
    COPYRIGHT			: Copyright(C) 2010   
    VERSION				: 1.0.0 
    CREATED				: 24 OCT 2009
    MODIFIED			: 08 AUG 2010
    DESIGNER			: Daniel C. K. Tan
    DESIGNER URI		: http://www.danielck.net 
    
    FILE: /global/styles/typography.css
	TYPE: CSS File
	DESCRIPTION: Website typography global CSS framework
				 Based on JA_Purity by Joomlart.com
	   
   ======================================================================== 
*/

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
/* BASE */
/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

body {
	background-color: #666666;
	font:normal 75.5%/1.4 arial, helvetica, verdana, sans-serif;
}


/* 
------------------------------------------------------------------------*/

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
/* HEADINGS */
/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

h1, h2, h3, h4 {
     margin: 0 0 5px 0;
     padding: 0;
     letter-spacing: -1px;
}

h1 { font-size: 2em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.6em; }
h4 { font-size: 1.4em; }
h5 { font-size: 1.1em; }


/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
/* SPECIAL CONTENT */
/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

p.warn {
    background: #FBEEF1 url(../images/warn.png) center no-repeat;
    background-position: 15px 50%; /* x-pos y-pos */
    text-align: left;
    padding: 5px 20px 5px 45px;
    border-top: 2px solid #FEABB9;
    border-bottom: 2px solid #FEABB9;
}

p.alert {
    background: #FFF7C0 url(../images/exc.png) center no-repeat;
    background-position: 15px 50%; /* x-pos y-pos */
    text-align: left;
    padding: 5px 20px 5px 45px;
    border-top: 2px solid #F7D229;
    border-bottom: 2px solid #F7D229;
}

p.info {
    background: #F8FAFC url(../images/info.png) center no-repeat;
    background-position: 15px 50%; /* x-pos y-pos */
    text-align: left;
    padding: 5px 20px 5px 45px;
    border-top: 2px solid #B5D4FE;
    border-bottom: 2px solid #B5D4FE;
}

p.error {
	padding-left: 25px;
	color: #BF0000;
	background: url(../images/typography/icon-error.gif) no-repeat top left;
}

p.message {
	padding-left: 25px;
	color: #006699;
	background: url(../images/typography/icon-info.gif) no-repeat top left;
}

p.tips {
	padding-left: 25px;
	color: #EE9600;
	background: url(../images/typography/icon-tips.gif) no-repeat top left;
}

p.download {
	padding: 10px 0px 10px 40px;
	border: 1px solid #CACACC;
	background: url(../images/typography/download-bg.gif) no-repeat 5px center #FFFFFF;
}

p.stickynote {
	padding: 10px 0px 10px 40px;
	border: 1px solid #CACACC;
	background: url(../images/typography/sticky-bg.gif) no-repeat 5px center #FFFFFF;
}


/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
/* LISTS */
/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

/* Tick
----------------------------------------------------------------------- */
ul.checklist li {
	list-style: none;
	line-height: 16px;
	padding: 2px 0px 2px 18px;
	background: url(../images/tick.png) no-repeat 0px 3px;
	list-style-position: outside;
}

ul.checklist a {
	text-decoration: underline;
	padding: 1px;
}

ul.checklist a:hover {
	text-decoration: none;
	padding: 1px;
}


/* Checklist
----------------------------------------------------------------------- */
ul.checklist {
	list-style: none;
}

ul.checklist li {
	margin-left: 15px;
	padding: 0 0 5px 20px;
	background: url(../images/typography/checklist-bg.gif) no-repeat 0 3px;
}


/* Small Checklist
----------------------------------------------------------------------- */
ul.small-checklist {
	list-style: none;
}

ul.small-checklist li {
	margin-left: 15px;
	padding: 0 0 5px 20px;
	background: url(../images/typography/icon_list.gif) no-repeat 0 3px;
}


/* Stars Checklist
----------------------------------------------------------------------- */
ul.stars {
	list-style: none;
}

ul.stars li {
	margin-left: 15px;
	padding: 0px 0 5px 20px;
	background: url(../images/typography/star-bg.gif) no-repeat 0 3px;
}


/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
/* CODE */
/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

div.code {
	background: #efefef;
	padding: 10px;
	border: 1px solid #acacac;
	color: #333;
	text-decoration: none;
	font: normal normal normal 11px "Courier New", Courier, mono;
}

pre, .code {
	padding: 10px 15px;
	margin: 5px 0 15px;
	border-left: 5px solid #999999;
	background: #FFFFFF;
	font: 1em/1.5 "Courier News", monospace;
}


/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
/* BLOCKQUOTE */
/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

/* Basic Blockquote
----------------------------------------------------------------------- */
blockquote {
	background: #e4e4e4 url(../images/quoleft.png) no-repeat 10px 10px;
	padding: 10px;
	border: 1px solid #ccc;
	font-style: italic;
}

blockquote div {
	padding: 0 48px;
	background: transparent url(../images/quoright.png) right bottom no-repeat;
}


/* Blockquote with open and close inverted commas
----------------------------------------------------------------------- */
blockquote {
	padding: 1em 40px 1em 15px;
}

blockquote span.open {
	padding: 0 0 0 20px;
	background: url(../images/typography/so-q.gif) no-repeat left top;
}

blockquote span.close {
	padding: 0 20px 0 0;
	background: url(../images/typography/sc-q.gif) no-repeat bottom right;
}


/* 
----------------------------------------------------------------------- */
.quote-hilite {
	padding: 10px 15px;
	margin: 0;
	border: 1px solid #CACACC;
	background: #FFFFFF;
}


/* 
----------------------------------------------------------------------- *//
.small-quote {
	margin: 0;
	padding: 0;
	background: none;
}

.small-quote span.open-quote {
	margin: 0;
	padding-left: 20px;
	background: url(../images/typography/so-q.gif) no-repeat center left;
}

.small-quote span.close-quote {
	margin: 0;
	padding-right: 20px;
	background: url(../images/typography/sc-q.gif) no-repeat center right;
}

.small-quote span.author {
	padding: 2px 5px 2px 20px;
	border-top: 1px solid #DCDDE0;
	margin: 0.5em 0 0;
	display: block;
	background: url(../images/typography/author.gif) no-repeat 5px 4px #EAEBEE;
	font-size: 90%;
	text-transform: uppercase;
}


/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
/* DROPCAP */
/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

.dropcap {
	float: left;
	padding: 4px 8px 0 0;
	display: block;
	color: #999999;
	font: 50px/40px Georgia, Times, serif;
}


/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
/* HIGHLIGHT */
/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

.highlight {
	padding: 1px 5px;
	background: #FFFFCC;
	font-weight: bold;
}


.blocknumber {
	clear: both;
	padding: 5px 15px 10px;
	position: relative;
}


/* Bignumber */
.bignumber {
	float: left;
	margin-right: 8px;
	padding: 6px 7px;
	display: block;
	background: url(../images/typography/ol-bg.gif) no-repeat top left;
	color: #7BA566;
	font: bold 20px/normal Arial, sans-serif;
}


/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
/* SPEECH BUBBLE */
/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

/* 
----------------------------------------------------------------------- */
div.bubble1, div.bubble2, div.bubble3, div.bubble4 {
	margin: 15px 0;
}

div.bubble1 span.author,
div.bubble2 span.author,
div.bubble3 span.author,
div.bubble4 span.author {
	padding-left: 15px;
	margin-left: 15px;
	background: url(../images/typography/author.gif) no-repeat center left;
	font-weight: bold;
}


/* Round Corner Bubble
----------------------------------------------------------------------- */
div.bubble1 div {
	margin: 0;
	width: 100%;
	background: url(../images/typography/bub1-br.gif) no-repeat bottom right;
}

div.bubble1 div div {
	background: url(../images/typography/bub1-bl.gif) no-repeat bottom left;
}

div.bubble1 div div div {
	background: url(../images/typography/bub1-tr.gif) no-repeat top right;
}

div.bubble1 div div div div {
	background: url(../images/typography/bub1-tl.gif) no-repeat top left;
}

div.bubble1 div div div div div {
	margin: 0;
	padding: 15px 15px 30px 15px;
	width: auto;
}


/* 
----------------------------------------------------------------------- */
div.bubble2 div {
	margin: 0;
	width: 100%;
	background: url(../images/typography/bub2-br.gif) no-repeat bottom right;
}

div.bubble2 div div {
	background: url(../images/typography/bub2-bl.gif) no-repeat bottom left;
}

div.bubble2 div div div {
	background: url(../images/typography/bub2-tr.gif) no-repeat top right;
}

div.bubble2 div div div div {
	background: url(../images/typography/bub2-tl.gif) no-repeat top left;
}

div.bubble2 div div div div div {
	margin: 0;
	padding: 15px 15px 35px 15px;
	width: auto;
}


/* 
----------------------------------------------------------------------- */
div.bubble3 div {
	margin: 0;
	width: 100%;
	background: url(../images/typography/bub3-br.gif) no-repeat bottom right;
}

div.bubble3 div div {
	background: url(../images/typography/bub3-bl.gif) no-repeat bottom left;
}

div.bubble3 div div div {
	background: url(../images/typography/bub3-tr.gif) no-repeat top right;
}

div.bubble3 div div div div {
	background: url(../images/typography/bub3-tl.gif) no-repeat top left;
}

div.bubble3 div div div div div {
	margin: 0;
	padding: 15px 15px 50px 15px;
	width: auto;
}


/* 
----------------------------------------------------------------------- */
div.bubble4 div {
	margin: 0;
	width: 100%;
	background: url(../images/typography/bub4-br.gif) no-repeat bottom right;
}

div.bubble4 div div {
	background: url(../images/typography/bub4-bl.gif) no-repeat bottom left;
}

div.bubble4 div div div {
	background: url(../images/typography/bub4-tr.gif) no-repeat top right;
}

div.bubble4 div div div div {
	background: url(../images/typography/bub4-tl.gif) no-repeat top left;
}

div.bubble4 div div div div div {
	margin: 0;
	padding: 15px 15px 55px 15px;
	width: auto;
}


/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
/* LEGEND */
/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

.legend-title {
	margin: 0;
	padding: 0 3px;
	float: left;
	display: block;
	background: #F6F6F6;
	position: absolute;
	top: -10px;
	left: 7px;
	font-size: 100%;
	font-weight: bold;
}

.legend {
	margin: 20px 0;
	padding: 10px 5px;
	border: 1px solid #CACACC;
	background: #FFFFFF;
	position: relative;
}