html {
  font-family: "Roboto", Helvetica, sans-serif;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  height: 100%;
  margin: 0;
  overflow: auto;
  padding: 0;
}

.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -2em;
}

a:hover,
span:hover,
li:hover,
button:hover {
  cursor: pointer;
}

.tooltips {
  line-height: 1.35;
  max-width: 300px;
  overflow: hidden;
  white-space: nowrap;
}

#canvas {
  height: 100%;
  position: relative;
  width: 100%;
}

div.clr {
  clear: both;
  height: 0;
  margin: 0;
  padding: 0;
}

#map,
#map-canvas {
  height: 100%;
}

#map {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

#expand_streetview {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 89;
}

#translocinfo {
  background: none repeat scroll 0 0 rgba(255, 255, 255, 0.8);
  cursor: move;
  display: none;
  height: 340px;
  margin: 1% auto 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  right: 1%;
  top: 50px;
  width: 320px;
}

#translocinfo > button {
  border: 1px solid #ccc;
  border-radius: 0;
  color: #555;
  font-size: 17px;
  height: 31px;
  position: absolute;
  right: 0;
  top: 0;
  width: 31px;
}

#translocinfo div {
  margin-right: 37px;
  padding: 2% 0 0;
  text-align: center;
}

.ui-menu .ui-menu-item {
  list-style-image: none !important;
}

#whitebar {
  background: none repeat scroll 0 0 transparent;
  box-shadow: none;
  display: none;
  height: 40px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  top: 0;
  width: auto;
  z-index: 1;
}

img.sitelogo {
  border: 0 solid transparent;
  height: 40px;
  margin: 0 0 0 10px;
  max-width: 100%;
}

#search {
  border-color: #ededed;
  border-image: none;
  border-left: 0 solid transparent;
  border-right: 0 solid transparent;
  border-style: solid;
  border-width: 1px;
  box-shadow: none;
  font-family: "Roboto", Helvetica, sans-serif;
  max-height: 80px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 14px 3%;
  width: 94%;
  z-index: 2;
}

input#search {
  margin: 0;
}

#updateForm,
#tagsForm {
  background-color: rgba(255, 255, 255, 0.95);
  padding: 15px;
  position: absolute;
  right: 7px;
  top: 160px;
  z-index: 5;
}

#updateForm label {
  float: left;
  padding-right: 10px;
  text-align: right;
  width: 50px;
}

#tagsForm {
  top: 100px;
}

#tagsForm select {
  font-size: 13px;
  margin: 10px 10px 0;
  min-width: 120px;
}

#tagsForm > div {
  margin-top: 10px;
}

#tagsForm div input {
  margin-left: 5px;
}

#tagsForm input#submit {
  float: right;
  font-size: 15px;
}

#shareHolder {
  display: inline-block;
  width: 100%;
}

#shareLink,
#getDirections {
  float: left;
  margin-bottom: 10px;
  width: 50%;
}

#shareLink button,
#getDirections button,
#mobileStreetview button {
  background-color: #f2f2f2;
  border: 1px solid #dadada;
  color: #555;
  cursor: pointer;
  font-size: 13px;
  height: 36px;
  padding: 0 6px;
  width: 100%;
}

#shareHolder input[type="submit"] {
  -webkit-appearance: none;
  -moz-appearance: none;
}

#mobileStreetview {
  display: none;
}

#shareLink input {
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.5);
  color: #1e6b52;
  font-size: 13px;
  margin: 0 1px;
  padding: 2%;
  position: absolute;
  width: 94%;
  z-index: 5;
}

input:focus,
textarea:focus {
  background: none repeat scroll 0 0 #deefdf;
  border-color: #deefdf;
  outline: 0 none;
}

#cssmenu li#wxWrap {
  border-color: #ededed;
  border-image: none;
  border-style: solid;
  border-width: 1px;
  clear: both;
  float: none;
  margin-top: 2px;
  min-width: 220px;
  padding: 4px 0;
  text-align: center;
  width: 100%;
}

