html, body {
  min-height:100%;
  margin:0;
  padding:0;
  background: url('/images/shortcut/perodical_bg_main.png');

  font: 14px/1.4 "Helvetica Neue", "Helvetica", sans-serif;
  overflow:visible;
}

.container {
  max-width: 950px;
  margin: 0 auto;
  padding: 0 10px;
  overflow: auto; /* Paul O Brien Fix for IE www.pmob.co.uk */
  box-sizing: border-box;
}

/* ------------ begin header ------------------------------- */

#header {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 52px;
  background:url('/images/shortcut/public_head_bg.png') repeat-x;
  -moz-box-shadow:    0 2px 8px 0 #a7a7a7;
  -webkit-box-shadow: 0 2px 8px 0 #a7a7a7;
  box-shadow:         0 2px 8px 0 #a7a7a7;
}

#logo {
  display: inline-block;
  width: 88px;
  height: 30px;
  margin-top: 10px;
  background: transparent url(/images/shortcut/logo_kooaba_shortcut.png) no-repeat left center;
}

#logo:hover {
  background-color: transparent;
}

/* @group Navigation */

ul.compact {
  margin: 0px 20px;
  padding: 0px;
}

ul.navigation {
  float: right;
  margin-top: 14px;
  padding: 4px 8px;
  background-color: #ebebeb;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;

  list-style-type: none;
  line-height: 100%;
  text-align: right;
}

ul.navigation li {
  display: inline-block;
  margin: 0 4px;
  color: white;
}

ul.navigation li a, ul.navigation li a:visited {
  color: black;
  text-decoration: none;
}

ul.navigation li a:hover {
  background: none;
  text-decoration: underline;
}

ul.navigation li a.selected {
  font-weight: bold;
}

/* -------------- end navigation ---------------------------------*/


#main {
  padding: 0 0 100px;
  box-sizing: border-box;
}

/*don't want rounded border for peridicalpage*/
#main.medium_periodical_page {
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
}

#about {
  color: #666;
  font-size: 11px;
  text-align: right;
}

h1 {
  font-weight: bold;
  font-size: 20px;
  color:#333;
  margin:10px 0 0 0;
  padding:0;
}

h2 {
  font-weight: bold;
  font-size: 12px;
  color:#666;
  margin:10px 0 0 0;
  padding:0;
}

#titlebar {
  margin-top:30px;
  margin-bottom:30px;
}

#page_description {
  font-size: 10px;
  color:#666;
  margin:10px 0 0 0;
  padding:0;
}

.details .social_links {
  display: none;
}

.social_links {
  float:right;
  text-align:right;
  width:300px;
  margin-top: -30px;
}

.social_links > div {
  display: inline-block;
  font-size: 1px;
}
.fb_reset {
  display: inline;
}

#titlebar hr {
  width:600px;
  border: 0;
  color: #9E9E9E;
  background-color: #9E9E9E;
  height: 1px;
  margin-left:0;
  text-align: left;
}


/* -- sidebar  -- */

div.sidebar {
  float: right;
  width: 310px;
}

div.sidebar p {
  font-size: 13px;
  margin-left: 5px;
}

div.sidebar ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

div.sidebar ul li {
  margin: 0;
  margin-bottom: 6px;
}

div.sidebar ul li.indented {
  padding-left: 40px;
}

div.sidebar h3 {
  font-size: 16px;
  font-weight: 400;
  margin:0 0 20px 0;
  padding:0;
}

div.sidebar h4 {
  font-size: 13px;
  color:#666;

/* makes IE7 happy */
  min-height: 29px;
  line-height: 29px;
}

.box {
  background: #efefef;
  padding: 10px 15px;
  margin-bottom:20px;
  overflow:auto;

  -moz-box-shadow:    0 -1px 1px 0 #a7a7a7;
  -webkit-box-shadow: 0 -1px 1px 0 #a7a7a7;
  box-shadow:         0 -1px 1px 0 #a7a7a7;

  border-radius:              5px;
  -moz-border-radius:         5px;
  -webkit-border-radius:      5px;
}

.box .definition_list .key {
  padding-right: 10px;
  font-weight: bold;
}

div.sidebar .box img.iconleft {
  float:left;
  margin:10px 10px 10px 0;
}

div.sidebar .box a.imglink  {
  text-decoration:none;
}

div.sidebar .box a.imglink:hover  {
  text-decoration:none;
  background:transparent;
}

div.sidebar ul.articles {
    margin-bottom:20px;
}

div.sidebar li a {
  color:#666;
}

