@import url('/fonts/stylesheet.css');
body {
  padding: 0px 20px 20px 20px;
  margin:0 0 110px 0;
  font-family:'din', arial;
  font-size:14px;
  background:#4c4b48;
  color:white;
  line-height: 20px;
}

body.homepage {
  padding: 0;
}

p {
  line-height:1.2em;
}

a {
  color: #37736c;
}

/* Default 'a' color doesn't work when against content background, but anywhere else, should be fine */
p a {
  color: #DDDDDD;
}

.request a {
  color: #DDDDDD;
}

a:visited {
  color: #DDDDDD;
}

span.not_subscribed {
  color:#d8a11b;
}

pre.code {
  background: #292929;
  padding: 10px 5px;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.35) inset;
}

h1 {
  background:url('https://weather.maxar.com/images/weatherdesk_logo_header_rest.png') no-repeat left center;
  background-size:100px auto;
  padding:10px 0px 10px 120px;
  height:80px;
  font-family:'din', arial;
  font-weight:bold;
  display:table-cell;
  vertical-align:middle;
}

/* This removes the weatherdesk logo on the with-token homepage per Bob and Phil */
.homepage #content h1 {
  background: inherit;
  padding-left: 0px;
}

#content h2 {
  border-bottom: 1px solid #808080;
  padding-bottom: 5px;
}

nav {
  width:20%;
  box-sizing:border-box;
  display:block;
  position:fixed;
}

header nav, footer nav {
  width: auto;
  box-sizing: auto;
  position: auto;
}

main {
  width:78%;
  box-sizing:border-box;
  display:block;
  margin-left:22%;
  background-color:#333231;
  padding:10px 20px;
  box-shadow:0px 0px 10px rgba(0,0,0,0.35) inset;
}

nav ul {
  list-style-type:none;
  margin:0;
  padding:0;
}

nav ul > li + li {
  margin-top:10px;
}

nav ul > li > a {
  display:block;
  line-height:2em;
  border:1px solid #6b6965;
  padding:15px;
  color:#6b6965;
  text-decoration:none;
  font-size:15px;
  background-color:#333231;
}

nav ul > li > a:hover {
  background-color:#FBaE1F;
  font-weight:bold;
  color: #EEE;
}

nav ul > li > a.active {
  border-color: #FBaE1F;
  color:#FFF;
  font-weight:bold;
  background-color: #FBaE1F;
  box-shadow: 0px 0px 1px 2px rgba(0,0,0 0.5);
}

main > h2 {
  margin-top:0;
}

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

ul.items li {
  display: inline-block;
  background-color:#4c4b48;
  padding: 6px 8px;
  margin:2px;
  width: 30%;
  vertical-align:top;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

ul.items li.auto-width {
  width:auto
}

div.service_doc + div.service_doc {
  margin-top:30px;
  line-height: 26px;
}

a.service_list_link {
  font: bold 11px 'din',Arial;
  text-decoration: none;
  color: #EEE;
  padding: 2px 6px 2px 6px;
  background-color: #333231;
  cursor: pointer;
  width: 150px;
  padding: 4px 8px;
  line-height: 1.45em;
  box-sizing: border-box;
  font-size: 14px;
  border: 1px solid #686965;
}

a.service_list_link:hover {
  background-color:#FBaE1F;
  border-color:#FBaE1F;
}

main div.section + div.section {
  margin-top:40px;
}

span.sample {
  color:#FBaE1F;
}

#run_table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #434c4b;
}

#run_table th, #run_table td {
  padding: 8px;
  text-align: left;
  border: 1px solid #434c4b;
}

#run_table th {
  background-color:#4c4b48;
}

footer {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 110px;
  width: 100%;
  padding:10px;
  text-align:center;
  font-size:14px;
  color:#0E9797;
  line-height:20px;
  background:#333231;
  box-shadow:0px 0px 12px 3px rgba(0, 0, 0, 0.65);
  box-sizing:border-box;
}

