/* Load basic components */
@import url('basic.reset.css');
@import url('basic.helpers.css');

/* ============================================================================
 == Typographic theme ==
 =========================================================================== */

/* - general settings */
.typotheme { font-size: 14px; font-family: Calibri, Arial, sans-serif; line-height: 24px; }
.typotheme p, .typotheme table, .typotheme blockquote, .typotheme ul, .typotheme ol
    { margin: 0 0 14px 0; }
    .typotheme em, .typotheme i { background: #D2E8EF; padding: 3px; }
    .typotheme strong, .typotheme b { font-weight: bold; }
    .typotheme blockquote { margin: auto 20px; padding: 0 10px; border: 5px solid #E2E2E2; border-top: none; border-bottom: none; }
    .typotheme acronym { border-bottom: 1px dotted #CCCCCC; cursor: help }
    .typotheme abbr { border-bottom: 1px dashed #CCCCCC; cursor: help }


/* - headings */
.typotheme h1, .typotheme h2, .typotheme h3, .typotheme h4, .typotheme h5
    { line-height: 1.3em; margin: 0 0 0.35em 0; }
    .typotheme h1 { font-size: 180%; letter-spacing: -0.04em; }
    .typotheme h2 { font-size: 150%; font-weight: bold; letter-spacing: -0.04em; color: #2E2E2E; }
    .typotheme h3 { font-size: 130%; font-weight: bold; letter-spacing: -0.03em; color: #495055; background: #f1f1f1; padding: 3px 7px; }
    .typotheme h4 { font-size: 110%; font-weight: bold; letter-spacing: -0.0em; color: #495055; }
    .typotheme h5 { font-size: 110%; font-weight: bold; letter-spacing: -0.0em; color: #495055; }

/* - lists */
.typotheme ul, .typotheme ol { margin-left: 24px; }
    .typotheme ul ul, .typotheme ol ol { margin-left: 22px; margin-bottom: 0;  }
    .typotheme ul { list-style: disc; }
    .typotheme ul ul { list-style: circle; }
    .typotheme ol { list-style: decimal; }
    .typotheme ol ol { list-style: lower-alpha; }

    .typotheme dl { margin-left: 0.5em; }
    .typotheme dl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* clearfix */
    * html .typotheme dl { height: 1%; } /* clearfix */
    .typotheme dt { width: 100px; float: left; clear: left; padding: 0 7px 0 0; text-align: left; }
    .typotheme dd { float: left; width: auto; }
    .typotheme dt+dd+dt, .typotheme dd+dt+dd  { border-top: 2px solid #e2e2e2;  }

/* - tables */
.typotheme table {  }
    .typotheme table caption { font-size: 110%; font-weight: bold; letter-spacing: -0.0em; margin: 0 0 0.15em 0; }
    .typotheme table th, .typotheme table td { color: #333333; padding: 0.5em 0.7em; }
    .typotheme table thead th { background-color: #D2EAF1; border-top: 1px solid #4BACC6; border-bottom: 1px solid #4BACC6; font-weight: bold; }
    .typotheme table td { border-bottom: 1px solid #4BACC6; }
    .typotheme table tr.odd td { background-color: #E9F0F2; }
    .typotheme table.form-table td { border-bottom: none; }

/* - images */
.typotheme img { margin: 10px; }
    .typotheme img.right, .typotheme img.alignright { float: right; margin: auto 0px auto 10px; }
    .typotheme img.left, .typotheme img.alignleft { float: left; margin: auto 10px auto 0px;  }
    .typotheme .wp-caption { border: 1px solid #d3d3d3; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
    .typotheme .wp-caption.alignright { float: right; margin: auto 0px auto 10px; }
    .typotheme .wp-caption.alignleft { float: left; margin: auto 10px auto 0px;  }
    .typotheme .wp-caption a { display: block; }
    .typotheme .wp-caption a img { display: block; margin: 5px; }
    .typotheme .wp-caption .wp-caption-text { margin: 0 5px; text-align: center; }

/* - forms */
.typotheme form { }
    .typotheme fieldset {  }
    .typotheme legend { font-size: 22px; font-weight: bold; color: #333333; }
    .typotheme label { width: 100px; margin-top: 3px; margin-right: 10px;  font-weight: bold; color: #333; }
    .typotheme input { width: 300px; padding: 5px; font-size: 20px; }
    .typotheme select { width: auto; padding: 5px; margin-top: 7px;}
    .typotheme textarea { width: 300px; height: 100px; font-family: sans-serif; padding: 5px; margin-top: 5px;}
    .typotheme input[type=file] { font-size: 1em; }
    .typotheme input[type=submit], .typotheme input.submit, .typotheme input[type=reset], .typotheme input.reset { width: auto; padding: 4px 10px; font-size: 20px; }

/* Links */
.typotheme a.external { background: url('../img/icons/link-external.png') no-repeat center right; padding-right: 15px; }
.typotheme a[href^=mailto], .typotheme a.mailto { background: url('../img/icons/email.png') no-repeat center right; padding-right: 23px; }

/* Error and notice message boxes */
.typotheme .error, .typotheme .notice { width: auto; padding: 10px; margin: 3px 0; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
.typotheme .error { background-color: #FCDFDC; border: 1px solid #E0AEA9; }
.typotheme .notice { background-color: #E4FCDC; border: 1px solid #B1E0A9; }

/* Other */
.typotheme .audio { padding-left: 20px; background: url('../img/icons/control_play_blue.png') no-repeat center left; }
.typotheme .audio.playing { background-image: url('../img/icons/control_stop_blue.png'); }

/* Twitter Tools */
.typotheme .aktt_tweets li { list-style: none; }
.typotheme .aktt_tweets ul { margin-left: 0; }
.typotheme .aktt_tweets input { width: 200px; }

/* ============================================================================
 == Layout ==
 =========================================================================== */

/* Global */
a { color: #0066CC; /*0056B7*/ }
a:hover { text-decoration: none; }
.clear { clear: both; }

/* Top wrappers */
#page { font-family: Arial, sans-serif; }

/* Header */
#header { width: 100%; height: 249px; background: transparent url("../img/header.bg1.png") repeat-x top left;  }
    #header .inner { width: 1100px; height: 100%; background: transparent url("../img/header.bg2.png") repeat-x top left; margin: 0 auto; position: relative; }
    #header .inner .logo { position: absolute; top: 63px; left: 71px; }
    #header .inner .logo a { width: 300px; height: 67px; position: relative; display: block; }
    #header .inner .logo a span { background: url("../img/header.logo.png") no-repeat top left; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
    #header .inner .navigation { width: 100%; height: 57px; position: absolute; bottom: 0; left: 0; }
    #header .inner .navigation .begin { width: 10px; height: 100%; background: url("../img/header.navigation.begin.png") no-repeat top left; float: left; }
    #header .inner .navigation .end { width: 10px; height: 100%; background: url("../img/header.navigation.end.png") no-repeat top left; float: right; }
    #header .inner .navigation .wrapper { height: 57px; padding: 0 10px; }
    #header .inner .navigation ul { width: 100%; height: 100%; background: url("../img/header.navigation.bg.png") top left; }
    #header .inner .navigation ul li { position: relative; height: 100%; line-height: 57px; padding: 0 8px; background: url("../img/header.navigation.separator.png") no-repeat center left; float: left; display: block; }
    #header .inner .navigation ul li.first { background: none; padding-left: 5px; }
    #header .inner .navigation ul li.search { float: right; background: none; padding-right: 5px; }
    #header .inner .navigation ul li a { font-size: 19px; font-weight: bold; text-decoration: none; display: block; padding: 0 10px; color: white; }
    #header .inner .navigation ul li a:hover { text-decoration: underline; }
    #header .inner .navigation ul li ul { display: none; position: absolute; top: 57px; left: -5px; z-index: 1000; width: 200px; }
    #header .inner .navigation ul li ul li { display: block; background: url("../img/header.navigation.bg3.png") repeat top left; width: 100%; height: 40px; line-height: 40px; }
    #header .inner .navigation ul li ul li a { font-size: 15px; }
    
    #header .inner #searchForm { display: none; position: absolute; top: 60px; right: 20px; width: 300px; text-align: right; }
    #header .inner #searchForm input { width: 150px; padding: 3px; margin-right: 5px; font-size: 20px; }
    #header .inner #searchForm input.submit { width: auto; padding: 4px 10px; font-size: 20px; }

    
/* Body */
#body { width: 1100px; position: relative; clear: both; margin: 30px auto; }
    
    #body .mainColumn { width: 820px; float: left; }
    #body .mainColumn .carusel { width: 788px; height: 197px; margin-bottom: 20px; position: relative; overflow: hidden; }
    #body .mainColumn .carusel .prev, 
    #body .mainColumn .carusel .next { width: 48px; height: 94px; position: absolute; top: 50px; background-position: top left; background-repeat: no-repeat; text-indent: -1000px; overflow: hidden; }
    #body .mainColumn .carusel .prev { left: 0; background-image: url("../img/carusel.navigation.prev.png"); }
    #body .mainColumn .carusel .next { right: -1px; background-image: url("../img/carusel.navigation.next.png"); }
    #body .mainColumn .carusel .prev:hover,
    #body .mainColumn .carusel .next:hover { background-position: bottom left; }
    #body .mainColumn .carusel ul { width: 5000px; height: 100%; position: relative; }
    #body .mainColumn .carusel ul li { float: left; }
    
    #body .mainColumn .articles { margin: 0 30px 0 0; clear: both; }
    #body .mainColumn .articles .article { border-left: 40px solid #DBDBDB; position: relative; padding-left: 20px; margin-bottom: 20px; }
    #body .mainColumn .articles .article h2.title { font-size: 30px; letter-spacing: -2px; border-bottom: 1px solid #E3E3E3; padding: 10px 0 8px; }
    #body .mainColumn .articles .article h3.title { font-size: 25px; font-weight: bold; letter-spacing: -2px; color: #495055; background: #f1f1f1; padding: 3px 7px; }

    #body .mainColumn .articles .article .title .edit { font-size: 16px; letter-spacing: 0; position: relative; top: -3px; }
    #body .mainColumn .articles .article .date { width: 40px; background-color: #F4F4F4; position: absolute; top: 4px; left: -40px; text-align: center; }
    #body .mainColumn .articles .article .date .day { font-size: 22px; display: block; padding: 7px 0 0; }
    #body .mainColumn .articles .article .date .month { font-size: 10px; display: block; padding: 0 0 7px; }
    #body .mainColumn .articles .article .content { padding: 10px 0; }
    #body .mainColumn .articles .article .share { border-bottom: 1px solid #E3E3E3; padding: 5px 0 8px; font-size: 13px; display: block; }
    #body .mainColumn .articles .article .share li { float: left; margin-right: 10px; }
    #body .mainColumn .articles .article .share a { padding-left: 20px; background-position: center left; background-repeat: no-repeat; }
    #body .mainColumn .articles .article .share .facebook a { background-image: url("../img/misc.share.facebook.png"); }
    #body .mainColumn .articles .article .share .linkuj a { background-image: url("../img/misc.share.linkuj.png"); }
    #body .mainColumn .articles .article .share .sme a { background-image: url("../img/misc.share.sme.png"); }
    #body .mainColumn .articles .article .share .universal a { background-image: url("../img/misc.share.universal.png"); }

    #body .mainColumn .articles .navigation { width: 100%; background: #f1f1f1; line-height: 40px }
    #body .mainColumn .articles .navigation .alignleft { float: left; margin-left: 10px; }
    #body .mainColumn .articles .navigation .alignright { float: right; margin-right: 10px; }


    #body .sidebarColumn { width: 280px; float: left; }
    #body .sidebarColumn .box { border: 10px solid #E5E9EA; margin-bottom: 25px; }
    #body .sidebarColumn .box h4 { background-color: #AFD6E2; padding: 8px 17px ; margin: 6px 0 10px; font-size: 24px; font-weight: bold; letter-spacing: -1px; }
    #body .sidebarColumn .box h4 a { color: black; text-decoration: none; }
    #body .sidebarColumn .box.contact { border: 10px solid #AFD6E2; }
    #body .sidebarColumn .box.contact h4 { background-color: #E5E9EA; }
    #body .sidebarColumn .box .content { padding: 0px 17px 10px; }
    #body .sidebarColumn .box.paragraphSeparator .content p { padding-bottom: 5px; margin-bottom: 5px; background: url("../img/misc.sidebar.paragraphSeparator.png") no-repeat bottom left; }
    #body .sidebarColumn .box.contact .content img { margin: 0; }
    #body .sidebarColumn .box .content a.more { float: right; }
    #body .sidebarColumn .box.contact a.external { background: none; }
    #body .sidebarColumn .box.subcategories ul { margin: 0; list-style: none; }

    #body .homepageLinks { margin: 5px 0 20px 0; }
    #body .homepageLinks li { float: left; width: 321px; height: 110px; margin: 0 7px 14px 7px; padding: 14px; border: 1px solid #d3d3d3; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
    #body .homepageLinks li img { float: left; margin: 0 13px 0 0; }
    #body .homepageLinks li h3 { margin: 0px 0 2px; font-size: 19px; }
    #body .homepageLinks li div { font-size: 13px; line-height: 21px; }

    #body #searchForm { margin: 10px 0; }
    #body #searchForm input { width: 300px; float: left; padding: 5px; margin-right: 5px; font-size: 20px; }
    #body #searchForm input.submit { width: auto; padding: 4px 10px; font-size: 20px; }

    #body .homepageGrid {}

/* Footer */
#footer { width: 100%; height: 155px; background: transparent url("../img/footer.bg1.png") repeat-x top left; }
    #footer .inner { width: 1100px; height: 100%; background: transparent url("../img/footer.bg2.png") repeat-x top left; margin: 0 auto; position: relative; }
    #footer .inner .wrapper { position: relative; top: 20px; left: 0; height: 44px; line-height: 44px; background: transparent url("../img/footer.navigation.bg.png") repeat-x top left; color: white; }
    #footer .inner .wrapper a { color: white; }
    #footer .inner .navigation { padding: 0 7px; }
    #footer .inner .navigation li { float: left; padding: 0 13px; background: transparent url("../img/footer.navigation.separator.png") no-repeat center left; }
    #footer .inner .navigation li.first { background: none; }
    #footer .inner .credits { float: right; padding: 0 13px; }


    
/* ============================================================================
 == Other ==
 =========================================================================== */

/* hide addthis stat thingy */
#atffc { display: none; }

#jplayer { position: relative; top: 40px; }