#wxIntro {
  color: #555555;
  display: inline-block;
  font: 14px/20px "Roboto", Helvetica, sans-serif;
  padding-top: 9px;
  vertical-align: top;
}

/* #wxIcon {
  background: url("https://l.yimg.com/a/lib/ywc/img/wicons.png") no-repeat scroll 61px
    0 transparent;
  display: inline-block;
  height: 34px;
  margin: 2px 0 -1px 1px;
  overflow: hidden;
  width: 61px;
} */

#wxIcon2 {
  display: inline-block;
  height: 34px;
  margin: 1px 6px 0 8px;
  overflow: hidden;
  width: 34px;
}

#wxTemp {
  color: #555;
  display: inline-block;
  font-size: 20px;
  line-height: 26px;
  margin-left: 0;
  padding-top: 5px;
  vertical-align: top;
}

/*
#zoomOut {
	background: none repeat scroll 0 0 #fff;
	border-radius: 2px;
	bottom: 25px;
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
	clear: none;
	color: #555;
	cursor: pointer;
	float: left;
	font-size: 25px;
	font-weight: bold;
	height: 27px;
	line-height: 1;
	margin: 0 0 0 3px;
	padding: 0;
	position: absolute;
	right: 72px;
	text-align: center;
	width: 27px;
}
#zoomIn {
	background: none repeat scroll 0 0 #fff;
	border-radius: 2px;
	bottom: 25px;
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
	clear: none;
	color: #555;
	cursor: pointer;
	float: left;
	font-size: 25px;
	font-weight: bold;
	height: 27px; /*changed from 33px to 27px by H
	line-height: 1; /*changed from 1.2 by H
	margin: 0 0 0 3px;
	padding: 0;
	position: absolute;
	right: 41px;
	text-align: center;
	width: 27px; /*changed from 33px to 27px by H
}
*/

#mobilemenu {
  display: none;
}

#cssmenu,
ul#whitebar {
  background: none repeat scroll 0 0 transparent;
  border-radius: 2px;
  display: block;
  height: auto;
  margin: 0 0 0 1.5%;
  min-width: 306px;
  overflow: visible;
  padding: 0;
  position: absolute;
  top: 50px;
  width: 20%;
  z-index: 1;
}

ul#whitebar {
  background-color: #fff;
  height: 40px;
  top: 10px;
}

li.sitelogo {
  list-style: none outside none;
  overflow: hidden;
}

#panel ul {
  box-shadow: none;
}

#cssmenu ul,
#cssmenu li,
#cssmenu a,
#mobilemenu ul,
#mobilemenu li,
#mobilemenu a {
  background: none repeat scroll 0 0 transparent;
  border: 0 none;
  color: #1e6b52;
  font-family: "Roboto", Helvetica, sans-serif;
  font-size: 14px;
  font-weight: normal;
  list-style: none outside none;
  margin: 0;
  padding: 0;
  position: relative;
  text-decoration: none;
}

#cssmenu #streetview {
  line-height: normal;
}

#cssmenu #streetview a {
  font-size: 10px;
}

#cssmenu li.ui-widget {
  background: none repeat scroll 0 0 transparent;
  margin: 0;
  max-height: 400px !important;
  overflow-x: hidden;
  overflow-y: auto;
}

#cssmenu li,
#mobilemenu li {
  background: none repeat scroll 0 0 rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid #ededed;
  color: #555;
}

#cssmenu a {
  line-height: 1.3;
}

/* BEGIN Feeback and Streetview Box */

#welcomeMsg {
  background: none repeat scroll 0 0 rgba(255, 255, 255, 0.8);
  border-radius: 3px;
  box-shadow: 0 0 7px 20000px rgba(0, 0, 0, 0.3);
  display: block;
  height: 260px;
  margin: 10% auto 0;
  padding: 2%;
  position: relative;
  width: 400px;
  z-index: 10;
}

.close_button {
  background: url("images/close.png") no-repeat scroll center center / 32px auto
    rgba(0, 0, 0, 0);
  height: 40px;
  opacity: 0.9;
  position: absolute;
  right: 0;
  top: 5px;
  width: 40px;
  cursor: pointer;
}

