/**********************************************************************************************

Author: Rian Triharyana (http://linkedin.com/in/rtriharyana)

1 Reset
2 Clearfix
3 Global
4 Structure
5 Header & Navigation
6 Content
7 Sidebar
8 Footer

***********************************************************************************************/

/* 1 Reset
-----------------------------------------------------------------------------------------------*/

html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, samp, small, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
a, ins, del { text-decoration: none; }
table { border-collapse: collapse; border-spacing: 0; }
th, td { vertical-align: top; }
th { text-align: left; }


/* 2 Clearfix
-----------------------------------------------------------------------------------------------*/

.clearfix:after,
#top-nav:after,
#top-nav ul:after, 
.wrap-inside:after,
#navigation:after,
#navigation ul:after,
#content:after,
#content .home-section ul:after,
#content .primary .article-tools:after,
#content .primary .article-tools ul:after,
#content .wide ul.cover-list:after { content: "."; display: block; height: 0; clear: both; visibility: hidden }


/* 3 Global
-----------------------------------------------------------------------------------------------*/


ol#accessibility, .hide { position: absolute; top: -999em; left: -999em; height: 1px; width: 1px; }
body { background: #595959 url(../images/bg-body.png) left top repeat-x; color: #484848; font: 62.5%/1.3 "Arial", "Helvetica", sans-serif; text-align: center; }
hr { display: none; }
strong { font-weight: bold; }
em { font-style: italic; }
del { text-decoration: line-through; }
th { font-weight: normal; }
address, cite, dfn { font-style: normal; }
li { list-style: none; }
abbr, acronym { border-bottom: 1px dotted #999; cursor: help; }
input, textarea, select { font: 1em "Arial", "Helvetica", sans-serif; }
a { color: #991414; text-decoration: none; }
a:hover { text-decoration: underline; }
.ir, .ir span { position: relative; display: block; overflow: hidden }
.ir span { position: absolute; left: 0; top: 0; width: 100%; height: 100% }
* a, a, .ir span { cursor: pointer }
h4.section-subheading { color: #1578a2; font-weight: normal; font-size: 10px; text-transform: uppercase; letter-spacing: 2px; padding-bottom: 12px }
a.more { font-family: 'Georgia', 'Times New Roman', serif; font-size: 14px; font-style: italic; color: #000 }
h5.section-heading-diary,
p.subtitle { font-size: 15px; color: #991414; padding-bottom: 30px; font-weight: bold }

/* 4 Structure
-----------------------------------------------------------------------------------------------*/

.wrap { width: 980px; position: relative; margin: 0 auto; text-align: left; font-size: 1.2em; }
.wrap-inside { background: #fff }
#content { width: 782px; float: right; }
#sidebar { width: 200px; float: left; }
#footer { clear: both; }


/* 5 Header & Navigation
-----------------------------------------------------------------------------------------------*/

#top-nav { padding-top: 14px; font-size: 11px; color: #fff; height: 27px; margin-bottom: 47px }
#top-nav h4 { float: right; text-transform: uppercase }
#top-nav ul { width: 440px; float: left }
#top-nav ul li { display: inline }
#top-nav ul li a { float: left; margin-right: 10px; display: block; text-transform: uppercase; color: #fff }
#top-nav ul li a:hover,
#top-nav ul li.active a { color: #54acdc; text-decoration: none }

#header { background: url(../images/bg-header.png) no-repeat right top; position: relative; width: 980px; height: 138px; border-bottom: 1px solid #d3d3d3 }
body.home #header .ir span{ cursor: default !important } 
#header .logo { width: 424px; height: 90px; padding-top: 20px; top: -20px }
#header .logo span { background: url(../images/logo.png) no-repeat }
#header .garuda-60 { display: block; width: 116px; height: 41px; text-indent: -9999em; background: url(../images/logo-garuda_60.png) no-repeat; position: absolute; right: 0; top: -35px }
#header .garuda-indonesia { position: absolute; right: 25px; bottom: 48px }
#header .garuda-indonesia,
#header .garuda-indonesia span { display: block; width: 175px; height: 33px } 
#header .garuda-indonesia span { background: url(../images/logo-garuda.png) no-repeat }
body.home #header .garuda-indonesia span { cursor: pointer !Important }
#header .skytrax { display: block; text-indent: -9999em; width: 90px; height: 90px; background: url(../images/skytrax.png) no-repeat; position: absolute; top: -45px; right: 0 }

#navigation { height: 42px; position: relative; border-bottom: 1px solid #d3d3d3 }
#navigation ul { padding: 12px 0 0 25px; float: left; width: 600px }
#navigation ul li { display: inline }
#navigation ul li a { float: left; margin-right: 15px; text-transform: uppercase; color: #333; font-size: 16px }
#navigation ul li a:hover { color: #54acdc; text-decoration: none }
#navigation ul li.active a { font-weight: bold }

#navigation form { float: right; padding: 11px 25px 0 0 }
#navigation form input { background: #dfdfdf; border: 1px solid #b7b7b7; padding: 2px; color: #898989; width: 180px }
select { width: 182px !important }


/* 6 Content
-----------------------------------------------------------------------------------------------*/
#content .primary { float: left; width: 549px; padding: 25px 0 0; min-height: 900px; height: auto; position: relative }

#content .home-coverstory { padding: 0 23px }
#content .home-coverstory .coverstory-image { padding: 0; margin-bottom: 14px }
#content .home-coverstory h1,
#content .primary .page-section h1 { font-size: 24px; color: #000; font-weight: normal; padding-bottom: 12px }
#content .home-coverstory h1 a,
#content .primary .page-section h1 a { color: #000 }
#content .home-coverstory h1 a:hover,
#content .primary .page-section h1 a:hover { color: #646464; text-decoration: none }

#content .home-coverstory .home-coverstory-content { line-height: 19px }
#content .primary .page-section p.overview,
#content .primary .page-section p.prologue { font-size: 16px; color: #b36464; line-height: 23px }
#content .primary .article-tools { border-top: 1px solid #d3d3d3; padding: 20px 23px 50px 23px }
body.search .primary .article-tools { position: relative; left: -23px; width: 736px }
#content .primary .article-tools ul { float: left; width: 50% }
#content .primary .article-tools ul.paging { float: right; width: auto }
#content .primary .article-tools ul.paging li { display: inline; font-family: 'Georgia', 'Times New Roman', serif; font-size: 13px; font-style: italic }
#content .primary .article-tools ul.paging li a { color: #000; padding-left: 5px }
#content .primary .article-tools ul.paging li.active a { font-weight: bold }
/*body.search .primary .article-tools ul.paging { padding-right: 23px }*/
#content .primary .article-tools ul.share li { display: block; float: left; font-family: 'Georgia', 'Times New Roman', serif; font-size: 13px; font-style: italic }
#content .primary .article-tools ul.share li.email-this a { color: #999; background: url(../images/ico-email.png) no-repeat left top; padding: 3px 0 2px 22px; font-size: 11px }

#content .primary .article-tools ul.share li a.ir,
#content .primary .article-tools ul.share li a.ir span { width: 18px; height: 18px }
#content .primary .article-tools ul.share li.fb a span { background: url(../images/ico-fbtwitter.png) no-repeat left top }
#content .primary .article-tools ul.share li.twitter a span { background: url(../images/ico-fbtwitter.png) no-repeat -26px top }
#content .primary .article-tools ul.share li.fb { margin-left: 10px; margin-top: -1px }
#content .primary .article-tools ul.share li.twitter { margin-left: 5px; margin-top: -1px }

#content .primary ul.article-list li { padding-bottom: 10px }
#content .primary ul.article-list li h2,
span.title { font-size: 20px; font-weight: normal; color: #000; padding-bottom: 15px; margin-top: -5px; display: block }
span.subtitle { font-size: 13px; font-weight: bold; color: #000; }
#content .primary ul.article-list li h2 a { color: #000 }
#content .primary ul.article-list li h2 a:hover { color: #991414; text-decoration: none }

#content .primary ul.article-list li p,
#content .primary .event-list p { padding-bottom: 25px; line-height: 19px }
#content .primary ul.event-list dl { padding-bottom: 10px }
#content .primary ul.event-list dl dt,
#content .primary ul.event-list dl dd { display: inline; font-style: italic; color: #666; line-height: 19px }
#content .wide { padding: 25px 23px 0; width: 715px }
#content .wide ul.cover-list li { display: block; width: 146px; float: left; margin-right: 30px; padding-bottom: 35px; text-align: center }
#content .wide ul.cover-list li h2 { text-transform: uppercase; padding-top: 5px; font-size: 10px; letter-spacing: 2px }
#content .wide ul.cover-list li h2 a { color: #333 }

#content .home-section { border-top: 1px solid #d3d3d3; padding: 0 23px; margin-top: 25px }
#content .home-section ul li.home-section-col { width: 226px; float: left; padding: 25px 0 }
#content .home-section ul li.departments-col { float: right; padding-left: 24px; border-left: 1px solid #d3d3d3 }
h3.section-heading,
span.wo-title { font-size: 12px; color: #991414; font-weight: normal; text-transform: uppercase; letter-spacing: 2px; padding-bottom: 12px; display: block }
span.ww-title { font-size: 12px; color: #991414; font-weight: normal; text-transform: uppercase; letter-spacing: 2px; padding-bottom: 12px; display: block }
h3.section-heading-detail { padding: 10px 0 3px !Important }

#content .home-section ul li.home-section-col ul li h2 {  font-size: 20px; font-weight: normal; color: #000; padding-bottom: 15px }
#content .home-section ul li.home-section-col ul li h2 a { color: #000 }
#content .home-section ul li.home-section-col ul li h2 a:hover { text-decoration: none; color: #646464 }
#content .home-section ul li.home-section-col ul li .section-content { padding-bottom: 25px; line-height: 19px }
#content .home-section ul li.home-section-col ul li .section-image { padding-bottom: 12px }

#content .secondary { float: right; width: 232px; border-left: 1px solid #d3d3d3; padding: 25px 0 0 }
#content .secondary ul.box li { padding: 0 25px 25px  }
#content .secondary ul.box li.separator { border-bottom: 1px solid #d3d3d3; margin-bottom: 30px }
#content .secondary ul.box li h4 { color: #595959; font-weight: normal; font-size: 10px; text-transform: uppercase; letter-spacing: 2px; margin-top: -2px; padding-bottom: 14px; line-height: 16px }
#content .secondary ul.box li.publication ul li { padding: 0; text-align: center ; margin-bottom: 10px }
#content .secondary ul.box li ul.article-list li { padding: 10px 0; border-bottom: 1px dashed #b2b2b2;  }
#content .secondary ul.box li ul.article-list li.last { padding-bottom: 0; border: 0 }
#content .secondary ul.box li ul.article-list li h3 { padding-bottom: 5px; font-size: 11px }
#content .secondary ul.box li ul.article-list li h4 { text-transform: none; letter-spacing: normal; font-size: 14px; padding-bottom: 0 }
#content .secondary ul.box li ul.article-list li h4 a { color: #000 }
#content .secondary ul.box li ul.article-list li.active h4 a { color: #666 }
#content .secondary div.important h3 { color: #991414; font-family: 'Georgia', 'Times New Roman', serif; font-size: 16px; font-weight: normal; padding-bottom: 10px }
#content .secondary div.important { padding: 0 25px }
#content .secondary div.important h4 { font-size: 12px; font-weight: normal; padding-bottom: 10px }
#content .secondary div.important p { font-size: 11px; padding-bottom: 10px; line-height: 17px }
#content .secondary div.important p.important-image { text-align: center; margin-top: 20px }
#content .secondary div.important p.important-image img { padding: 4px; border: 1px solid #d3d3d3 }

#content .page-section { padding: 0 23px 25px }
#content .wide .page-section { padding: 0 }
#content .page-section .page-section-content { line-height: 19px } 
#content .page-section .page-section-content p { padding-bottom: 15px }
#content .page-section .page-section-content p img { margin-top: 5px }
#content .page-section .page-section-content ol { padding-bottom: 20px }
#content .page-section .page-section-content ol li { padding: 0 ; margin: 0; margin-left: 40px; list-style: decimal }

#content .page-section .email-form { margin-top: 25px }
#content .page-section .email-form p { padding-bottom: 20px }
#content .page-section .email-form p label,
#content .page-section .email-form p small { display: block }
#content .page-section .email-form p small { font-size: 11px; font-style: italic }
#content .page-section .email-form p input.input,
#content .page-section .email-form p textarea { margin-top: 5px; border: 1px solid #999; padding: 4px 2px; width: 300px; display: block } 
#content .page-section .email-form p #go-submit { width: 40px !Important; background: #dfdfdf; text-transform: uppercase }
#content .page-section p.error { padding-top: 15px; color: #991414 }

/* 7 Sidebar
-----------------------------------------------------------------------------------------------*/
#sidebar { width: 197px; border-right: 1px solid #d3d3d3; position: relative; text-align: center; padding-bottom: 25px }
body.home #sidebar { padding-top: 25px; padding-bottom: 0 }
#sidebar ul.sidebox li { padding: 20px 20px 10px } 
#sidebar ul.sidebox li.separator { border-bottom: 1px solid #d3d3d3 }
#sidebar ul.sidebox li ul li,
#sidebar ul.side-nav li ul li { padding: 10px; border-bottom: 1px dashed #b2b2b2; font-family: 'Georgia', 'Times New Roman', serif; font-size: 13px; font-style: italic }
#sidebar ul.sidebox li ul li.last,
#sidebar ul.side-nav li ul li.last { border-bottom: 0 }
#sidebar ul.side-nav li ul li.last { padding-bottom: 0 }
#sidebar ul.sidebox li ul li a,
#sidebar ul.side-nav li ul li a { color: #000 }
#sidebar ul.sidebox li ul li.active a,
#sidebar ul.side-nav li ul li.active a { color: #828282 }
#sidebar ul.sidebox li.ads ul li { padding: 10px 0 0; text-align: center; border: none }
#sidebar ul.sidebox li h5.writer { font-family: 'Georgia', 'Times New Roman', serif; font-size: 12px; font-style: italic; font-weight: normal; margin-top: -5px; margin-bottom: 10px }
#sidebar ul.sidebox li h5.writer a,
#sidebar ul.sidebox li h5.writer span { color: #991414 }
#sidebar ul.sidebox li select { width: 147px !important }


#sidebar ul.side-nav { padding: 25px; border-bottom: 1px solid #d3d3d3; width: 148px; position: relative; top: 0; right: 0px; background-color: #fff }
#sidebar ul.red { background-image: url(../images/border-red.png); background-position: left top; background-repeat: repeat-y  }
#sidebar ul.blue { background-image: url(../images/border-blue.png); background-position: left top; background-repeat: repeat-y  }
#sidebar ul.red li h1,
#sidebar ul.blue li h1 { font: 16px 'Georgia', 'Times New Roman', serif; font-weight: normal; color: #000; font-style: italic }
#sidebar ul.blue li h1 { color: #991414 }

#sidebar ul li.about-article p,
p.text-by { font-family: 'Georgia', 'Times New Roman', serif; font-size: 11px; font-style: italic }
p.text-by { display: block; padding-bottom: 25px; margin-top: -5px }
#sidebar ul li.about-article p a,
#sidebar ul li.about-article p.text-by span,
#sidebar ul li.about-article p.photo-by span,
p.text-by span { color: #991414; font-size: 12px !important }
#sidebar ul li.about-article p.text-by { padding-bottom:0 !important }
#sidebar ul li.about-article p.email-this { padding-top: 20px }
#sidebar ul li.about-article p.email-this a { color: #999; background: url(../images/ico-email.png) no-repeat left top; padding: 3px 0 2px 22px; font-size: 11px }

#sidebar ul.other-article li span { display: block }

/* 8 Footer
-----------------------------------------------------------------------------------------------*/
#footer { background: #000; text-align: center }
#footer .footer-inside { width: 980px; margin: 0 auto; text-align: left; padding: 25px 0 50px; color: #fff; text-transform: uppercase }
#footer .footer-inside a { color: #fff }
#footer .footer-inside ul { display: block; padding-bottom: 30px }
#footer .footer-inside ul li { display: inline }
#footer .footer-inside ul li a { float: left; margin-right: 10px; display: block; text-transform: uppercase; color: #fff }
#footer .footer-inside ul li a:hover,
#footer .footer-inside ul li.active a { color: #54acdc; text-decoration: none }


/* Span/title */

span.quiztitle { color: #75552A; font-size:1.2em; font-family: Arial, Helvetica, sans-serif; font-weight: bold }
span.tp { font-size:11px; color: #666666 }
span.email { font-size:13px; color: #FE5301; font-weight: normal }
span.name { font-size:11px; color: #75552A; font-weight: bold }
span.name a { font-size:11px; color: #75552A; font-weight: bold }
span.prologue { color: #CF4E10; font-size:1.1em; font-family: "Lucida Sans Unicode", "Lucida Sans", "Lucida Grande", verdana, lucida, sans-serif; font-weight: normal }
span.titlesearch { font-family: Georgia, Garamond, Times, "Times New Roman", serif; font-size: 0.75em; color: #FFFFFF; text-decoration: none; position: relative; bottom: 4px; font-weight: bold }