footer div.footer_content {position:relative;margin:10px auto;height:80px;max-width:1300px;background:url('https://weather.maxar.com//images/weatherdesk_logo_header_rest.png') no-repeat left 10px,url('https://weather.maxar.com//images/maxar_logo_white_250.png') no-repeat right -15px;}
footer div.footer_content a.logo_placeholder {text-indent:-666em;display:block;position:absolute;width:150px;height:100%}
footer div.footer_content a.weather_desk {position:absolute;left:0;top:0}
footer div.footer_content a.mda {position:absolute;right:0;top:0}

footer address { padding-top:15px;color:#A2ACAF;font-size:12px}
footer nav{display:block;padding-bottom:10px;line-height:36px;width:auto;float:none;position:inherit;}
footer nav a {text-decoration:none;color:#0D8686;margin:0px 10px;font-weight:bold;text-transform:uppercase}
footer nav a:hover {color:#48ac9f}
footer div[id=copyright] a {color:#2f6f6e;text-decoration:underline}
footer nav a.footer_icon {display:inline-block;width:36px;height:36px;background-position:center center;text-indent:-666em;background-repeat:no-repeat}
footer nav a.twitter {background-image:url('https://weather.maxar.com//images/twitter_rest.png')}
footer nav a.twitter:hover {background-image:url('https://weather.maxar.com//images/twitter_over.png')}
footer nav a.linkedin {background-image:url('https://weather.maxar.com//images/linkedin_rest.png')}
footer nav a.linkedin:hover {background-image:url('https://weather.maxar.com//images/linkedin_over.png')}

/*Stuff to get the WxDesk header working on the main page*/

#content {
  padding: 53px 20px 20px 20px;
}

header.home { box-shadow:0px 5px 12px rgba(0,0,0,0.45);}

header a{color:#2D4F80}
header a:visited{color:#8995A1}
header a:hover{color:#19437F}

header h2 a, header h2 a:visited {
  text-decoration:none;
  color:#EEE;
}

header h2 sup { line-height:8px;color:#4170B2}

header{
  display:block;
  position:fixed;
  z-index:5001;
  height:50px;
  width:100%;
  background-color:#6B6965;
  font-family:'blender', Arial;
  background-size:100% 150px;
  background-attachment:fixed;
  box-shadow:0px 5px 12px rgba(0,0,0,.35);
  color:#FFF;
  border-bottom:3px solid #000000;
}

header h2 {
  margin:10px 0 0 30px;
  font-size:26px;
  float:left;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
  font-family:'blender', Arial;
  line-height:30px;
  color:#EEEEEE;
}

header h2 a {
  text-decoration:none;
  color:#EEE;
}

header div.header_content {margin:0 auto}

.attention {
  background-color: orange;
}

#user_utility, #settings_utility {
  float: right;
  margin: 10px 0 0 0;
  text-align: right;
  position:relative;
  font-size:20px;
}

#user_utility > a, #settings_utility > a {
   display:inline-block;
   vertical-align:middle;
   padding:4px 15px 0px 15px;
   line-height:20px;
   height:25px;
   color:#FFF;
   text-decoration:none;
}
#user_utility > a:hover {background-color:#4f6362}
#user_utility > a.active,#settings_utility > a.active {position:relative;z-index:5002}
#user_utility a:hover, #user_utility a.active {background-color:#333231;}

#user_utility > a + a {margin-left:40px}

#user_utility #user_product_action {
  background-image:url('/images/menu-icon_rest.png');
  background-repeat:no-repeat;
  background-position:92% center;
  background-size:16px;
  padding-right:35px;
  font-family:'blender', Arial;
  font-size:20px;
}
#user_utility #user_profile_action {
  background-image:url('/images/profile-icon_rest.png');
  background-repeat:no-repeat;
  background-position:90% center;
  padding-right:55px;
}

#user_utility #user_profile_action {
  overflow:hidden;
  text-overflow:ellipsis
}