.close_button.inside {
  top: 0;
}

/* removed because of Google Controls update
.expand_button {
	display: block;
	float: right;
	height: 30px;
	position: absolute;
	right: 5px;
	top: 3px;
	z-index: 90;
}
.contract_button {
	display: block;
	float: right;
	height: 30px;
	position: absolute;
	right: 5px;
	top: 3px;
	z-index: 90;
}*/

#feedback_button {
  background: url("images/icon-feedback.png") no-repeat scroll center center
    transparent;
  background-size: cover;
  border: 0 solid transparent;
  bottom: 40px;
  height: 40px;
  left: 13px;
  opacity: 0.9;
  position: absolute;
  width: 40px;
}

#feedback_button:after {
  content: "feedback";
  font-size: 13px;
  left: -4px;
  line-height: 1.1em;
  position: absolute;
  text-align: center;
  top: 40px;
  width: 100%;
}

/****** BEGIN New menu 10-21 ********/

.menu_labels.on,
ul#parkingpicklist .menu_park.on {
  background: none repeat scroll 0 0 #daf5d3;
}

ul#menu li {
  font-size: 14px;
  font-weight: normal;
  margin: 0;
  padding: 0.8em;
}

#menu ul {
  background: none repeat scroll 0 0 transparent;
  display: none;
  max-height: 100px;
  overflow-x: hidden;
  overflow-y: auto;
}

#menu ul li {
  background: none repeat scroll 0 0 transparent;
  border-bottom: 1px solid #ededed;
  padding: 0.5em 0.8em;
}

#menu ul li a {
  font-size: 13px;
}

#menu-button {
  display: none;
}

ul#parkingpicklist > li {
  padding: 0;
}

ul#parkingpicklist li a {
  display: block;
  padding: 1em 0 0.8em 1.3em;
}

ul#parkingpicklist #employee-parking {
  border-right: 10px solid #00c88a;
  /* green */
}

ul#parkingpicklist #public-parking {
  border-right: 10px solid #00c9e5;
  /* blue */
}

ul#parkingpicklist #student-parking {
  border-right: 10px solid #f8a606;
  /* gold */
}

/****** END New menu 10-21 ********/

.panel {
  background: none repeat scroll 0 0 #ffffff;
  padding-bottom: 10px;
}

button.alsoHereClick {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
  border: 0 solid transparent;
}

#infowindow #full_name,
#infowindow #address,
#infowindow #associated_wktIds,
#infowindow #featuring,
#infowindow #alsoHere {
  background: none repeat scroll 0 0 transparent;
  color: #555555;
  font-weight: normal;
  padding: 10px 15px 0;
}

#infowindow #full_name {
  font-size: 16px;
  line-height: normal;
}

#infowindow #address,
#infowindow #associated_wktIds,
#infowindow #featuring {
  font-size: 13px;
  margin-bottom: 10px;
}

#infowindow #tags > ul {
  background: none repeat scroll 0 0 transparent;
  border: 0 solid transparent;
  display: block;
}

#infowindow #tags ul li {
  background: none repeat scroll 0 0 transparent;
  color: #555555;
  display: block;
  font-size: 14px;
  font-weight: normal;
  padding: 10px 10px 10px 25px;
}

#infowindow #tags ul li:before {
  color: #555555;
  content: "•";
  left: 10px;
  position: absolute;
}

#infowindow #tags ul li:hover {
  color: #222222;
}

#infowindow #tags ul li a {
  background: none repeat scroll 0 0 transparent;
  padding: 0;
}

#infowindow #tags ul li a:before {
  content: "";
  left: auto;
  position: absolute;
}

ul#hamburger {
  background-attachment: scroll;
  background-clip: border-box;
  background-color: #ffffff;
  background-image: url("https://www.uab.edu/styles/5.0/images/stacked@2x.png");
  background-origin: padding-box;
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: 48px 38px;
  cursor: pointer;
  display: none;
  height: 38px;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  width: 100%;
}

