/*

Stylesheet that contains all elements used by the website AND by the Editor.
This is so that the way the site looks in the editor is the same as on the actual
content of the site. This stylesheet should not contain rogue classnames that are not
prefixed with a tag.

eg.

.myclass is invalid
p.myclass is valid

This is because when you right click on a tag in the editor, it only lists classes that relate to that tag.
If you place classes here without a prefix, they appear in every list of classes because the editor doesn't know
where to put them.

To include classes that you want the Editor to ignore, place them after this line.
--------------------------------------------------------------------------------*/


/*MAIN STATIC TEMPLATE
=======================================*/
#tpl_siteframe{
	width:96%;
	max-width:900px;
	margin-left:auto;
	margin-right:auto;
	height:1%;
}

#tpl_slideshowcontainer{
	width:370px;
	height:150px;
}

#tpl_toptabs ul{
	list-style-type:none;
	margin:0px;
	padding:0px;	
}
#tpl_toptabs ul li{
	float:left;
	margin-right:1px;
	background-image:none;
	padding-left:0px;
}

#tpl_toptabs ul li a{
	color:#ffffff;
	background-color:#105992;
	background-image:url("/images/template/tab01_left.gif");
	background-repeat:no-repeat;
	background-position:top left;
	display:block;
}
#tpl_toptabs ul li a span{
	display:block;
	background-image:url("/images/template/tab01_right.gif");
	background-repeat:no-repeat;
	background-position:top right;
	padding:4px 15px 3px 15px;
}
#tpl_toptabs ul li a:hover{
	color:#ffffff;
	background-color:#000000;
	background-image:url("/images/template/tab02_left.gif");
	text-decoration:underline;
}
#tpl_toptabs ul li a:hover span{
	background-image:url("/images/template/tab02_right.gif");
}

#tpl_toptabs ul li a.selected{
	color:#ffffff;
	background-color:#000000;
	background-image:url("/images/template/tab02_left.gif");
	font-weight:bold;
}

#tpl_toptabs ul li a.selected span{
	background-image:url("/images/template/tab02_right.gif");
}

#tpl_toptabs2{
	float:right;
}
#tpl_toptabs2 ul li{
	float:left;
	background-image:none;
	padding:0px 10px 0px 10px;
}
	

#tpl_topbar{
	color:#ffffff;
	background-color:#105992;
	clear:both;
	border-top:4px solid #000000;
	height:151px;
	background-repeat:no-repeat;
	background-position:0px 0px;
	position:relative;
}
#tpl_topbar .inner{
	border-top:1px solid #ffffff;
}

#tpl_topbar .box_left{
	background-image:url("/images/template/photo_left.jpg");
	background-repeat:no-repeat;
	background-position:top right;
	width:40%;
	max-width:355px;
	height:160px;
	float:left;
	position:relative;
}
#tpl_topbar .box_left h1{
	position:absolute;
	bottom:0px;
	left:0px;
	padding:0px 0px 10px 15px;
}
#tpl_topbar .box_right{
	width:370px;
	height:150px;
	float:right;
	background-image:url("/images/template/photo_right.jpg");
	background-repeat:no-repeat;
	background-position:top left;
	border-left:1px solid #ffffff;
	border-bottom:1px solid #ffffff;
}
#tpl_topbar .box_right_inner{
	float:left;
}

#tpl_maincontent{
	margin-right:270px;
}
#tpl_maincontent_inner{
	height:1%;
	padding:10px;
}
#tpl_maincontent_inner li{
	line-height:1.5em;
}

/* SUB-NAVIGATION BAR */
#tpl_subnav{
	color:#ffffff;
	background-color:#2090d0;
	height:2.1em;
	border-top:1px solid #ffffff;
}
#tpl_subnav ul{
	margin:0px;
	padding:0px;
}
#tpl_subnav ul li{
	float:left;
	background-image:none;
	padding-left:0px;
	margin:0px;
	border-right:1px solid #ffffff;
}
#tpl_subnav ul li a{
	color:#ffffff;
	background-color:inherit;
	display:block;
	padding:0.5em 10px 0.35em 10px;
	white-space:nowrap;
}
#tpl_subnav ul li a:hover{
	color:#ffffff;
	background-color:#1a73a8;
	text-decoration:underline;
}
#tpl_subnav ul li a.selected,
#tpl_subnav ul li a.selected:hover{
	color:#ffffff;
	background-color:#0b3c64;
	border-bottom:2px solid #dd0000;
}
#tpl_subnav ul li a.selected{
	font-weight:bold;
	font-size:1.1em;
	padding:0.3em 10px 0.2em 10px;
}

