/** --------------------------------------
	file_name	: screen.css
	description	: main layout for BP3IP
	date		: Feb. 06, 10
	
	author		: deni kurniawan
	mail		: deni.k77@gmail.com
	portfolio	: deniku.com
	
-------------------------------------- **/

/* ---       General Classes       --- */

.clear {
	clear: both;
	}		
.align-left {
	float: left;
	}			
.align-right {
	float: right;
	}
	
/* ---       logo image       --- */
#header #logo img {
	margin-top:15px;
	border:none;
	}
	
/* ---       search on top       --- */
#header #search #inner {
	float:right;
	width:242px;
	margin-top:5px;
	}
#header #search #inner input.text-input {
	width:170px;
	border:none;
	color:#8a8a8a;
	background-color:#E2E2E2;
	padding:4px;
	}
#header #search #inner .btn-search {
	display: inline-block;
	background: #E2E2E2 url('../images/btn-src.gif') no-repeat !important;
	border: none !important;
	cursor: pointer;
	}
	
/* ---       main menu       --- */
#menu-top a:link, #menu-top a:visited, #menu-top a:active {
	float:none;
	color:#81c3da;
	text-decoration:none;
	text-shadow:0 1px 0 #000;
	margin-right:30px;
	padding-top:15px;
}
#menu-top a:hover {
	color:#81c3da;
	text-shadow:1px 1px 5px #81c3da;
	background:url(../images/menu-top-arrow.gif) top center no-repeat;
}
#menu-top a.select:link, #menu-top a.select:visited, #menu-top a.select:active, #menu-top a.select:hover {
	color:#b70002;
	text-decoration:none;
	text-shadow:1px 1px 5px #b70002;
	margin-right:30px;
	padding-top:15px;
	background:url(../images/menu-top-arrow.gif) top center no-repeat;
}

#footer-wrap #inner #copyright .left p { margin:0; }
#menu-bottom a:link, #menu-bottom a:visited, #menu-bottom a:active {
	color:#81c3da;
	text-shadow:0 1px 0 #000;
	text-decoration:none;
	}
#menu-bottom a:hover {
	color:#b70002;
	text-shadow:1px 1px 5px #b70002;
	}
#menu-bottom a.select:link, #menu-bottom a.select:visited, #menu-bottom a.select:active, #menu-bottom a.select:hover {
	color:#b70002;
	text-decoration:none;
	text-shadow:1px 1px 5px #b70002;
}

/* ---       headline       --- */
h2.headline {
	text-shadow:1px 1px 0 #8bd1ea;
	margin:0
	}
.dateheadline {
	color:#5a5a5a;
	margin-bottom:15px;
	margin-top:-15px;
	text-shadow:1px 1px 0 #8bd1ea;
	}
a.button-gray2:link, a.button-gray2:visited, a.button-gray2:active {
	float:left;
	height:24px;
	display:block;
	color:#439fb8;
	border:#777777 1px solid;
	background:url(../images/btn-gray.gif) top repeat-x;
	padding:8px 10px 0 10px;
	margin:7px 0 20px;
	}
a.button-gray2:hover {
	color:#b70002;
	}
a.button-gray2 img {
	padding-left:7px;
	margin-bottom:-3px;
	}
img.headline {
	background-color:#222;
	padding:10px;
	}
	

/* ---       Page detail       --- */
#title-page h1 {
	color:#FFF;
	text-shadow:1px 1px 0 #358caa;
	padding-top:5px;
	margin-bottom:10px;
	}
#title-page p { color: #FFF; font-size:13px; }
.dateondetail {
	color:#5a5a5a;
	margin-bottom:15px;
	margin-top:-15px;
	text-shadow:1px 1px 0 #FFFFFF;
	}
	
/* ---       left section       --- */
.left-section { float:left; width:252px; margin-bottom:15px; }
.section-blue {
	float:left;
	width:240px;
	height:30px;
	color:#FFF;
	font-size:20px;
	background:url(../images/bg-titleblue.gif) top repeat-x;
	border:#439db7 1px solid;
	text-shadow:1px 1px 0 #000;
	text-transform:capitalize;
	padding:7px 0 0 10px;
	}
	