/*
.labels {
	line-height: 1.15em;
	padding: 2px;
	text-align: center;
	width: 110px;
}
 */

.labels {
  line-height: 1.15em;
  padding: 0.25em 0.5em;
  text-align: center;
  max-width: 220px;
  font-size: 10px;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 2px;
}

body.sat .labels {
  background-color: rgba(255, 255, 255, 0.8);
}

.labelsLight {
  color: #ffffff;
  font-size: 1.2em;
  font-weight: 800;
  line-height: 1.25em;
  padding: 2px;
  text-align: center;
  width: auto;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

#mapFooter {
  background-color: rgba(255, 255, 255, 0.5);
  bottom: 0;
  clear: both;
  display: inline-block;
  left: 0;
  margin: 15px auto 0;
  padding: 0;
  position: absolute;
  text-align: center;
  width: 100%;
}

#mapFooter ul.menu {
  list-style: none outside none;
  margin: 0;
  padding: 4px 0 7px;
}

#mapFooter ul.menu li {
  background: none repeat scroll 0 0 transparent;
  border-top: 0 solid transparent;
  color: #555555;
  display: inline;
  font-size: 12px;
  font-weight: normal;
  line-height: 1.4em;
  padding: 0 5px;
}

#mapFooter a:link,
#mapFooter a:visited {
  color: #555555;
  font-weight: 400;
  text-align: center;
  text-decoration: none;
}

#mapFooter a:hover {
  color: rgb(68, 68, 68) !important;
  text-decoration: underline;
}

#lilfooter {
  bottom: -1px;
  float: right;
  height: auto;
  overflow: hidden;
  position: absolute;
  right: 400px;
}

#lilfooter.sat {
  right: 650px;
}

#lilfooter a,
#lilfooter span,
#lilfootermobile a,
#lilfootermobile span,
#lilfooter #ot-sdk-btn.ot-sdk-show-settings,
#lilfooter #ot-sdk-btn.optanon-show-settings {
  background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5);
  color: rgb(5, 5, 5);
  font-family: "Roboto", Helvetica, sans-serif !important;
  font-size: 10px;
  padding: 2px 6px;
  text-decoration: none;
  transition: all 0.2s linear;
  line-height: normal;
  cursor: pointer;
  border: 0 solid transparent;
  height: auto;
  white-space: normal;
  word-wrap: break-word;
  box-sizing: content-box;
}

#lilfooter *:hover,
#lilfooter *:focus {
  background: #050505 !important;
  color: #fff !important;
}

/* Begin Polygon tool */

#controls {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 3px;
  color: #050505;
  font-family: "Roboto", Helvetica, sans-serif;
  height: auto;
  margin: 10px 0 0 1%;
  padding: 20px;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 330px;
}

#wkt {
  color: #777;
  font-size: 12px;
  min-width: 280px;
  overflow: visible;
}

#form {
  clear: both;
  float: left;
  width: auto;
}

#form label {
  clear: both;
  float: left;
  margin: 0 5px 12px 0;
}

#form input,
#form select,
#form textarea {
  clear: right;
  color: #555;
  float: left;
  font-size: 13px;
}

#form textarea {
  border: 0 solid transparent;
  clear: both;
  height: 90px;
  margin: 0 0 0 30px;
  width: 300px;
}

#feedback_form > input,
#feedback_form > textarea {
  margin: 1%;
  width: 90%;
}

input#submit,
input#reset {
  clear: left;
  float: right;
  margin: 0 5px;
}

#feedback_form input,
#feedback_form textarea {
  background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5);
  border: 5px solid white;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1) inset, 0 0 16px rgba(0, 0, 0, 0.1);
  font-family: "Roboto", Helvetica, sans-serif;
  margin: 0 0 3px;
  padding: 3.5%;
}

#feedback_form input:focus,
#feedback_form textarea:focus {
  background: none repeat scroll 0 0 rgba(223, 251, 226, 0.5);
}

