/*
Author:		bebeics@gmail.com
*/


/* ----------------------- GENERAL LAYOUT -----------------------*/
body {
  font: 12px Arial,Tahoma, Helvetica, sans-serif;
  margin: 0px;
}

/* heading */

h1, h2, h3, h4, h5, h6{
	font-family:Arial, Tahoma, Helvetica, sans-serif; 
	font-weight:normal;

	text-transform: capitalize;
}
h1 {
	font-size:36px; 
	line-height:32px; 
	padding-bottom:10px;
	padding-top:30px;
	padding-left:20px;
	color:#fff;
	text-shadow:1px 1px #3a9808;
}
h2 {
	font-size:28px; 
	line-height:18px; 
	margin-bottom:15px;
	color:#3a3a3a;
}
h3 {
	font-size:16px; 
	line-height:20px; 
	margin-bottom:15px;
	color:#000;
	border-bottom:1px solid #ccc;
	font-weight:bold;
}
h3 a{
	font-size:16px; 
	line-height:20px; 
	margin-bottom:15px;
	color:#000;
	border-bottom:1px solid #ccc;
	font-weight:bold;
}
h3 a:hover {
	color:#000;
}
h4{
	font-size:12px; 
	line-height:16px; 
	margin-bottom:8px;
	color:#3a3a3a;
}
h5{
	font-size:11px; 
	margin:3px 0px; 
	padding:0px; 
	letter-spacing:1px;
	color:#3a3a3a;
}

/* links */
a,a:link,a:visited {
  color:#004b9f; 
  text-decoration:none;
}
a:hover{
  color:#0060cb;
}
a img, img {
  border:none
}
/* get rid of those system borders being generated for A tags */
a:active {
  outline:none;
}

:focus {
  -moz-outline-style:none;
}

/* blockquotes and paragraphs */
p {
  font-size:12px;
  line-height:18px;
  color:#000000;
  text-align:justify;
}

/* ----------------------- HEADER LAYOUT -----------------------*/
/* Header Section */

 /* Absolute positioned header for all browsers*/
    #header-wrapper  {
            width:100%;
            height:91px;
    }
    

#header {
	height:91px;
	width:100%;
    margin:auto;
}

.header_wrapper {
	width:100%;
	background:url(../images/nav_bg.png) repeat-x 0 0;
	margin-top:0px;
}
.header_content {
	width:1000px;
	margin:auto;
	height:91px;
	}

/* Logo */
#logo {
  width:101px;
  height:91px;
  margin-top:0px;
  float:left;
  display:block;
  text-indent:-9999px;
}
#logo a:link, #logo a:active, #logo a:visited {
  background:url(../images/logo.png) no-repeat 0 0;
  width:101px;
  height:91px;
  float:left;
  cursor:pointer;
  display:block;
}
#logo a:hover {
  background:url(../images/logo.png) no-repeat 0 -91px;
  width:101px;
  height:91px;
  float:left;
  cursor:pointer;
  display:block;
}

.clear {clear:both;}

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



/* Navigation Contaciner */
#nav {
  height: 40px;
  position: relative;  
  z-index:100;
  width:690px;
  float:left;
  margin-top:25px;
  margin-left:20px;
}
#nav ul {
  height: 50px;

}
#nav li {
  list-style:none;
  float:left;  

}

.space_menu {padding-top:18px;}

#nav li a:link, #nav li a:active, #nav li a:visited {
  list-style:none;
  float:left;
  padding-left:5px;
  padding-right:5px;
  margin-right:10px;
  margin-left:10px;
  font-size:16px;
  color:#fff;
  text-shadow: 0 1px #630606;
  text-transform:normal;

}
#nav li a:hover {
  list-style:none;
  float:left;
  padding-left:5px;
  padding-right:5px;
  margin-right:10px;
  margin-left:10px;
  font-size:16px;
  color:#ffff7f;
}
#nav li.selected a:link,#nav li.selected a:active,#nav li.selected a:visited,#nav li.selected a:hover {
  color:#fff;
  float:left;
  height:52px;
  background: url("../images/nav_active_right.png") no-repeat right top;
  padding-right:21px;
}
#nav li.selected a:link span,#nav li.selected a:active span,#nav li.selected a:visited span,#nav li.selected a:hover  span{
  color:#fff;
  float:left;
  height:52px;
  background: url("../images/nav_active_left.png") no-repeat left top;
  padding-left:18px;
}