div.sidebar li a:hover {
  background:transparent;
  text-decoration:underline;
  color:#000;
}

div.sidebar li.article {
  margin:0;
  padding:0 0 5px 10px;
  border-bottom:1px solid silver;
}

div.sidebar li.article:last-child   {
  border-bottom:none;
}

div.sidebar li.article h4 {
  margin:0;
  padding:0;
}

div.sidebar h4 {
  font-weight: normal;
}

div.sidebar li.page_pdf_download_link {
  background: transparent url(/images/iphone/pdf_download_icon.png) no-repeat top left;
  padding: 8px 0 8px 35px;
  margin:0 0 3px 0;
}

div.sidebar li.page_pdf_download_link a:hover {
  color:#333;
}

div.sidebar li.page_viewer_link {
  background: transparent url(/images/iphone/pdf_icon.png) no-repeat top left;
  padding: 8px 0 8px 35px;
  margin:0 0 3px 0;
}

div.sidebar .group-info img.iconleft{
  margin-top:0px;
}

div.sidebar .group-info h4 {
  min-height:13px;
  line-height:20px;
  margin:0;
  padding:0;
  font-weight:bold;
}

div.sidebar .group-info p {
  width:240px;
}

/* hide app download links based on user agent, which is set by body class (javscript sets it) */)

body.iphone a.promo-shortcut-app-iphone { }

body.iphone a.promo-shortcut-app-android {
  display:none;
}

body.iphone a.promo-shortcut-app-windows {
  display:none;
}


body.android a.promo-shortcut-app-android { }

body.android a.promo-shortcut-app-windows {
  display:none;
}
body.android .promo-shortcut-app-iphone {
  display:none;
}


body.windows a.promo-shortcut-app-windows { }

body.windows a.promo-shortcut-app-iphone {
  display:none;
}
body.windows a.promo-shortcut-app-android {
  display:none;
}




/*-- details area --*/


div.details {
  font-size: 11px;
  float:left;
  width: 600px;
  margin-bottom: 20px;
}

div.details label {
  color: gray;
  font-weight: bold;
}

.details a, .details a:visited {
  padding: 1px 15px 2px 3px;
  background: transparent url(/images/detail_arrow.png) no-repeat center right;
  text-decoration: none;
}

.details a:hover {
  background-color:#415870;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

div.details #embedded_page {
  background-color:#fff;
  border:1px solid #dedede;
  -webkit-box-shadow: #B4AAA0 1px 1px 3px;
  -moz-box-shadow:    #B4AAA0 1px 1px 3px;
  box-shadow:         #B4AAA0 1px 1px 3px;
}

div.details ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

div.details ul li {
  margin: 0;
  margin-bottom: 6px;
}

div.details ul li.indented {
  padding-left: 40px;
}

.details a, .details a:visited {
  padding: 0px;
  background: none;
  text-decoration: none;
}

.details a:hover {
  background-color:#415870;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

.details a[target="_blank"], .details a:visited[target="_blank"] {
  margin-left: -2px;
  padding: 1px 15px 2px 2px;
  background: transparent url(/images/detail_arrow.png) no-repeat center right;
  text-decoration: none;
}

.details a:hover[target="_blank"] {
  background-color:#415870;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

/*emmbedded flash styles. Overrides styles in swfbox.css */

.details #embedded_page .swf_viewer_navigation {
  position: relative;
  bottom: 20px;
  width: 100%;
}

.details #embedded_page .swf_viewer_navigation ul li{
    margin:0px 5px;
}

.details #link_to_fullscreen {
  margin-top:10px;
  padding-right:10px;
  text-align:right;
}

.details #link_to_fullscreen a {
  color:#666;
  padding-right:20px;
  background: url('/images/shortcut/icon-scale-fullscreen.png') right no-repeat; 
}

.details #link_to_fullscreen a:hover {
  text-decoration:underline;
  color:#666;
}

/* needed for zoom icons */
a.icon, a:active.icon, a:hover.icon {
  display:block;
  text-decoration: none;
}


/* stuff to show when subscription is needed */
.details .subscription_needed, .details .view_preparation_failed, .details .this_page_remote {
  background-color:#FFC;
  padding:10px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}



div.promo a.button {
  color: #4C566C;
  display: block;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  background-color: #C5E758;
  border: 1px solid #6E8046;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  padding: 10px;
}



/* --- some genral styles --- */

div.footer {
  margin-top: 10px;
  border-top: 1px solid #bbb;
  clear: left;
}