/* ---       side navigation       --- */
.sidenav {
	float:left;
	width:230px;
	padding:0px;
	background-color:#FFF;
	padding:5px 10px 10px 10px;
	border:#e3e3e3 1px solid;
	border-top:none;
}
.sidenav ul {
	list-style: none;
	margin:0;
	padding:0;
	border:none;
}
.sidenav ul li {
	margin:0px;
	padding:0px;
	width:232px;
}
.sidenav ul li a img {
	border:none;
	margin-bottom:-2px;
	margin-right:4px;
}
.sidenav ul li a {
	display:block;
	border-bottom:1px solid #e3e3e3;
	text-decoration:none;
	color:#3e3e3e;
	padding:5px 0;
}
.sidenav ul li a:hover, .sidenav ul li a:focus {
	color:#b60300;
}

/* ---       right content       --- */
.right-content { float:left; width:653px; text-align:justify; }
.right-content-hz {
	float:left;
	width:653px;
	text-align:justify;
	background:url(../images/right-hz.gif) bottom left no-repeat;
	padding-bottom:10px;
	margin-bottom:15px;
	}
.right-content-hz p { margin-bottom:15px; }
h2.section-right {
	float:left;
	width:653px;
	height:30px;
	background: url(../images/section-right.gif) bottom left no-repeat;
	margin-bottom:15px;
	}
a.title-red:link, a.title-red:visited, a.title-red:active {
	font-size:16px;
	color:#b70002;
	}
a.title-red:hover {
	text-shadow:1px 1px 5px #b70002;
	}
.date {
	color:#5a5a5a;
	margin-bottom:15px;
	text-shadow:1px 1px 0 #FFF;
	}
a.button-gray:link, a.button-gray:visited, a.button-gray:active {
	float:left;
	height:24px;
	display:block;
	color:#439fb8;
	border:#e3e3e3 1px solid;
	background:url(../images/btn-gray.gif) top repeat-x;
	padding:8px 10px 0 10px;
	margin:7px 0 20px;
	}
a.button-gray:hover {
	color:#b70002;
	}
a.button-gray img {
	padding-left:7px;
	margin-bottom:-3px;
	}
.section-blue {
	float:left;
	width:240px;
	height:30px;
	color:#FFF;
	font-size:20px;
	background:url(../images/bg-titleblue.gif) top repeat-x;
	border:#439db7 1px solid;
	text-shadow:1px 1px 0 #000;
	text-transform:capitalize;
	padding:7px 0 0 10px;
	}
a.goto:link, a.goto:visited, a.goto:active {
	float:right;
	color:#b70002;
	margin-top:5px;
	}
a.goto:hover {
	text-shadow:1px 1px 5px #b70002;
	}
	
/* ---       right navigation       --- */
.section-red {
	float:left;
	width:310px;
	height:30px;
	color:#FFF;
	font-size:20px;
	background:url(../images/bg-titlered.gif) top repeat-x;
	border:#6e0019 1px solid;
	text-shadow:1px 1px 0 #000;
	text-transform:capitalize;
	padding:7px 0 0 10px;
	}
.rightnav {
	float:left;
	width:300px;
	padding:0px;
	background-color:#FFF;
	padding:5px 10px 10px 10px;
	border:#e3e3e3 1px solid;
	border-top:none;
}
.rightnav ul {
	list-style: none;
	margin:0;
	padding:0;
	border:none;
}
.rightnav ul li {
	margin:0px;
	padding:0px;
	width:300px;
}
.rightnav ul li a img {
	border:none;
	margin-bottom:-2px;
	margin-right:4px;
}
.rightnav ul li a {
	display:block;
	border-bottom:1px solid #e3e3e3;
	text-decoration:none;
	color:#3e3e3e;
	padding:5px 0;
}
.rightnav ul li a:hover, .rightnav ul li a:focus {
	color:#b60300;
}

/* ---       page navigation       --- */
.pagination {
	float:none;
	text-align: center;
	padding: 10px 0 5px 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	}
.pagination a.number {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	}
.pagination a {
	margin: 0 2px 0 0;
	padding: 4px 8px;
	text-decoration:none;
	}
.pagination a.number {
	background: #FBB941 url(../images/nav-gray.gif) top left repeat-x !important;
	border: 1px solid #777777;
	color:#222;
	}
.pagination a.number:hover {
	border: 1px solid #777777;
	color:#b80004;
	}
