/*
Theme Name:    Syukran V6
Theme URI:     http://syukran.com
Description:   Business & Customised
Version:       6
Author:        Shahib Amin
Author URI:    shahib@syukran.com
*/

html,body {
	margin: 0;
	padding: 0
}

h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,cite,code,img,small,strike,sub,sup,tt,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,button,table,caption,tbody,tfoot,thead,th{
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: normal;
	font-style: normal;
	font-size: 100%;
	line-height: 1;
	font-family: 
	}{
	
}inherit;
	text-align: left
}

ol,ul {
	list-style: none
}

body {
	background: whitesmoke url('image/header.jpg') top repeat-x;
	font-family: Arial, Helvetica, Helvetica Neue, Verdana, sans-serif;
	font-size: 13px;
	line-height: 21px;
	color: #515151;
}


/* -webkit-text-stroke: 1px rgba(255,255,255,0.1); */

/* Header & Navigation & typography */

div.header {
	height: 35px;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-bottom: 10px;
}

div.blog-alternatif {
	border-right: 1px solid #919191;
	border-bottom: 1px solid #bbb;
	margin-bottom: 5px;
	padding: 15px 15px 30px;
	background-color: #fffeff;
}

div.nav {
	float: left;
	margin-left: 30px;
}

div.nav a {
	color: white;
	font: bold 14px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	padding: 9px 15px 12px;
	display: inline-block;
	list-style: none;
}

div.nav a:hover {
	color: #007f82;
	background-color: whitesmoke;
}



div.nav a:active {
	color: #a8e5e7;
	background-color: #004b4d;
}

a {
	color: #c28c00;
	outline: 0;
	line-height: inherit;
	text-decoration: none;
}

a:hover {
	color: #efb00c;
}

a.muted {
	color: #777
}

a.muted:hover {
	color: #555
}

h1 a,h2 a,h3 a {
	color: #333;
	text-decoration: none;
	font-weight: bold
}

h4 a,h5 a {
	text-decoration: none;
	line-height: inherit;
	font-weight: bold
}

h3 a:hover, h4 a:hover, h5 a:hover {
	color: auto
}

p a {
	line-height: inherit
}

h1,h2,h3,h4,h5,h6 {
	color: #333;
	font-weight: bold
}

h1,h2,h3 {
	letter-spacing: -1px
}

h1 {
	font-size: 45px;
	line-height: 1;
	margin: 0 0 9px
}

h2 {
	font-size: 30px;
	line-height: 1.2;
	margin: 12px 0
}

h3 {
	font-size: 24px;
	line-height: 1;
	margin: 6px 0 9px
}

h4 {
	font: 20px/1.3 "Lucida Grande", Lucida, Verdana, sans-serif;
}

h5 {
	font-size: 15px;
	line-height: 1.2}

h6 {
	font-size: 13px;
	line-height: 18px
}

p {
	line-height: 18px;
	margin: 0 0 18px
}

small {
	font-size: 90%;
}

address {
	color: #333;
	line-height: 18px;
	margin: 0 0 18px
}

abbr,acronym {
	text-transform: uppercase;
	font-size: 90%;
	color: #222;
	border-bottom: 1px solid #ddd;
	cursor: help
}

abbr {
	text-transform: none
}

ul,ol {
	margin-bottom: 18px
}

ul {
	list-style: none outside
}

ol,ul.square,ul.circle,ul.disc {
	margin-left: 24px
}

ol {
	list-style: decimal;
	margin-left: 30px
}

ul.square {
	list-style: square outside
}

ul.circle {
	list-style: circle outside
}

ul.disc {
	list-style: disc outside
}

ul ul,ol ol {
	margin-left: 30px;
	margin-top: 4px;
	margin-bottom: 5px
}

li {
	line-height: 18px
}

dt {
	line-height: 18px;
	font-weight: bold;
	color: #333
}

dd {
	margin: 0 0 18px;
	line-height: 18px
}


