/****************************************************
#####################################################
##-------------------------------------------------##
##           RY SIMPLE - Version 1.0.1             ##
##-------------------------------------------------##
## Copyright = Raya Web Design - 2010              ##
## Date      = 28 October 2010                     ##
## License   = free template                       ##
## Author    = Heri siswanto                       ##
## Websites  = http://www.rayawebdesign.com        ##
##                                                 ##
#####################################################
****************************************************/

/* Eric Meyer's CSS Tools: Reset CSS (Modified by Hieu Nguyen)
-------------------------------------------------------------*/
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	background: transparent;
}
body {
	line-height: 1;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
}

ul {
	list-style: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
	empty-cells: show;
}

/* Clearfix
-------------------------------------------------------------*/
* html .clearfix {
	height: 1%; /* IE5-6 */
}

html[xmlns] .clearfix { /* O */
	display: block;  
}

.clearfix:after { /* FF, O, etc. */
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/* Generic Styles
-------------------------------------------------------------*/
.clear, .divider {clear: both;}

.no-display {display: none !important;}

.nowrap,.nobr {white-space: nowrap !important;}

.no-border {
	border: 0 !important;
}

.no-padding {padding: 0 !important}
.no-margin 	{margin: 0 !important;}

/*Alignment---*/
.v-top 		{vertical-align: top;}
.v-middle	{vertical-align: middle;}
.v-bottom 	{vertical-align: bottom;}

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

.left		{float: left;}
.right	{float: right;}

.auto-width {width: auto;}/****************************************************
#####################################################
##-------------------------------------------------##
##           RY SIMPLE - Version 1.0.1             ##
##-------------------------------------------------##
## Copyright = Raya Web Design - 2010              ##
## Date      = 28 October 2010                     ##
## License   = free template                       ##
## Author    = Heri siswanto                       ##
## Websites  = http://www.rayawebdesign.com        ##
##                                                 ##
#####################################################
****************************************************/

.main { width: 940px; margin:0 auto; }
#ry-header, #ry-top, #ry-container,
#ry-bots, #ry-footer { margin:0; padding: 0; }

#ry-top { height: 50px; color:#fff; }
#ry-header { height: 120px; clear: both; }
#ry-container, #ry-bots { background: #f0eee0; }/****************************************************
#####################################################
##-------------------------------------------------##
##           RY SIMPLE - Version 1.0.1             ##
##-------------------------------------------------##
## Copyright = Raya Web Design - 2010              ##
## Date      = 28 October 2010                     ##
## License   = free template                       ##
## Author    = Heri siswanto                       ##
## Websites  = http://www.rayawebdesign.com        ##
##                                                 ##
#####################################################
****************************************************/

* { 
	padding: 0;
	margin: 0;
}

body {
	background: #33211b;
	line-height: 1.5;
	font-family: Arial,Helvetica,sans-serif;
	color: #444;
}

body.fs1 { font-size: 11px; }
body.fs2 { font-size: 12px; }
body.fs3 { font-size: 13px; }
body.fs4 { font-size: 14px; }
body.fs5 { font-size: 15px; }

a { color:#6D9D24; text-decoration: none; }
a.readon { border:1px solid #D8D6C5; padding: 1px 4px; }
a.readon span { color:#6D9D24; }
ul { 
	padding-bottom: 10px;
	list-style: square inside;
}

ol {
	padding-bottom: 10px;
	list-style: decimal inside;
}
	
li {
	padding: 2px 0px 2px 10px;
	line-height: 15px;
	color: #4C4C4C;
}

body#bd-bg { background: url(../images/bg.jpg); }

/* Title text */
.contentheading, .componentheading, .blog_more strong, h1, h2, h3, h4 {
	font-family: Arial,Helvetica,sans-serif;
}

.componentheading, .contact-name {
	border-bottom:1px solid #D6D6D6;
	color:#222222;
	font-family:Arial,Helvetica,sans-serif;
	font-size:18px;
	font-weight:bold;
	margin:10px 0;
	padding-bottom: 10px;
}

/* Small text */
small, .small, .smalldark, .mosimage_caption, .createby, .createdate, .modifydate, a.readon, .img_caption {
	color: #666666;
	font-size: 92%;
}

/* Heading */
h1 { font-size: 180%; }
h2 { font-size: 150%; }
h3 { font-size: 125%; }
h4 { font-size: 100%; text-transform: uppercase; }

p, pre, blockquote, ul, ol, h1, h2, h3, h4, h5, h6 {
	padding: 0;
}

p { margin: 5px 0; }

th {
	padding: 5px;
	font-weight: bold;
	text-align: left;
}

fieldset {
	border: none;
	padding: 10px 5px;
}

fieldset a { font-weight: bold; }

hr {
	border-top: 1px solid #CCCCCC;
	border-right: 0;
	border-left: 0;
	border-bottom: 0;
	height: 1px;
}

td, div { font-size: 100%; }
img { border: none; margin: 5px; }

div.img_caption { margin: 3px 10px; }
img.caption { background: #fff; margin: 0; padding-bottom: 2px; }
p.img_caption { background: #E8E5D1; padding: 1px 5px; margin: 0; line-height: 1.4em; text-align: center; color: #444; }
/* FORM
--------------------------------------------------------- */
form {
	margin: 0;
	padding: 0;
}

form label {
	cursor: pointer;
}

input, select, textarea, .inputbox {
	padding: 3px 5px;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 100%;
}

.button {
	padding: 3px 5px;
	border: none;
	color: #fff;
	font-size: 85%;
	text-transform: uppercase;
	background: #436284;
}

.button:hover, .button:focus {
	border: 1px solid #333;
	background: #4a3832;
	color: #fff;
}

.inputbox {
	background: #f0f0f0; 
	border: 1px solid #D8D6C5; 
	color: #444;
}

.inputbox:hover, .inputbox:focus { }

/** RAYA LAYOUT **/
/** PATHWAY **/
.ry-path { 
	width: 60%; 
	float: left; 
	margin: 20px 0 10px;
	background: url(../images/home.png) no-repeat left 1px;
	padding: 2px 0 2px 20px;
}

.ry-path strong { margin-right: 5px; }

.ry-path img { margin: 1px 5px; }

/** RY SEARCH **/
.ry-search { 
	width: 25%; 
	float:right; 
	margin: 15px 0;
	text-align: right;
}
.ry-search .inputbox {
	color: #ccc;
	width: 200px;
	background: url(../images/search.png) no-repeat 5px center #453029;
	padding-left: 25px;
	border: 1px solid #644d46;
}

/** HEADER **/
#ry-header { background: url(../images/head-grad.gif) repeat-x bottom #f8f7eb;  }
#ry-header .main { position: relative; }

/** LOGO **/
#header-logo { position: absolute; top: 30px; left: 20px; }
h1.logo, div.logo { 
	width: 228px;
	height: 60px;
	z-index: 1;
}

h1.logo a, div.logo a {
	background: url(../images/logo.png) no-repeat;
	width: 228px;
	height: 60px;
	display: block;
}

h1.logo a span, div.logo a span{
	position: absolute;
	top: -10000px;
}


/** CONTAINER **/
#ry-container { padding-top:30px; padding-bottom: 10px; }
.main-content { float: left; }
.ry-right { float: right; }

div.article_column, div.article_content, div.leading, .main-comp {
	border:1px solid #D8D6C5;
	background: #fff;
	color:#444444;
	margin:0 0 10px;
	padding:10px 10px 20px;
}

.article-tools { border-bottom: 1px solid #D8D6C5; }
.article-meta { width: 75%; float: left; }
.buttonheading { text-align: right; }
.buttonheading img { margin: 0; }
.article-content { padding: 10px 0; }
.modifydate { color:#ccc; font-style: italic; font-size: 10px; float:right; }
.contentpaneopen { clear: both; padding-bottom: 5px;}

.blog_more { margin: 5px 0 20px; }
.blog_more h2 { font-size: 90%; margin-bottom: 8px; }
.blog_more li { font-style: italic; font-size: 90%; }

/** PAGINATION **/
ul.pagination { width: 75%; float: left; }
ul.pagination li { display: inline; }
ul.pagination li { 
	border:1px solid #D8D6C5;
	padding: 2px;
	margin:0 8px 0 0;
}
.counter { width: 20%; float: right; text-align: right; color: #bbb; }

/** JOOMLA STYLE **/
div.moduletable, div.moduletable_menu, div.moduletable_text {
	background: #fff;
	margin-bottom: 10px;
	border:1px solid #D8D6C5;
	padding: 5px 5px 15px;
}

div.moduletable h3, div.moduletable_menu h3, div.moduletable_text h3 {
	line-height:normal;
	margin:10px 0;
	padding:0 10px 10px;
	border-bottom:1px solid #D6D6D6;
	color:#222;
}

div.moduletable .ry-box-ct, div.moduletable_menu .ry-box-ct, div.moduletable_text .ry-box-ct {
	padding: 0 10px;
}

div.moduletable ul li, div.moduletable_menu ul li, div.moduletable_text ul li,
.moduletab ul li, .moduletab_menu ul li, .moduletab_text ul li {
	border-bottom:1px solid #f6f6f6;
	padding: 4px 3px;
}

/** MODULE LOGIN **/
#form-login { }
#form-login .inputbox { border: 1px solid #e6e6e6; padding-left: 25px; color: #444; }
#form-login-username .inputbox { background:url(../images/user.png) no-repeat 3px center #fcfcfc; }
#form-login-password .inputbox { background:url(../images/key.png) no-repeat 3px center #fcfcfc; }
#form-login li { border: none; }
#form-login-remember { margin-top: 2px; }

/** MOD BANNER **/
.bannerheader, .banneritem_text { margin-bottom: 5px; }
.banneritem_text a { font-weight: bold; }
.bannerfooter_text { text-align: right; }

/** TAB STYLE **/
.moduletab, .moduletab_menu, .moduletab_text { padding:5px 5px 10px; }
.moduletab h3, .moduletab_menu h3, .moduletab_text h3 {
	padding:0 0 5px;
	border-bottom:1px solid #D6D6D6;
	color:#222;
	margin-bottom: 10px;
}

/** RY TAB **/
.right-tab { margin-bottom:10px; }
dl.tabs { 
	float:left; 
	margin:0px 0 -1px 0; 
	z-index:50; 
}
dl.tabs dt { 
	float:left; 
	width:auto; 
	height:auto; 
	line-height:1em; 
	color:#222; 
	text-align:center; 
	margin-right:2px;
	padding: 7px 10px;
	background: #fff;
	border:1px solid #D8D6C5;
}
dl.tabs dt.open { z-index: 100; border-bottom:1px solid #fff; }
dl.tabs dt.closed { z-index: 100; background: #eee; }
div.current { 
	clear:both; 
	width:260px; 
	min-height:200px; 
	border:1px solid #D8D6C5; 
	padding:10px 10px; 
	background:#fff; 
}
div.current dd { padding:0; margin:0; }

/** BOTS **/
#ry-bots { padding-bottom: 10px; }
.colom-bots { float: left; }
.bots-left { padding-right: 4px; background: url(../images/dot.gif) no-repeat right center; }
.bots-right {padding-left: 4px;  }
.bots-center { padding:0; background: url(../images/dot.gif) no-repeat right center; }
.bots-singel { padding: 0; }

#ry-bots div.moduletable,#ry-bots div.moduletable_menu { background: none; border: none; }
#ry-bots h3 {
	text-shadow: 1px 2px #fff;
	background: url(../images/dot-h3.gif) repeat-x bottom;
	border: none;
	padding-bottom: 5px;
	padding-left:0;
}
/** FOOTER **/
#ry-footer { background: url(../images/bots-bg.png) repeat-x top transparent; }
#ry-footer .main { color: #ccc; padding: 10px 0 25px; }
.footer-l { width: 49%; float: left; }
.footer-r { width: 49%; float: right; text-align: right;}

.fotnav { margin-right: -5px; }
.fotnav ul li { 
	display: inline; 
	background: none; 
	list-style: none;
	padding: 0 8px;
	margin:0;
	border-left:1px solid #ccc; 
}

ul li.firstitem { border-left: none; }
.fotnav ul li a { color: #ccc; }

/** CONTACT FORM **/
.form-validate { padding-top: 10px; margin-top: 10px; padding-bottom: 10px; }
.contact_email { margin-bottom: 5px; }
.contact_email .inputbox { background: #fcfcfc; border: 1px solid #D8D6C5; color: #444; }
.contact_email label { width: 30%; float: left; }
.contact_email_checkbox { padding-left: 30%; }
.form-validate .button { margin-left: 30%; }
/****************************************************
#####################################################
##-------------------------------------------------##
##           RY SIMPLE - Version 1.0.1             ##
##-------------------------------------------------##
## Copyright = Raya Web Design - 2010              ##
## Date      = 11 November 2010                    ##
## License   = free template                       ##
## Author    = Heri siswanto                       ##
## Websites  = http://www.rayawebdesign.com        ##
##                                                 ##
#####################################################
****************************************************/

/** MAIN NAVIGATION **/
#mainnav {
	border:1px solid #D8D6C5; 
	padding: 3px 0;
	float: right;
	position: relative;
	top: 20px;
	right: 0;
	background: url(../images/menu-bg.gif) repeat-x bottom ;
}

#mainnav ul { 
	list-style: none; 
	margin:0; 
	padding:0; 
}

#mainnav ul ul {
	margin: 0; /* all lists */
	padding: 0;
	background: url(../images/menu-bg.gif) repeat-x bottom #f8f7eb;
	border:1px solid #D8D6C5;
}

#mainnav ul li { 
	padding: 0 2px 0 0; 
	float: left;
	display: block;
	background: none;
}

#mainnav ul li ul {
	width: 16.4em;
	position: absolute; /* second-level lists */
	z-index: 99;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	height: auto;
	w\idth: 15.9em;
}

#mainnav ul li ul ul {
	margin: -2em 0 0 14em; /* third-and-above-level lists */
}

#mainnav ul li li {
	padding: 0 1em 0 0;
	margin: 0;
	width: 14.9em;
}

#mainnav ul ul a {
	width: 14.8em;
	w\idth: 10.8em;
}

#mainnav ul li:hover ul ul, #mainnav ul li:hover ul ul ul,
#mainnav ul li.sfhover ul ul, #mainnav ul li.havechildsfhover ul ul, #mainnav ul li.havechild-activesfhover ul ul, #mainnav ul li.activesfhover ul ul,
#mainnav ul li.sfhover ul ul ul, #mainnav ul li.havechildsfhover ul ul ul, #mainnav ul li.havechild-activesfhover ul ul ul, #mainnav ul li.activesfhover ul ul ul {
	left: -999em;
}

/* This "unhides" the sub-menus (left: -999em is what hides them) */
#mainnav ul li:hover ul, #mainnav ul li li:hover ul, #mainnav ul li li li:hover ul,
#mainnav ul li.sfhover ul, #mainnav ul li.havechildsfhover ul, #mainnav ul li.havechild-activesfhover ul, #mainnav ul li.activesfhover ul,
#mainnav ul li li.sfhover ul, #mainnav ul li li.havesubchildsfhover ul, #mainnav ul li li.havesubchild-activesfhover ul, #mainnav ul li li.activesfhover ul,
#mainnav ul li li li.sfhover ul, #mainnav ul li li li.havesubchildsfhover ul, #mainnav ul li li li.havesubchild-activesfhover ul, #mainnav ul li li li.activesfhover ul {
	left: auto;
}

#mainnav ul li a,
#mainnav ul li span.separator { 
	padding: 6px 8px; 
	display: block; 
	color: #444; 
}

#mainnav ul li a:hover,
#mainnav ul li a:focus,
#mainnav ul li a.sfhover {
	/**background: #CC0000;*/
	color: #6D9D24;
	text-decoration: none;
}