.pagination a.current {
	background: #FBB941 url(../images/nav-green.gif) top left repeat-x !important;
	border-color: #777777 !important;
	color: #FFF !important;
	}		
.pagination a.current:hover {
	text-decoration: none;
	}
	

/* ---       form       --- */

form label {
	display: block;
	padding: 0 0 10px;
	font-weight: bold;
	}
form p { margin: 10px 0;}
             
form fieldset legend {
	font-weight: bold;
	margin-bottom: 10px;
	padding-top: 10px;
	}
                
form p small {
	font-size: 0.75em;
	color: #777;
	}
				
				
form input.text-input,
form select,
form textarea,
form .wysiwyg {
	padding: 6px;
	font-size: 13px;
	background: #fff url('bg-form-field.gif') top left repeat-x;
	border: 1px solid #d5d5d5;
	color: #333;
	}
            
form .small-input {
	width: 25% !important;
	}
                
form .medium-input {
	width: 50% !important;
	}
                
form .large-input {
	width: 97.5% !important;
	font-size: 16px !important;
	padding: 8px !important;
	}
                
form textarea {
	width: 97.5% !important;
	font-family: Arial, Helvetica, sans-serif;
	}
                
form select {
	padding: 4px;
	background: #fff;
	}
				
form input[type="checkbox"],
form input[type="radio"] {
	padding: 0;
	background: none;
	border: 0;
	}
	
/* Notification for form inputs */
.success {
	background: #d2f0b4 url('../images/tick_circle.png');
	border-color: #7dba40;
	color: #556652;
	}

.error {
	background: #f0c1b4 url('../images/cross_circle.png');
	border-color: #d75e3d;
	color: #665252;
	}
.input-notification {
	background-position: left 2px;
	background-repeat: no-repeat;
	padding: 2px 0 2px 22px;
	background-color: transparent;
	margin: 0 0 0 5px;
	}
	
.button {
	font-family: Verdana, Arial, sans-serif;
	display: inline-block;
	background: #77b200 url(../images/btn-green.gif) top left repeat-x !important;
	border: 1px solid #77b200 !important;
	padding: 4px 7px 4px 7px !important;
	color: #fff !important;
	font-size: 11px !important;
	cursor: pointer;
	text-decoration:none;
	}
                
.button:hover {
	text-decoration: underline;
	}
                
.button:active {
	padding: 5px 7px 3px 7px !important;
	}
	
/************ Elements styling ************/

h1, h2, h3, h4, h5, h6 {
	font-family: Helvetica, Arial, sans-serif;
	color: #3e3e3e;
	font-weight: bold;
	letter-spacing:0.8pt;
	}

h1 { font-size: 38px; padding:0; text-shadow:1px 1px 0 #FFF; line-height:20px; }
h2 { font-size: 26px; padding: 10px 0 15px 0; text-shadow:1px 1px 0 #FFF; line-height:28px; }
h3 { font-size: 17px; padding: 0 0 10px 0; }
h4 { font-size: 16px; padding: 0 0 5px 0; }
h5 { font-size: 14px; padding: 0 0 5px 0; }
h6 { font-size: 12px; padding: 0 0 5px 0; }


a { color: #439ebb; text-decoration: none; }
a:hover { color: #b80004; }
a:active { color: #b80004; }
a:focus { outline: 1px; }




.inputtext {

    border: 1px solid silver;
    font-size: 120%;
    padding: 3px;
    /*font-weight: bold;*/
}
.inputsmall {

    border: 1px solid silver;
    font-size: 100%;
    padding: 2px;
    /*font-weight: bold;*/
}
.inputsubmit {

    /*border: 1px solid #cfcfcf;*/
    /*font-size: 100%;*/
    padding: 3px;
    font-weight: bold;
    width: 100px;
}



#dash table{
    background: #FFFFFF;
}
#dash th {
    background: #449eb8;
    color: #ffffff;
    height: 35px;
}
#dash tr {
    background: #f4f4f4;

}
#dash td {
    font-size: 100%;
}
#dash td a {
    text-decoration: none;
}



ol {
	text-decoration: none;
	list-style-position: outside;
	list-style-type: circle;
	padding-left: 15px;
	margin-top:-5px;
	margin: 2px;
}

ul {
	text-decoration: none;
	list-style-position: outside;
	list-style-type: circle;
	padding-left: 15px;
	margin-top:-5px;
	margin: 2px;
}