#tpl_subnav_shadow{
	font-size:1px;
	background-image:url("/images/template/subnav_shadow.jpg");
	background-repeat:repeat-x;
	background-position:top left;
	height:15px;
	border-top:1px solid #ffffff;
}

#front_main .frontbottom{
	margin-top:15%;
	font-size:0.8em;
	color:#555555;
	background-color:inherit;
}

/* MISC CLASSES */
.icon{
	vertical-align:middle;
}
.width80percent{
	border:1px dotted #aaaaaa;
	padding:15px;
	width:80%;
}
.clear{
	clear:both;
	font-size:1px;
}
.clear_left{
	clear:left;
	font-size:1px;
}
.clear_right{
	clear:right;
	font-size:1px;
}

.ranr_logo{
	position:absolute;
	top:-132px;
	left:7px;
}
#tpl_topbar .pagetitle{
	color:#ffffff;
	background-color:#105992;
	position:absolute;
	bottom:5px;
	left:10px;
	margin-bottom:0px;
	padding:2px;
}
.photo_divider{
	position:absolute;
	top:1px;
	right:371px;
}
.topleft_shade{
	position:absolute;
	top:1px;
	left:0px;
}
.textcenter{
	text-align:center;
}
.textright{
	text-align:right;
}
.underline{
	background-image:url("/images/template/underline.gif");
	background-repeat:repeat-x;
	background-position:top left;
	height:5px;
	font-size:1px;
}
.readmore{
	background-image:url("/images/template/bullet01.gif");
	background-repeat:no-repeat;
	background-position:0em 0.35em;
	padding-left:10px;
}

/* BOTTOM BAR */
#tpl_botbar{
	color:#ffffff;
	background-color:#2090D0;
	padding:10px;
	text-align:right;
	font-size:0.9em;
	margin-top:25px;
}
#tpl_botbar a{
	color:#98CEEF;
	background-color:inherit;
}
#tpl_botbar a:hover{
	color:#ffffff;
	background-color:inherit;
}
#tpl_botbar_shadow{
	font-size:1px;
	background-image:url("/images/template/subnav_shadow.jpg");
	background-repeat:repeat-x;
	background-position:top left;
	height:15px;
	border-top:1px solid #ffffff;
}


/* BOX */
.box{
	margin-bottom:15px;
	height:1%;
}
.box h3{
	margin-bottom:0px;
	margin-top:0px;
	background-image:none;
	padding-left:0px;
}
.box p, .box ul {
	margin-bottom:0px;
	margin-top:0px;
	margin-left:0px;
	padding-left: 0;
}
.box .btleft{
	background-image:url("/images/template/box_topleft.gif");
	background-repeat:no-repeat;
	background-position:bottom left;
}
.box .btright{
	background-image:url("/images/template/box_topright.gif");
	background-repeat:no-repeat;
	background-position:bottom right;
	font-size:1px;
	height:13px;
}
.box .bmain{
	background-image:url("/images/template/box_left.gif");
	background-repeat:repeat-y;
	background-position:top left;
}
.box .binner{
	background-image:url("/images/template/box_right.gif");
	background-repeat:repeat-y;
	background-position:top right;
	padding:0px 15px 0px 15px;
	height:1%;
}
.box .binner img{
	padding-bottom:5px;
}
	
.box .bbleft{
	background-image:url("/images/template/box_botleft.gif");
	background-repeat:no-repeat;
	background-position:bottom left;
}
.box .bbright{
	background-image:url("/images/template/box_botright.gif");
	background-repeat:no-repeat;
	background-position:bottom right;
	font-size:1px;
	height:18px;
}