#feedback_form input[type="submit"] {
  background: linear-gradient(to bottom, #e6e6e6, #c2c2c2) repeat scroll 0 0
    #e6e6e6;
  border: 1px solid #dadcde;
  border-radius: 2px;
  color: #565656;
  font-size: 14px;
  padding: 10px 20px;
  text-decoration: none;
  width: 100%;
}

#feedback_form input[type="submit"]:hover {
  background: none repeat scroll 0 0 #cbebc3;
  text-decoration: none;
}

.rc-anchor.rc-anchor-standard {
  border: 0 solid transparent !important;
}

fieldset#polyInfo {
  border: 0 solid transparent;
  padding: 0;
}

.polygonRadioDesc {
  color: #888;
  font-size: 11px;
  font-style: italic;
  left: 110px;
  margin: 2px 10px;
  position: absolute;
}

/*END Polygon tool */

.adminPin {
  background: url("images/pins/admin.png") no-repeat scroll 5px 5px
    rgba(0, 0, 0, 0);
}

.artsPin {
  background: url("images/pins/arts.png") no-repeat scroll 5px 5px
    rgba(0, 0, 0, 0);
}

.athleticsPin {
  background: url("images/pins/athletics.png") no-repeat scroll 5px 5px
    rgba(0, 0, 0, 0);
}

.diningPin {
  background: url("images/pins/dining.png") no-repeat scroll 5px 5px
    rgba(0, 0, 0, 0);
}

.empParkingPin {
  background: url("images/pins/employee_parking.png") no-repeat scroll 5px 5px
    rgba(0, 0, 0, 0);
}

.housingPin {
  background: url("images/pins/housing.png") no-repeat scroll 5px 5px
    rgba(0, 0, 0, 0);
}

.medicalPin {
  background: url("images/pins/medical.png") no-repeat scroll 5px 5px
    rgba(0, 0, 0, 0);
}

.pubParkingPin {
  background: url("images/pins/public_parking.png") no-repeat scroll 5px 5px
    rgba(0, 0, 0, 0);
}

.researchPin {
  background: url("images/pins/research.png") no-repeat scroll 5px 5px
    rgba(0, 0, 0, 0);
}

.safetyPin {
  background: url("images/pins/safety.png") no-repeat scroll 5px 5px
    rgba(0, 0, 0, 0);
}

.servicesPin {
  background: url("images/pins/services.png") no-repeat scroll 5px 5px
    rgba(0, 0, 0, 0);
}

.stuParkingPin {
  background: url("images/pins/student_parking.png") no-repeat scroll 5px 5px
    rgba(0, 0, 0, 0);
}

.studentsPin {
  background: url("images/pins/students.png") no-repeat scroll 5px 5px
    rgba(0, 0, 0, 0);
}

#lilfootermobile {
  display: none;
}

ul#parkingpicklist li a.menu_mobile {
  display: none;
}

@media screen and (max-width: 1024px) {
  #lilfootermobile {
    display: none;
  }
}