/*----------------------- HEADER PICTURE -----------------------*/
#header_picture {
	width:995px;
	height:279px;
	background:url(../images/header_picture.png) no-repeat 0 0;
	padding-left:5px;
	padding-top:5px;
	margin-top:20px;
}
#header_picture .caption {position:absolute; top:auto; left:auto; background:url(../images/picture_mask.png) repeat-x 0 0; height:85px; width:970px; margin-top:180px; font-size:28px; color:#fff; line-height:34px; padding-top:10px; padding-left:20px;}
.orange_pic_txt {color:#ffa800; font-size:20px; font-weight:normal;}


/*------------------ CONTENT --------------*/

 #content-wrapper {
        padding:0;
        margin-left:0;
        padding-bottom:10px;
        margin-top:91px;
        margin-bottom:40px;
    }
    
    body>#content-wrapper {
            margin-left:0;
    }
    

#content {
	width:1000px;
	margin:auto;
	}
	
/*------------------------- WIDGET --------------------------------*/


.widget_wrapper_border {
	margin-top:30px;
	border:3px solid #eee;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
.widget_wrapper {
	margin-top :5px;
	margin-left :5px;
	background-color: #FFFFFF;	
	border:1px solid #989898;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	padding:10px 10px 0px 10px; 

}

.widget_bg_top {
	background:url(../images/widget_bg_top.jpg) repeat-y 0 0;
	width:396px;
	height:2px;
	clear:both;
}
.widget_bg_top_wide {
	background:url(../images/widget_bg_top_wide.jpg) repeat-y 0 0;
	width:650px;
	height:2px;
	clear:both;
}

.widget_bg {
	background:url(../images/widget_bg.jpg) repeat-y 0 0;
	width:376px;
	padding:10px;
}
.widget_bg_bottom {
	background:url(../images/widget_bg_bottom.jpg) repeat-y 0 0;
	width:396px;
	height:36px;
	clear:both;
}

.widget_bg_wide {
	background:url(../images/widget_bg_wide.jpg) repeat-y 0 0;
	width: 630px;
	padding:10px;
}
.widget_bg_bottom_wide {
	background:url(../images/widget_bg_bottom_wide.jpg) repeat-y 0 0;
	width:650px;
	height:36px;
	clear:both;
}

.widget_wrapper .tabs { height:35px;}

.widget_wrapper .tab_inactive {
	float:left;
	height:25px;
	width:32px;
	background:url(../images/widget_tab_inactive.jpg) no-repeat 0 0;
	padding-top:10px;
	padding-left:10px;
	margin-right:1px;
	color:#bbb;
	text-shadow:1px 1px #fff;
}

.widget_wrapper .tab_active {
	float:left;
	height:25px;
	width:257px;
	background:url(../images/widget_tab_active.jpg) no-repeat 0 0;
	padding-top:10px;
	padding-left:10px;
	margin-right:1px;
	color:#fff;
	font-size:14px;
	text-shadow:1px 1px #000;
}

.col1 { width:350px; }
.col2 { width:350px;	}


/* Buttons */

.button_prev{
	border:none;
	background:none;
	padding:0;
	margin:0;
	width:auto;
	height:36px;
	overflow:visible;
	text-align:center;
	display:inline-block;
	white-space:nowrap;
	font-size:12px;
	color:#fff;
	font-weight:bold;
	text-shadow:1px 1px #590102;
	/* Here's the magic sauce
	padding left is the space between the left edge of your button and your text
	background is set to left top
	*/
	padding-left:38px;
	background:url(../images/btn_prev.png) no-repeat 0 0;
	cursor:pointer;
}
.button_prev:hover {color:#ffd800;	cursor:pointer;	background:url(../images/btn_prev.png) no-repeat 0 -36px;}
.button_prev span{
	height:36px;
	display:block;
	margin:0;
	color:#fff;
	font-style:normal;
	line-height:33px;
	/* Here's the magic sauce
	margin right is the radius of your rounded corner if you have one (so pngs don't show through behind)
	padding right is the space between the right edge of your button and your text
	background is set to right top
	*/
	margin-right:-8px;
	padding-right:18px;
	background:url(../images/btn_prev.png) no-repeat 100% 0;

}
.button_prev span:hover {
	color:#ffd800;	cursor:pointer;	margin-right:-8px;
	padding-right:18px;
	background:url(../images/btn_prev.png) no-repeat 100% -36px;
}

.button_next{
	border:none;
	background:none;
	padding:0;
	margin:0;
	width:auto;
	height:36px;
	overflow:visible;
	text-align:center;
	display:inline-block;
	white-space:nowrap;
	font-size:12px;
	color:#fff;
	font-weight:bold;
	text-shadow:1px 1px #590102;
	/* Here's the magic sauce
	padding left is the space between the left edge of your button and your text
	background is set to left top
	*/
	padding-left:18px;
	background:url(../images/btn_next.png) no-repeat left 0;
	
}
.button_next.enabled:hover {color:#ffd800;	cursor:pointer;	background:url(../images/btn_next.png) no-repeat left -36px;}
.button_next span{
	height:36px;
	display:block;
	margin:0;
	color:#fff;
	font-style:normal;
	line-height:33px;
	/* Here's the magic sauce
	margin right is the radius of your rounded corner if you have one (so pngs don't show through behind)
	padding right is the space between the right edge of your button and your text
	background is set to right top
	*/
	margin-right:-8px;
	padding-right:38px;
	background:url(../images/btn_next.png) no-repeat right 0;

}




.button_next.enabled span:hover {
	color:#ffd800;	cursor:pointer;	margin-right:-8px;
	padding-right:38px;
	cursor:pointer;
	background:url(../images/btn_next.png) no-repeat right -36px;
}

.button_next.disabled {
	-khtml-opacity: 0.45;
	-moz-opacity: 0.45;
	cursor:default;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=45)";
	filter: alpha(opacity =             45);
	opacity: 0.45;
}

/*------------------- LOGIN BG --------------*/
#content_login {
	width:780px;
	margin:auto;
	}

#login_wrapper_border {
	width:394px;
	margin-top:30px;
	border:3px solid #eee;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background:url(../images/login_bg.jpg) repeat-y 0 0;
	float:left;
}