/* PROJECTS PREVIEW */
.project_preview{
	margin-bottom:15px;
	border-bottom:1px dotted #cccccc;
}
.project_preview h3{
	background-image:none;
	padding-left:0px;
}
.project_preview .pp_inner{
	margin-left:110px;
	padding-bottom:10px;
}
.project_preview .more_detail{
	text-align:right;
	font-weight:bold;
}

/* PROJECTS DETAIL */
#project_detail{
	color:#000000;
	background-color:#f5f5f5;
	border:1px solid #eeeeee;
	padding:10px 15px 0px 15px;
	position:relative;
}

#project_detail h2{
	color:#000000;
	background-color:#f5f5f5;
	background-image:none;
	padding-left:0px;
}

#project_detail h3{
	color:#000000;
	background-color:#f5f5f5;
	background-image:none;
	padding-left:0px;
	font-size:1.1em;
	margin-bottom:0px;
	margin-top:0px;
}
#project_detail p{
	margin-top:5px;
}

.project_gallery{
	margin-top:3em;
}

#galleryPopup{
	display:none;
	float:left;
	width:290px;
	color:#000000;
	background-color:#ffffff;
	padding:10px;
	margin-left:12%;
}
#galleryPopup .image{
	border:2px solid #666666;
	padding:1px;
	margin-bottom:5px;
}

.gallery_thumb{
	border:1px solid #777777;
	background-color:#f5f5f5;
	padding:2px;
	margin:3px;
}

/* NEWS */
#news .newsitem,
#newsmain{
	background-image:url("/images/template/news.gif");
	background-repeat:no-repeat;
	background-position:top left;
	padding-left:40px;
	padding-right:40px;
	margin-top:15px;
}
#news h1,
#newsmain h1{
	margin-bottom:0px;
}
#newsmain img{
	margin-top:5px;
	margin-bottom:5px;
}
#news h2{
	margin-bottom:0px;
	margin-top:0px;
	background-image:none;
	padding-left:0px;
}
#news .newsdate,
#newsmain .newsdate{
	margin-top:0px;
	font-size:0.9em;
	color:#888888;
	background-color:inherit;
}
#news .clear{
	border-top:1px dotted #888888;
	padding-bottom:5px;
	margin-bottom:0px;
}

/* SEARCH BOX */
#tpl_searchbox .sb_title h2{
	margin-top:5px;
	margin-bottom:5px;
}
#tpl_searchbox .sb_title{
	background-image:url("/images/template/searchbox_p1.jpg");
	background-repeat:no-repeat;
	background-position:bottom right;
	padding:3px 0px 3px 0px;
}
#tpl_searchbox .sb_main{
	color:#ffffff;
	background-color:#2090D0;
	background-image:url("/images/template/searchbox_p2.jpg");
	background-position:top right;
	background-repeat:no-repeat;
	height:60px;
	padding:5px 0px 15px 5px;
	font-size:10px;
}
#tpl_searchbox .sb_main .input{
	font-size:10px;
	width:90px;
	border:1px solid #000000
}
#tpl_searchbox .searchbutton{
	margin-top:5px;
}
#tpl_searchbox .sb_main p{
	margin:0px;
	text-align:right;
}
#tpl_searchbox .sb_listall{
	color:#ffffff;
	background-color:#105992;
	padding:5px;
	text-align:right;]
	border-top:1px solid #ffffff;
	font-weight:bold;
}
#tpl_searchbox .sb_listall a{
	color:#B1DBF3;
	background-color:inherit;
}
#tpl_searchbox .sb_listall a:hover{
	color:#ffffff;
	background-color:inherit;
}

#tpl_searchbox #Vacancy{
	border:1px solid #444444;
}
#tpl_searchbox strong{
	font-size:1.2em;
}

/* SEARCH TABLE */
#searchtable{
	border:0px;
	border-left:1px solid #cccccc;
	color:#444444;
	background-color:#f5f5f5;
	width:55%;
}
#searchtable th{
	color:#ffffff;
	background-color:#0B3C64;
	padding:10px 5px 10px 5px;
	border-right:1px solid #bbbbbb;
}
#searchtable th.view{
	width:1.2em;
}
#searchtable td.view{
	text-align:center;
}
#searchtable td{
	text-align:left;
	padding:5px;
	border-bottom:1px solid #cccccc;
	border-right:1px solid #cccccc;
}