@media screen and (max-width: 800px) {
  ul#parkingpicklist li a.menu_transloc,
  span.menu_transloc {
    display: none;
  }
  #lilfooter {
    display: none;
  }
  ul#parkingpicklist li a.menu_mobile {
    display: block;
  }
  #lilfootermobile {
    background: none repeat scroll 0 0 transparent;
    bottom: auto;
    display: block;
    float: none;
    height: 21px;
    left: auto;
    margin-top: 10px;
    position: relative;
    right: auto;
    width: 100%;
  }
  #lilfootermobile > span {
    display: block;
    float: left;
    padding: 0;
    right: auto;
    text-align: center;
    width: 25%;
  }
  #map,
  #map-canvas {
    height: calc(100% - 92px);
  }
  ul#whitebar {
    background-color: #fff;
    height: 43px;
    top: 0;
  }
  #mobilemenu {
    display: block;
  }
  ul#whitebar,
  #cssmenu {
    margin: 0;
    position: relative;
    top: 0;
    width: 100%;
  }
  #menu {
    display: none;
  }
  ul#hamburger {
    position: absolute;
    right: 0;
    top: -40px;
    width: 40px;
  }
  #shareLink,
  #getDirections,
  #mobileStreetview {
    float: left;
    margin-bottom: 0;
    width: 33.3%;
  }
  .mobile-menu {
    background: url("https://www.uab.edu/styles/5.0/images/stacked@2x.png") no-repeat
      scroll 50% 0 / 48px 38px #ffffff;
    height: 38px;
    position: absolute;
    right: 8px;
    top: 6px;
    width: 40px;
    z-index: 10;
  }
  #mobilemenu ul.searchbox.mobile {
    border: 1px solid #ccc;
    margin-top: 9px;
  }
  #map,
  #map-canvas {
    position: relative;
  }
  #cssmenu.open {
    display: block;
  }
  #menu-button {
    display: block !important;
  }
  #menu ul {
    display: none;
  }
  #mobilemenu #menu-button {
    background: url("https://www.uab.edu/styles/5.0/images/stacked@2x.png") no-repeat
      scroll 50% center / 38px 38px rgba(0, 0, 0, 0);
    color: #ffffff;
    cursor: pointer;
    display: block;
    font-size: 13px;
    font-weight: 700;
    height: 47px;
    letter-spacing: 1px;
    min-width: 50px;
    padding: 5px;
    right: -85%;
    text-align: right;
    text-decoration: none;
    width: 15%;
  }
  #mobilemenu #close-button {
    background: url("images/close.png") no-repeat scroll 50% center / 38px 38px
      rgba(0, 0, 0, 0);
    color: #ffffff;
    cursor: pointer;
    display: block;
    font-size: 13px;
    font-weight: 700;
    height: 47px;
    letter-spacing: 1px;
    min-width: 50px;
    padding: 5px;
    right: -85%;
    text-align: right;
    text-decoration: none;
    width: 15%;
  }
  #infowindow #full_name,
  #infowindow #address,
  #infowindow #associated_wktIds,
  #infowindow #featuring,
  #infowindow #alsoHere {
    padding: 5px 10px 0;
  }
  #infowindow #tags ul li {
    padding: 0 5px 5px 20px;
  }
  /*
#zoomIn, #zoomOut, .panel img#expand_button.expand_button {
	display: none !important;
}*/
  #wxWrap {
    float: none;
    padding: 0 0 8px 20px;
    position: absolute;
    top: 5px;
  }
  #lilfooter {
    bottom: 0;
    height: 18px;
    left: auto;
    margin: 0 auto;
    overflow: hidden;
    position: fixed;
    right: 0;
    width: auto;
  }
  #lilfooter a,
  #lilfooter span {
    right: 0;
    text-decoration: none;
  }
}

.ath-viewport * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.ath-viewport {
  position: relative;
  z-index: 2147483641;
  pointer-events: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  -o-text-size-adjust: none;
  text-size-adjust: none;
}

.ath-modal {
  pointer-events: auto !important;
  background: rgba(0, 0, 0, 0.6);
}

.ath-mandatory {
  background: #050505;
}

.ath-container {
  pointer-events: auto !important;
  position: absolute;
  z-index: 2147483641;
  padding: 0.7em 0.6em;
  width: 18em;
  background: #eee;
  background-size: 100% auto;
  box-shadow: 0 0.2em 0 #d1d1d1;
  font-family: sans-serif;
  font-size: 15px;
  line-height: 1.5em;
  text-align: center;
}

.ath-container small {
  font-size: 0.8em;
  line-height: 1.3em;
  display: block;
  margin-top: 0.5em;
}

.ath-ios.ath-phone {
  bottom: 1.8em;
  left: 50%;
  margin-left: -9em;
}

.ath-ios6.ath-tablet {
  left: 5em;
  top: 1.8em;
}

.ath-ios7.ath-tablet {
  left: 0.7em;
  top: 1.8em;
}

.ath-ios8.ath-tablet {
  right: 0.4em;
  top: 1.8em;
}

.ath-android {
  bottom: 1.8em;
  left: 50%;
  margin-left: -9em;
}

/* close icon */