#login_wrapper {
	width:360px;
	border:1px solid #989898;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	padding:10px 10px 20px 30px; 
	background:url(../images/login_bg.jpg) repeat-y 0 0;

}

#login_wrapper_bg {width:381px; padding-left:40px; padding-top:30px; height:260px; background:url(login_wrapper_bg.jpg) no-repeat 0 0; margin:auto;}
	#login_input .title_label {color:#222; margin-top:10px; width:300px;  border-bottom:1px solid #bbb; font-size:16px; padding-bottom:3px; margin-bottom:5px;}
	#login_input input {
		background:url(../images/login_input_bg.jpg) no-repeat 0 0;
		border:0 none;
		color:#666666;
		height:30px;
		padding-bottom:2px;
		padding-left:5px;
		padding-top:5px;
		width:315px;
		font-size:16px;
	}
	#login_input input:hover {
		background:url(../images/login_input_bg.jpg) no-repeat 0 -37px;
		border:0 none;
		color:#666666;
		height:30px;
		padding-bottom:2px;
		padding-left:5px;
		padding-top:5px;
		width:315px;
	}
	#login_input input:focus {
	background:url(../images/login_input_bg.jpg) no-repeat 0 -37px;
	border:0 none;
	color:#666666;
	height:30px;
	padding-bottom:2px;
	padding-left:5px;
	padding-top:5px;
	width:315px;
	}
	#login_btn input{
	background:url(../images/btn_login.png) no-repeat 0 0;
	border:0 none;
	cursor:pointer;
	width:105px;
	height:36px;
	float:right;
	margin-right:40px;
	margin-top:20px;
	}
	#login_btn input:hover {
	background:url(../images/btn_login.png) no-repeat 0 -36px;
	border:0 none;
	cursor:pointer;
	width:105px;
	height:36px;
	}
	#login_btn input.disable{
	background:url(../images/btn_login.png) no-repeat 0 -72px;
	border:0 none;
	cursor:pointer;
	width:105px;
	height:36px;
	}

.img_login {	
	margin-top:30px;
	float:left;
	margin-left:30px;
	width:345px;
	height:245px;
	background:url(../images/img_login_wrapper.jpg) no-repeat 0 0;
	padding:5px 0 0 5px;
	}

/*------------------------ Orange Box ---------------------------*/
.width1 {width:350px;}
.width2 {width:350px;}
.orangeBox_border {
	border:1px solid #e6c399;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	margin-bottom:5px;
}
.orangeBox {
	border:1px solid #fff;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background:#fffad8;
	padding:4px;
	

}

.orangeBox_separator {background:url(../images/orangeBox_separator.jpg) no-repeat 0 0; height:2px; margin-top:5px; margin-bottom:5px; }

.txt_date {background:url(../images/ico_date.jpg) no-repeat 0 4px; padding-left:22px;}
.txt_time {background:url(../images/ico_time.jpg) no-repeat 0 4px; padding-left:22px;}
.txt_pers {background:url(../images/ico_pers.jpg) no-repeat 0 4px; padding-left:22px;}
.txt_label {width:90px; float:left; margin-bottom:10px;}
.txt_input {float:left; padding-bottom:3px; padding-top:3px; font-size:11px; height:16px; width:200px;}
.txt_textarea {width:200px;float:left; height:150px;}


/* ----------------------- FOOTER LAYOUT -----------------------*/
/* Footer */
 #footer-wrapper {
    bottom:0;
    left:0;
    width:100%; height:60px;
    }
#footer {
  width:100%;
  height:40px;
  margin-top:20px;
}
.footer_wrapper { 
  width:1000px;
  margin:auto;
  text-align:center;
  padding-top:15px;
  height:20px;
  color:#222;
}