/* PreviewBoxMain (listing news) */
.previewOnMain li{
	background-image:none;
	padding-left:0px;
	padding-bottom:5px;
	border-bottom:1px dotted #aaaaaa;
	margin-bottom:10px;
}

/* Job Detail Screen */
#jobdetail{
	width:60%;
}

#jobdetail h3{
	padding-left:0px;
	background-image:none;
	margin-bottom:0px;
}
#jobdetail .jobtitle,
#jobdetail .joblocation{
	margin-top:0px;
	font-weight:bold;
	color:#666666;
	background-color:inherit;
	font-size:1.1em;
}
#jobdetail .joblocation{
	padding-right:10px;
}

#jobdetail .jobdetails{
	height:1%;
}
#jobdetail .jobdetails h3{
	margin-top:10px;
}
#jobdetail .refcount{
	font-size:0.8em;
	color:#888888;
	padding-left:15px;
}
#jobdetail .greytext{
	color:#777777;
	background-color:inherit;
	font-size:0.9em;
}




/*COMMON CLASSES - Used for most sites
=======================================*/
.clearleft		{clear:left;}
.clearright		{clear:right;}
.clear			{clear:both}
.textright		{text-align:right;}
.textleft		{text-align:left;}
.textcenter		{text-align:center;}
.hidden			{display:none;}
.nobotgap		{padding-bottom:0px;margin-bottom:0px;}
.notopgap		{padding-top:0px;margin-top:0px;}
.nogaps			{padding:0px;margin:0px;}
.nobullets li	{background-image:none;
				 list-style-type:none;}