.ath-container:before {
  content: "";
  position: relative;
  display: block;
  float: right;
  margin: -0.7em -0.6em 0 0.5em;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIQAAACECAMAAABmmnOVAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAAeHAAAHhwFd+hRDAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAHVQTFRFAAAAOTk5MzMzOzs7Nzc3QUFBQEBAPz8/Pj4+QUFBQEBAPz8/Pj4+QUFBQEBAPz8/QUFBPj4+Pz8/Pz8/Pj4+Pz8/Pz8/Pz8/Pj4+Pz8/Pj4+Pz8/Pz8/Pz8/Pz8/Pz8/Pj4+Pz8/Pz8/Pz8/Pz8/QEBAPz8/n3QmjwAAACZ0Uk5TAAkKDQ4zODk6OzxBQkNERUusrbG0tba7vL3Excbu8fL19fb3+PgucqJgAAACqklEQVR42sXc23LCIBAGYKy2pgft0WpP2vTA+z9i0+goCZAs7O7P3oWZTL5ZYAh7sca0MXmYG3jM7yfu4/TV1jdow01tX6cdg4UrGoN1FNM3a+GK1nBSzPYGrOJgsPZt1hrerYUrjoa9wjHgFI7B2veZWVk3tpCdWm07H30y8+4AIhedPFj7cW7wioABrggawIqIAaroGbYXzlGCUvQNnc0IUgwaQIoRA0QxagAoCAZ1BcmgrCAaVBVkg6IiwaCmSDIoKRINKopkg4IiwyCuyDIIKzINoopsg6CCYRBTsAxCCqZBRLGo2RcrtkLAwFaIGJgKIQNLIWZgKAQN2QpRg1dKoCmEDVkKcUOGQsGQrFAxJCqUDEkKNUOCQtFAVqgaiAplg69YFDAQFADDqAJiGFGADI1iF1XADAOKvqHSLApHFFBDRAE2BBVwQ0BRwOApfn8LGDxFEcOQAmeIK5CGmAJrCCvQBq8A8r9Zrw08qp6irvAGs/zpIr4XBQxf3nQsyhvwipABrQgbsIqYAamIG3CKnqH+LKDoGXbVwD84zDB4E4AZ4IqgAayIGKCKqMGYS5RiwOArlgUMnuJrWcAAUYwaAAqCQV1BMigriAZVBdmgqEgwqCmSDEqKRIOKItmgoMgwiCv6hkvaa6KKTIOoItsgqGAYxBQsg5CCaRBRsA0CCgEDWyFiYCqEDCyFmIGhEDRkK0QNmQphQ5ZC3JChUDAkK1QMiQolQ5JCzZCguNUzkBV3P4oGokLZQFKoGwgKgGFUATGMKECGQQXMYMxVTAE0RBVQQ0QBNgQVcENI8QwoBo8cUiszWYPz4OVi3bQ9cBQoQ0exblsvTDZwg6PYHNo/tE0XmvVwa4BxWBentgtnL+A8HHPxcnYaaBRoQ6twDY3iEW5oFI8Hwx/QxSE448b+MwAAAABJRU5ErkJggg==);
  background-color: rgba(255, 255, 255, 0.8);
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: 50%;
  width: 2.7em;
  height: 2.7em;
  text-align: center;
  overflow: hidden;
  color: #a33;
  z-index: 2147483642;
}

.ath-container.ath-icon:before {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  float: none;
}

.ath-mandatory .ath-container:before {
  display: none;
}

.ath-container.ath-android:before {
  float: left;
  margin: -0.7em 0.5em 0 -0.6em;
}

.ath-container.ath-android.ath-icon:before {
  position: absolute;
  right: auto;
  left: 0;
  margin: 0;
  float: none;
}

/* applied only if the application icon is shown */

.ath-container.ath-icon {
}

.ath-action-icon {
  display: inline-block;
  vertical-align: middle;
  background-position: 50%;
  background-repeat: no-repeat;
  text-indent: -9999em;
  overflow: hidden;
}