#mainnav ul li.active a { /*background: #CC0000;*/ color: #6D9D24; }

#mainnav ul li a.active,
#mainnav ul li a.active:hover,
#mainnav ul li a.active:active,
#mainnav ul li a.active:focus {
	color: #6D9D24;
}
/****************************************************
#####################################################
##-------------------------------------------------##
##           RY SIMPLE - Version 1.0.1             ##
##-------------------------------------------------##
## Copyright = Raya Web Design - 2010              ##
## Date      = 28 October 2010                     ##
## License   = free template                       ##
## Author    = Heri siswanto                       ##
## Websites  = http://www.rayawebdesign.com        ##
##                                                 ##
#####################################################
****************************************************/

.dropcap {
	color: #333;
	display: block;
	float: left;
	font: 40px/20px Georgia, Times, serif;
	padding: 7px 8px 0 0;
}

p.error, p.message, p.tips, p.tag, p.phone {
	padding-left: 25px;
	position: relative;
}

p.error span.icon, p.message span.icon, p.tips span.icon,
p.tag span.icon, p.phone span.icon {
	background-image: url(../images/icon-typo.png);
	background-repeat: no-repeat;
	width: 16px;
	height: 16px;
	display: block;
	position: absolute;
	top: 2px;
	left: 0;
}

p.error { color: #e94d08; }
p.message {color: #72A2CD; }
p.tips { color: #e58c00; }

p.message	span.icon { background-position: left -18px; }
p.tips 		span.icon {	background-position: left -36px; }
p.tag 		span.icon { background-position: left -54px; }
p.phone 		span.icon { background-position: left -72px; }

.sticky, .download {
	margin: 15px 0;
	padding: 10px !important;
	border: 3px solid #ddd;
}

.sticky {
	background: url(../images/sticky-big.png) no-repeat 10px center #fff;
	padding-left: 50px !important;
	border-color: #d2d2b6;
}

.download {
	background: url(../images/download-big.png) no-repeat 10px center #fff;
	padding-left: 50px !important;
	border-color: #d6e9f3;
}