.overflow		{overflow:auto;width:99.9%;}
.mandatory		{	color:#dd0000;background-color:#ffffff;font-weight:bold;font-size:1.3em;}
.width100percent{width:100%;}
.width90percent	{width:90%;}
.width80percent	{width:80%;}
.width50percent	{width:50%;}
.smalltext		{font-size:85%;}
.relative_top-2	{position:relative;top:-2px;left:0px;}
.icon			{vertical-align:middle;}
.icon_border	{vertical-align:middle;border:1px solid #000000;margin:2px;}


/*ERROR MESSAGES
=======================================*/
#okmsg, #errormsg, #mysqlerror	{ margin-bottom:15px }
#okmsg h1						{ color:#279876; background-color:#f5fff5; font-weight:normal }
#errormsg h1					{ color:#cc0000; background-color:#fff5f5; font-weight:normal }
#mysqlerror	h1					{ color:#0000cc; background-color:#f5f5ff; font-weight:normal }
#okmsg div						{ border:solid 1px #229922; color:#000000; background-color: #f5fff5; padding:5px }
#errormsg div					{ border:solid 1px #cc0000; color:#000000; background-color: #fff5f5; padding:5px }
#mysqlerror div					{ border:solid 1px #0000cc; color:#000000; background-color: #f5f5ff; padding:5px }
#errormsg li, #errormsg ul, #okmsg li, #okmsg ul, #mysqlerror li, #mysqlerror ul	{ padding:0px; margin:0px }

/*--------------------------------------------------------------------------------
Styles above here will not be included in the editor.
This is because the CSS will be divided into 2 parts using the split tag below
*/
/*<SPLIT>*/

body{
	color:#000000;
	background-color:#ffffff;
	font-family:Tahoma,Arial,sans-serif;
	font-size:0.75em;
	background-image:url("/images/template/canvas_bg.jpg");
	background-repeat:repeat-x;
	background-position:top left;
	margin-top:0px;
	padding:0px;
	margin-bottom:30px;
}
a{
	text-decoration:none;
	color:#0080DD;
	background-color:inherit;
}
a:hover{
	text-decoration:underline;
	color:#000000;
	background-color:inherit;
}
img{
	border:0px;
}

p{	line-height:1.4em;}

h1,h2,h3{
	font-family:Arial,Tahoma,sans-serif;
}

h1{
	color:#000000;
	background-color:#ffffff;
	font-size:1.8em;
	font-weight:bold;
}

h2{
	font-size:1.3em;
	color:#2090D0;
	background-color:#ffffff;
	letter-spacing:-1px;
	background-image:url("/images/template/bullet_h2.gif");
	background-repeat:no-repeat;
	background-position:0em 0.2em;
	padding-left:15px;
	margin-bottom:5px;
}
h3{
	font-size:1.2em;
	color:#222222;
	background-color:#ffffff;
	letter-spacing:-1px;
	background-image:url("/images/template/bullet_h3.gif");
	background-repeat:no-repeat;
	background-position:3px 0.3em;
	padding-left:15px;
}

ul{
	list-style-type:none;
}

ul li{
	list-style-type:none;
	background-image:url("/images/template/bullet01.gif");
	background-repeat:no-repeat;
	background-position:0em 0.5em;
	padding-left:10px;
}

form{
	margin:0px;
	padding:0px;
}

img		{	border:none;}
kbd		{	padding:0px 1px 0px 1px;
			border-width:1px 2px 2px 1px;
			border-style:solid;}
abbr	{	border-bottom:1px dashed #aaaaaa;
			cursor:help;}
acronym	{	border-bottom:1px dashed #aaaaaa;
			cursor:help;}
dfn		{	font-style:normal;
			border-bottom:1px dashed;
			cursor:help;}
code	{	font-family: courier, monospace;
			padding-left:1px;
			padding-right:1px;}
samp	{	font-family: courier, monospace;
			border:1px solid #cccccc;
			color:#000000;
			background-color:#ccffcc;
			padding-left:1px;
			padding-right:1px;}
blockquote{
			color:#000000;
			background-color:#eeeeee;
			border:1px solid #888888;
			padding:5px;}
table	{	border:1px solid #777777;}
th		{	font-weight:bold;
			padding:1px 3px 1px 3px;
			text-align:left;
			background-color:#f1f1f1;
			color:#000000;
			/*background-image:url("/images/template/misc/table_th_bg.gif");*/
			background-repeat:repeat-x;
			background-position:top left;
			border-bottom:1px solid #666666;}
td		{	border-color: #eeeeee #cccccc #cccccc #eeeeee;
			border-style:solid;
			border-width:1px;
			padding:1px 3px 1px 3px;
			text-align:left;}
select,input,textarea{
			font-family:Arial,Verdana,sans-serif;
			font-size:0.9em;}


/*CLASSES USED BY THE EDITOR*/
p.indent			{	margin-left:40px;}
div.left{text-align:left;}
div.right{text-align:right;}
div.center{text-align:center;}

p.left				{	text-align:left;}
p.center			{	text-align:center;}
p.right				{	text-align:right;}

img.border			{	padding:1px;border:4px solid #cccccc;}
img.icon			{	vertical-align:middle;}

span.underline		{	text-decoration:underline;}
span.strikethrough	{	text-decoration:line-through;}
span.highlight		{	color:green;
						background-color:inherit;
						text-decoration:underline;
						font-weight:bold;}
span.smalltext		{	font-size:0.85em;}
span.bigtext		{	font-size:1.3em;}
span.biggertext		{	font-size:1.7em;}

hr.clearall			{	clear:both;}

ul.square 			{	list-style-type:square;}
ul.circle			{	list-style-type:circle;}
ul.disc				{	list-style-type:disc;}
ol.lower-alpha		{	list-style-type:lower-alpha;}
ol.upper-alpha		{	list-style-type:upper-alpha;}
ol.lower-roman		{	list-style-type:lower-roman;}
ol.upper-roman		{	list-style-type:upper-roman;}
ol.numeric			{	list-style-type:decimal;}
ol.numeric_zeropad	{	list-style-type:decimal-leading-zero;}

li.alpha			{	list-style-type:lower-alpha;}
li.square			{	list-style-type:square;}
li.circle			{	list-style-type:circle;}
li.disc				{	list-style-type:disc;}
li.lower-alpha		{	list-style-type:lower-alpha;}
li.upper-alpha		{	list-style-type:upper-alpha;}
li.lower-roman		{	list-style-type:lower-roman;}
li.upper-roman		{	list-style-type:upper-roman;}
li.numeric			{	list-style-type:decimal;}
li.numeric_zeropad	{	list-style-type:decimal-leading-zero;}
li.alpha			{	list-style-type:lower-alpha;}

p.overflow_auto,
div.overflow_auto	{	overflow:auto;}