.ath-ios7 .ath-action-icon,
.ath-ios8 .ath-action-icon {
  width: 1.6em;
  height: 1.6em;
  background-image: url(data:image/png;base64,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);
  margin-top: -0.3em;
  background-size: auto 100%;
}

.ath-ios6 .ath-action-icon {
  width: 1.8em;
  height: 1.8em;
  background-image: url(data:image/png;base64,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);
  margin-bottom: 0.4em;
  background-size: 100% auto;
}

.ath-android .ath-action-icon {
  width: 1.4em;
  height: 1.4em;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkE2ODRFM0VGNDc0NTExRTRCNEUxODAyMzVCNkM5RTU5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkE2ODRFM0YwNDc0NTExRTRCNEUxODAyMzVCNkM5RTU5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTY4NEUzRUQ0NzQ1MTFFNEI0RTE4MDIzNUI2QzlFNTkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTY4NEUzRUU0NzQ1MTFFNEI0RTE4MDIzNUI2QzlFNTkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7bs1dGAAABKElEQVR42uyXywnCQBRFxyCxCFsQ/CzUGtQGdOfGuBJbcWcqsAGtwY2Iii1YgbhQF/EOvEAQ/ARnkhHug7NwvJC5hDBzClEUqV8nCILkTx+MQR9UZO0IFmAObnEwDMOfn11UZqcMlqD2tN4WhqAHTqYe6BncvP9i88nR/61AycUCwYfNx1MFIxcLDCxlMyvQSJGtu1ggzdxdLLBNkT26WGBhKZtZAX0q7b/IHSTrXIEr6ILdm4wu2JGskx+xPmFbYAo24CJsZK1p8hS2cZVQcteZCdanYOIyl+d46s+HBfIeIx/xk9B8f3AYEBobb0B7wQSswVlYy5rv5BugkdHIaGQ0MhoZjYxGRiOjkdEHWIBGRiOjkdHIaGQ0MhoZjYxGRiPL1sgeAgwApeJtJOoNgAYAAAAASUVORK5CYII=);
  background-size: 100% auto;
}

.ath-container p {
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 2147483642;
  text-shadow: 0 0.1em 0 #fff;
  font-size: 1.1em;
}

.ath-ios.ath-phone:after {
  content: "";
  background: #eee;
  position: absolute;
  width: 2em;
  height: 2em;
  bottom: -0.9em;
  left: 50%;
  margin-left: -1em;
  -webkit-transform: scaleX(0.9) rotate(45deg);
  transform: scaleX(0.9) rotate(45deg);
  box-shadow: 0.2em 0.2em 0 #d1d1d1;
}

.ath-ios.ath-tablet:after {
  content: "";
  background: #eee;
  position: absolute;
  width: 2em;
  height: 2em;
  top: -0.9em;
  left: 50%;
  margin-left: -1em;
  -webkit-transform: scaleX(0.9) rotate(45deg);
  transform: scaleX(0.9) rotate(45deg);
  z-index: 2147483641;
}

.ath-application-icon {
  position: relative;
  padding: 0;
  border: 0;
  margin: 0 auto 0.2em auto;
  height: 6em;
  width: 6em;
  z-index: 2147483642;
}

.ath-container.ath-ios .ath-application-icon {
  border-radius: 1em;
  box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.3),
    inset 0 0.07em 0 rgba(255, 255, 255, 0.5);
  margin: 0 auto 0.4em auto;
}

@media only screen and (orientation: landscape) {
  .ath-container.ath-phone {
    width: 24em;
  }

  .ath-android.ath-phone {
    margin-left: -12em;
  }

  .ath-ios.ath-phone {
    margin-left: -12em;
  }

  .ath-ios6:after {
    left: 39%;
  }

  .ath-ios8.ath-phone {
    left: auto;
    bottom: auto;
    right: 0.4em;
    top: 1.8em;
  }

  .ath-ios8.ath-phone:after {
    bottom: auto;
    top: -0.9em;
    left: 68%;
    z-index: 2147483641;
    box-shadow: none;
  }
}