p.kooaba {
  background: transparent url(/images/kooaba_icon_11.png) no-repeat left 3px;
  padding-left: 20px;
}

div.paragraph {
  margin: 1em 0px;
}

.inline {
  display: inline-block;
  vertical-align: middle;
}

div.details ul {
  font-size: 11px;
  line-height: 14px;
  font-family: "Lucida Grande","Trebuchet MS",Verdana,sans-serif;
}

div.details h3 {
  margin-top: 16px;
    color:#333;
}

div.actions {
  margin-top: 4px;
}

.resource_icon {
  position: absolute;
  display: inline;
  margin-left: -40px;
}

div.subscription_needed, div.view_preparation_failed, div.this_page_remote {
  margin-left: 0px;
}

/* ----- comments -------- */

#commentsblock {
  background: #efefef;
  padding: 10px 15px;
  margin-bottom:20px;
  margin-top:40px;
  overflow:auto;

  -moz-box-shadow:    0 -1px 1px 0 #a7a7a7;
  -webkit-box-shadow: 0 -1px 1px 0 #a7a7a7;
  box-shadow:         0 -1px 1px 0 #a7a7a7;

  border-radius:              5px;
  -moz-border-radius:         5px;
  -webkit-border-radius:      5px;
}

#commentsblock h1 {
  font-size: 16px;
  font-weight: 400;
  margin: 0 0 10px;
}

.comment {
  background-color: #fff;
  padding: 15px;
  border-radius: 5px;
}

.comment p {
  margin: 0;
  margin-top: 10px;
}

.comment.odd {
  background-color: #eee;
}

p.field label {
  display: block;
}

.new-comment field * {
  vertical-align: top;
  display: block;
}

.new-comment input[type=text], .new-comment textarea {
  border: 2px solid #ddd;
  padding: 4px;
  width: 100%;
  box-sizing: border-box;
}

.new-comment textarea {
  height: 100px;
  resize: none;
}

.new-comment label {
}


/* --------- Footer -----------------------*/

#footer{
  position:fixed;
  bottom:0;
  width:100%;
  height:100px;
  background:url('/images/shortcut/perodical_bg_footer.png') ;
  -moz-box-shadow:    0 -2px 8px 0 #a7a7a7;
  -webkit-box-shadow: 0 -2px 8px 0 #a7a7a7;
  box-shadow:         0 -2px 8px 0 #a7a7a7;
}

#footer .logo {
  float:left;
  width:100px;
  margin-top:20px;
  border:0;
}

#footer #copyright {
  float:right;
  margin-top:20px;
  color:#666;
}


/* --- NOt entirely sure if all the following styles are still needed --*/

/* --- Item --- */

div.item {
  position: relative;
}



/* Clearing */
.clear:after {
  content: ".";
  height: 0;
  visibility: hidden;
  display: block;
  clear: both;
}

.clear {
  display: inline-block;
}

/* Holly Hack Targets IE Win only */
* html .clear {height: 1%;}
.clear {display: block;}


.details .promo {
  display: none;
}




/* change things if we are on a mobile device with narrow screen */

@media screen and (max-width: 950px) {
  #main { padding: 0; }
  .container { white-space: nowrap; }
  .container > * { white-space: normal; }
  .navigation, #footer, .group-info { display: none }
  #logo { position: relative; top: -3px; }
  #titlebar {
    margin: 0 0 0 10px; display: inline-block; border-left: 1px solid white; padding-left: 10px; height: 52px;
    box-sizing: border-box; overflow: hidden;
  }
  #titlebar h1 { margin: 3px 0 0; color: white; font-weight: 300; }
  #titlebar h2 { margin: 0; color: white; }
  #titlebar hr { background-color: transparent; }
  #titlebar > .social_links { display: none; }

  .details { margin-top: 5px; }
  .details .social_links { display: block; }
  .details .promo { display: block; }
  .details .promo .header { display: none; }
  .details .promo img { width: auto !important; }
  .sidebar .promo { display: none; }
  .container, div.sidebar {  width:; 100%}
  div.sidebar { width: 100%; float:none; }
  div.details { width: 100%; }
  #titlebar hr, div.details #embedded_page, .sfw_viewer_navigation { width: 100%; }
  #embedded_page img, .details img { width: 100% !important; }
  .social_links { display: block; float: none; margin: 0; }
  .promo p { margin-top: 0; }
  div.sidebar h3 { margin-bottom: 10px; }
  div.sidebar h4 { margin: 0; min-height: inherit; line-height: inherit; }
  #commentsblock { margin-top: 0; }
}