blockquote,blockquote p {
	font-size: 15px;
	line-height: 23px;
	color: #00615d;
	padding-left: 10px;
	padding-bottom: 10px;
	font-style: italic;
}

.button {
	background: #222 repeat-x 0 0;
	display: inline-block;
	padding: 5px 15px 6px;
	color: #fff !important;
	font-size: 13px;
	font-weight: bold;
	line-height: 1;
	text-decoration: none;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer;
	overflow: visible;
	width: auto
}

button:-moz-focus-inner {
	border: 0;
	padding: 0
}

.button:hover {
	background-color: #111;
	color: #fff
}

.button:active {
	-webkit-transform: translateY(1px);
	-moz-transform: translateY(1px)
}

.small.button {
	font-size: 11px
}

.large.button {
	font-size: 14px;
	padding: 8px 19px 9px
}

.green.button {
	background-color: #00615d
}

.green.button:hover {
	background-color: #05958f
}

.blue.button {
	background-color: #004ab8}

.blue.button:hover {
	background-color: #5997f3}

.cyan.button {
	background-color: #51c3e3
}

.cyan.button:hover {
	background-color: #0a9dc6
}

.red.button {
	background-color: #e33100
}

.red.button:hover {
	background-color: #872300
}

.magenta.button {
	background-color: #a9014b
}

.magenta.button:hover {
	background-color: #630030
}

.orange.button {
	background-color: #ff5c00
}

.orange.button:hover {
	background-color: #d45500
}

.yellow.button {
	background-color: #ffb515
}

.yellow.button:hover {
	background-color: #fc9200
}

.golden.button {
	background-color: #ebb425
}

.golden.button:hover {
	background-color: #D4A017
}

.white.button {
	background-color: #fff;
	border: 1px solid #ccc;
	color: #666 !important;
	font-weight: normal;
	text-shadow: 0 1px 1px rgba(255,255,255,1)
}

.white.button:hover {
	background-color: #6b6b6b;
	color: #fffeff;
}

.secondary.button {
	background: #fff repeat-x 0 0;
	color: #555 !important;
	text-shadow: 0 1px 1px rgba(255,255,255,0.5);
	border: 1px solid #bbb;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1)
}

.secondary.button:hover {
	background-color: #eee;
	color: #444 !important;
	border-color: #999
}

.large.button {
	background-position: left bottom;
	-webkit-border-radius: 18px;
	-moz-border-radius: 18px
}

.large.button span {
	font-size: 14px;
	padding: 7px 20px 9px;
	-webkit-border-radius: 17px;
	-moz-border-radius: 17px
}

/* Home Post */

div.billboard {
	display: block;
	height: 440px;
	-webkit-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
	-moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-bottom: 1px solid rgba(0,0,0,0.25);
	background-color: white;
	text-align:center;
}

div.billboard h2 {
	color: #2e2e2e;
	text-align: center;
	margin: 15px 10px 10px;
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}

div.billboard h4 {
	color: #5f5f5f;
	font-size: 20px;
	font-weight: normal;
	font-style: normal;
	text-align: center;
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}

div.promo {
	display: block;
	height: 260px;
	-webkit-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
	-moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border: 1px solid rgba(0,0,0,0.14);
	background-color: white;
	color: #424242;
}

div.promo:hover {
	border: 1px solid rgba(0,0,0,0.49);
	background-color: #F5F5F5;
	text-decoration: none;
	color: #d4a017;
}

div.promo:active {
	border: 1px solid #ffa700;
	background-color: #f1f1f1;
	text-decoration: none;
	box-shadow: 0 0 8px rgba(255, 168, 0, 1);
	-webkit-box-shadow: 0 0 8px rgba(255, 168, 0, 1);
	-moz-box-shadow: 0 0 8px rgba(255, 168, 0, 1);
}

div.promo h5 {
	font-size: 18px;
	line-height: 1.3
	text-align: left;
	margin: 15px 20px 10px;
}



div.promo p {
	text-align: left;
	margin: 10px 20px;
}

div.promo a {
	text-align: left;
	color: #424242;
}

div.promo span.more {
	color: #D4A017;
	text-decoration: none;
	border-bottom: 1px solid #D4A017;
}

/* Blog Post */

div.blog {
	border-bottom: 1px dotted #bbb;
	padding-bottom: 30px;
	margin-bottom: 5px;
	margin-top: 10px;
}

div.blog h2 span.author {
	color: #d0d3b1;
	font-size: 80%;
	margin-left: 8px;
}

div.blog a:hover {
	border-bottom: 1px dotted #D4A017;
}

div.blog-title {

}

div.blog-title h2 {
	font-size:22px;
	font-weight: bold;
}

div.blog-title span.description {
	color: #d0d3b1;
	font-size: 90%;
	margin-left: 10px;
}

div.blog-title a.title {
	color: #d0d3b1;
	border-bottom: 1px dotted #d0d3b1;
}

div.blog-title a.title:hover,
div.blog-title a:active {
	background-color:#D4A017 ;
	color: white;
}

div.blog h2 a {
	color: #00615d;
}

div.blog h4 a {
	font-weight: bold;
	color: #D4A017;
}

div.blog a:hover {
	background-color: #f9f6ec;
	color: #D4A017;
}

div.blog a:active {
	background-color: #D4A017;
	color: white;
}

div.blog h2 span.date {
	color: #ccc;
	font-size: 80%;
	margin-left: 5px;
}

div.blog h3 {
	font-size: 150%;
	font-weight: bold;
	color: #00615d;
}

div.blog h4 {
	margin-bottom: 25px;
	font-weight: normal;
	font-style: normal;
	color: #ababab;
	font-size: 100%;
}


div.blog.podcast {
	margin: 0 0 18px;
	padding: 18px 20px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border: 1px solid #eee;
	border-top-color: #ddd;
	background: #eef6ed url('image/syukran-podcast.jpg') no-repeat 10px 10px;
}

div.blog.podcast p {
	margin-left: 140px;
}

audio.podcast {
	width: 100%;
	margin: 5px 0;
}

/* Side Post */

div.sidebar {
	margin:10px;
	display: block;
	background-color: #F2F2F2;
	padding: 20px;
	margin:20px;
	float: right;
	width: 195px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
}

div.aside p {
	color: gray;
}

div.aside h5 {
	display: block;
	border-bottom: 1px solid #c8c8c8;
	margin-bottom: 15px;
	padding-bottom: 10px;
	color: #a3a77b;
}

div.aside ul li a {
	display: block;
	padding: 8px 5px;
	width: 90%;
}

div.aside ul li a:hover {
	background-color: #eadab1;
	color: #846002;
}

/* Forms */

input.input-text {
	padding: 10px 10px;
	width: 100%;
	background: white;
	border: 1px solid silver;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	color: #515151;
	margin-bottom: 8px;
	font-size: 11px;
}

input.search {
	padding: 4px 3px;
	width: 270px;
	background: white;
	border: 1px solid #00615d;
	color: #515151;
	font-size: 11px;
	margin-top: 5px;
	float: right;
}

label.search {
	
}

/* Academy */

.post {
	background: #fff;
	-moz-border-radius: 5px;
	-khtml-border-radius: 5px;
	-webkit-border-radius: 5px;
	position: fixed;
	border: 1px solid #cbcbcb;
	margin: 0 10px 10px 0;
	height:240px;
}

.post > div {
	padding: 10px;
}

.post:hover,.post:active, .whiteBlock:hover {
	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0 0px 10px rgba(0, 0, 0, 0.4);
}



.post-header{
	padding: 3px;
}

.post-content {
	margin: 4px 8px 3px;
}



div.roundedbox {
	display: block;
	-webkit-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
	-moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-bottom: 1px solid rgba(0,0,0,0.25);
	background-color: white;
}

div.roundedbox.black {
	display: block;
	-webkit-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
	-moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-bottom: 1px solid rgba(0,0,0,0.25);
	background-color: #2a2a2a;
	color: #e9e9e9;
	text-align: center;
}

div.roundedbox.white {
	background-color: white;
}

ul.navi li a {
	display: block;
	list-style: none;
	color: #7d7d7d;
	margin: 15px 10px 0;
	padding: 3px;
}

ul.navi li a:hover {
	color: #D4A017;
}

img.thumb {
	width: 47px;
	vertical-align: middle;
	margin-right: 10px;
}

div.previous {
	
}

div.next {
	
}

div.video {
	text-align: center;
	margin: 0 30px 20px;
	padding: 15px auto;
}

div.video h4 {
	color: whitesmoke;
	text-align: center;
	margin-top: 10px;
}

div.titlePlaylist {
	width: 100%;
	border-bottom: 1px solid grey;
	border-top: 1px solid #f3f3f3;
	padding: 10px 0 15px;
	background: silver url(image/playlistbg.png) repeat-x;
}

div.titlePlaylist h4 {
	color: #424242;
	font-weight: bold;
	text-align: center;
	text-shadow: 0 1px 1px rgba(255,255,255,0.3);
}

.playlistButton, .playlistButton a {
	background-color: rgba(255,255,255,0.2);
	display: inline-block;
	padding: 5px 15px 6px;
	color: #fff !important;
	font-size: 13px;
	font-weight: bold;
	line-height: 1;
	text-decoration: none;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border: 1px solid rgba(0,0,0,0.3);
	position: relative;
	cursor: pointer;
	overflow: visible;
	width: auto
}

.playlistButton:hover, .playlistButton.active {
	background-color: rgba(0,0,0,0.2);
	text-decoration: none;
	color: white;
}

.playlistButton.right {
	float: right;
	margin-right: 10px;
}

.playlistButton.left {
	float: left;
	margin-left: 10px;
}

div.artwork {
	text-align: center;
	padding: 10px;
}

div.artwork img {
	margin-top: 10px;
	-moz-border-radius: 13px;
	-webkit-border-radius: 13px;
	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
	border-bottom: 1px solid rgba(43,89,83,0.5);
	width: 170px;
	height: 170px;
}

div.cat_meta {
	margin-left: 25px;
	padding: 10px;
	margin-right: 15px;
}

div.cat_meta p {
	color: #919191;
	margin-bottom: 12px;
}

div.cat_meta h5 {
	color: #d3b871;
	margin-bottom: 7px;
}

div.playlist {
	height: auto;
	margin-bottom: 0;
	margin-left: 0;
	float: right;
}

div.playlist ul li {
	width: 694px;
	border-bottom: 1px solid #ededed;
	padding: 12px 0 12px 30px;

}

div.playlist a li {
	color: #424242;
	font-size: 115%;
}

div.playlist a li.alt {
	background-color: #f9f6f2;
}

div.playlist a li:hover {
	color: white;
	background-color: #ebb425;
}

div.playlist a li:active {
	background-color: #D4A017;
	color: white;
}

div.playlist a li:visited {
	color: #adadad;
}

/* Store */

dl#dimensions { display:block; margin-bottom:32px; }
dl#dimensions dt { float:left; }
dl#dimensions dd { margin-left:72px; }
dl#dimensions dt,
dl#dimensions dd { margin-bottom:8px; }
dl#dimensions span { font-weight:bold; color:#000; }

/* Footer */

footer {
	border-top: 1px solid #b4b4b4;
	color: #919191;
	font-size: 90%;
	margin-top: 8px;
	margin-bottom: 30px;
	padding: 20px 0;
	text-align: center;
}

/* Containers --------------------*/

.container_12 {
	margin-left: auto;
	margin-right: auto;
	width: 1000px;
	padding-right: 10px;
	padding-left: 10px;
}

/* Grid >> Global--------------------*/

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
	display: inline;
	float: left;
	position: relative;
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 10px;
}

/* Grid >> Children (Alpha ~ First, Omega ~ Last) --------------------*/

.alpha {
	margin-left: 0;
}

.omega {
	margin-right: 0;
}

/* Grid >> 12 Columns --------------------*/

.container_12 .grid_1 {
	width: 71px;
}

.container_12 .grid_2 {
	width: 152px;
}

.container_12 .grid_3 {
	width: 233px;
}

.container_12 .grid_4 {
	width: 314px;
}

.container_12 .grid_5 {
	width: 395px;
}

.container_12 .grid_6 {
	width: 476px;
}

.container_12 .grid_7 {
	width: 557px;
}

.container_12 .grid_8 {
	width: 638px;
}

.container_12 .grid_9 {
	width: 719px;
}

.container_12 .grid_10 {
	width: 800px;
}

.container_12 .grid_11 {
	width: 881px;
}

.container_12 .grid_12 {
	width: 966px;
}

/* Prefix Extra Space >> 12 Columns --------------------*/

.container_12 .prefix_1 {
	padding-left: 81px;
}

.container_12 .prefix_2 {
	padding-left: 162px;
}

.container_12 .prefix_3 {
	padding-left: 243px;
}

.container_12 .prefix_4 {
	padding-left: 324px;
}

.container_12 .prefix_5 {
	padding-left: 405px;
}

.container_12 .prefix_6 {
	padding-left: 486px;
}

.container_12 .prefix_7 {
	padding-left: 567px;
}

.container_12 .prefix_8 {
	padding-left: 648px;
}

.container_12 .prefix_9 {
	padding-left: 729px;
}

.container_12 .prefix_10 {
	padding-left: 810px;
}

.container_12 .prefix_11 {
	padding-left: 891px;
}

/* Suffix Extra Space >> 12 Columns --------------------*/

.container_12 .suffix_1 {
	padding-right: 81px;
}

.container_12 .suffix_2 {
	padding-right: 162px;
}

.container_12 .suffix_3 {
	padding-right: 243px;
}

.container_12 .suffix_4 {
	padding-right: 324px;
}

.container_12 .suffix_5 {
	padding-right: 405px;
}

.container_12 .suffix_6 {
	padding-right: 486px;
}

.container_12 .suffix_7 {
	padding-right: 567px;
}

.container_12 .suffix_8 {
	padding-right: 648px;
}

.container_12 .suffix_9 {
	padding-right: 729px;
}

.container_12 .suffix_10 {
	padding-right: 810px;
}

.container_12 .suffix_11 {
	padding-right: 891px;
}

/* Push Space >> 12 Columns --------------------*/

.container_12 .push_1 {
	left: 81px;
}

.container_12 .push_2 {
	left: 162px;
}

.container_12 .push_3 {
	left: 243px;
}

.container_12 .push_4 {
	left: 324px;
}

.container_12 .push_5 {
	left: 405px;
}

.container_12 .push_6 {
	left: 486px;
}

.container_12 .push_7 {
	left: 567px;
}

.container_12 .push_8 {
	left: 648px;
}

.container_12 .push_9 {
	left: 729px;
}

.container_12 .push_10 {
	left: 810px;
}

.container_12 .push_11 {
	left: 891px;
}

/* Pull Space >> 12 Columns --------------------*/

.container_12 .pull_1 {
	left: -81px;
}

.container_12 .pull_2 {
	left: -162px;
}

.container_12 .pull_3 {
	left: -243px;
}

.container_12 .pull_4 {
	left: -324px;
}

.container_12 .pull_5 {
	left: -405px;
}

.container_12 .pull_6 {
	left: -486px;
}

.container_12 .pull_7 {
	left: -567px;
}

.container_12 .pull_8 {
	left: -648px;
}

.container_12 .pull_9 {
	left: -729px;
}

.container_12 .pull_10 {
	left: -810px;
}

.container_12 .pull_11 {
	left: -891px;
}

/* Clear Floated Elements --------------------*/

/* http://sonspring.com/journal/clearing-floats */

.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */

.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}

.clearfix {
	display: inline-block;
}

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}