#solutions:before {
  width: 2000px;
  height: 800px;
  position: absolute;
  top: -721px;
  left: -80px;
  z-index: 0;
  background: #fff;
  transform: rotate(2deg);
  -moz-transform: rotate(2deg);
  -webkit-transform: rotate(2deg);
  content: "";
  border: 1px transparent red;
}

div.trim {
  position: relative;
}

div.trim:after {
  width: 100%;
  height: 140px;
  position: absolute;
  top: -140px;
  left: 0;
  z-index: 1;
  background: transparent;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(white), color-stop(1, white));
  /* webkit example */
  background-image: -moz-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 100%);
  /* mozilla example - FF3.6+ */
  /* IE8 uses -ms-filter for whatever reason... */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFFFF, endColorstr=#FFFFFFFF );
  -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFFFF, endColorstr=#FFFFFFFF );
  content: "";
  border: 1px transparent red;
}

@media (min-width: 750px) {
  #main {
    padding-top: 110px;
  }
}

@media (max-width: 749px) {
  #main .contain:not(.nopad) {
    width: 300px;
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media (min-width: 480px) and (max-width: 749px) {
  #main .contain:not(.nopad) {
    width: 460px;
  }
}

@media (min-width: 750px) {
  #hdr header {
    margin-top: -205px;
  }
}

/**********************SOLUTIONS MAIN SPLASH AREA*******************************/
/*DEFAULT IS - CHeCKIN TARGETING - IT WAS THE FIRST*/
#solutions {
  font-family: Helvetica;
  background: url(/images/bg_solutions_social.png);
  padding: 110px 0 0;
}

#solutions figure {
  overflow: hidden;
  padding: 0 0 20px;
  margin-top: -60px;
}

#solutions figcaption {
  float: left;
  overflow: hidden;
  width: 500px;
}
@media (min-width: 750px) and (max-width: 933px) {
  #solutions figcaption {
    width: 320px;
  }
}

#solutions blockquote {
  width: 350px;
  float: right;
  margin-top: 60px;
  margin-left: 0;
}
@media (max-width: 749px) {
  #solutions blockquote {
    width: auto;
    margin: 0 auto;
  }
}
@media (min-width: 480px) and (max-width: 749px) {
  #solutions blockquote {
    width: auto;
    margin-top: 0;
  }
}

#solutions:after {
  width: 100%;
  height: 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  background: transparent url(/images/solutions_trim_tear.png) repeat-x;
  content: "";
}

#solutions h1 {
  font-family: SohoStd-BoldCompressed;
  font-weight: normal;
  font-size: 297%;
  line-height: 100%;
  margin: 0 0 15px;
  padding: 0;
  color: #01b4d4;
  text-shadow: 1px 1px 2px #fff;
}

#solutions h2 {
  color: #636363;
  text-shadow: 1px 1px 3px #fff;
  font-weight: normal;
}

#solutions p {
  font-weight: lighter;
}

/*AGE GATING*/
#solutions.agegating {
  background: url(/images/bg_solutions_socialalt.png);
}

@media (min-width: 750px) and (max-width: 933px) {
  #solutions.agegating figure {
    margin-top: -90px;
  }
}

#solutions.agegating figcaption {
  margin-left: 40px;
  margin-top: 30px;
}
@media (max-width: 749px) {
  #solutions.agegating figcaption {
    margin-left: 0;
  }
}
@media (min-width: 750px) and (max-width: 933px) {
  #solutions.agegating figcaption {
    margin-left: 20px;
    margin-top: 100px;
  }
}

#solutions.agegating figcaption img {
  width: 510px;
}
@media (max-width: 749px) {
  #solutions.agegating figcaption img {
    width: 330px;
  }
}
@media (min-width: 480px) and (max-width: 749px) {
  #solutions.agegating figcaption img {
    width: 510px;
  }
}
@media (min-width: 750px) and (max-width: 933px) {
  #solutions.agegating figcaption img {
    width: 330px;
  }
}

#solutions.agegating h1 {
  color: #fff799;
  text-shadow: 1px 1px 2px #666;
}

#solutions.agegating h2 {
  color: #fff;
  text-shadow: 0 0 3px #c8cbce;
}

/*AUTOS*/
#solutions.auto {
  background: url(/images/bg_opensource.png);
}

#solutions.auto figure {
  margin-top: -50px;
}
@media (min-width: 750px) and (max-width: 933px) {
  #solutions.auto figure {
    margin-top: -70px;
  }
}

#solutions.auto blockquote {
  margin-top: 40px;
}
@media (max-width: 749px) {
  #solutions.auto blockquote {
    margin-top: 0;
  }
}

#solutions.auto figcaption {
  margin-top: 50px;
}
@media (min-width: 750px) and (max-width: 933px) {
  #solutions.auto figcaption {
    margin-top: 100px;
  }
}

#solutions.auto figcaption img {
  width: 510px;
}
@media (max-width: 749px) {
  #solutions.auto figcaption img {
    width: 300px;
    margin-top: 0;
  }
}
@media (min-width: 480px) and (max-width: 749px) {
  #solutions.auto figcaption img {
    width: 470px;
  }
}
@media (min-width: 750px) and (max-width: 933px) {
  #solutions.auto figcaption img {
    width: 330px;
  }
}

#solutions.auto h1 {
  color: #006786;
  text-shadow: 1px 1px 2px #999;
}

#solutions.auto h2 {
  color: #203950;
}

/*TUMBLR*/
#solutions.tumblr {
  background: url(/images/bg_solutions_alt3.png);
}

@media (min-width: 750px) and (max-width: 933px) {
  #solutions.tumblr figure {
    margin-top: -130px;
  }
}

#solutions.tumblr blockquote {
  margin-top: 80px;
  margin-right: 70px;
}
@media (max-width: 749px) {
  #solutions.tumblr blockquote {
    margin-top: 0;
    margin-right: 0;
  }
}
@media (min-width: 750px) and (max-width: 933px) {
  #solutions.tumblr blockquote {
    margin-top: 110px;
    margin-right: 30px;
  }
}

#solutions.tumblr figcaption {
  margin-left: 50px;
  width: 430px;
}
@media (max-width: 749px) {
  #solutions.tumblr figcaption {
    margin-left: 0;
  }
}
@media (min-width: 480px) and (max-width: 749px) {
  #solutions.tumblr figcaption {
    margin-left: 30px;
  }
}
@media (min-width: 750px) and (max-width: 933px) {
  #solutions.tumblr figcaption {
    margin-left: 30px;
    margin-top: 65px;
    width: 330px;
  }
}

#solutions.tumblr figcaption img {
  width: 430px;
}
@media (max-width: 749px) {
  #solutions.tumblr figcaption img {
    width: 330px;
  }
}
@media (min-width: 480px) and (max-width: 749px) {
  #solutions.tumblr figcaption img {
    width: 430px;
  }
}
@media (min-width: 750px) and (max-width: 933px) {
  #solutions.tumblr figcaption img {
    width: 330px;
  }
}

#solutions.tumblr h1 {
  color: #fff;
  text-shadow: 1px 1px 2px #999;
}

#solutions.tumblr h2 {
  color: #203950;
  text-shadow: 1px 1px 2px #999;
}

/*RICH MEDIA*/
.richmedia.splash {
  overflow: visible;
}

.richmedia.splash:before {
  position: absolute;
  content: "";
  left: 50%;
  top: 40px;
  margin-left: -493px;
  z-index: 20;
  width: 593px;
  height: 416px;
  background: url(/images/solutions_rich_media.png) no-repeat;
  background-size: contain;
}
@media (max-width: 749px) {
  .richmedia.splash:before {
    top: 50px;
    margin-left: -158px;
    width: 320px;
  }
}
@media (min-width: 480px) and (max-width: 749px) {
  .richmedia.splash:before {
    top: 50px;
    margin-left: -238px;
    width: 470px;
  }
}
@media (min-width: 750px) and (max-width: 933px) {
  .richmedia.splash:before {
    top: 100px;
    margin-left: -393px;
    width: 403px;
  }
}

#solutions.richmedia {
  background: url(/images/bg_solutions_alt4.png);
  padding-top: 75px;
}
@media (max-width: 749px) {
  #solutions.richmedia {
    padding-top: 285px;
  }
}
@media (min-width: 480px) and (max-width: 749px) {
  #solutions.richmedia {
    padding-top: 345px;
  }
}

#solutions.richmedia figure {
  margin-top: 0;
}
@media (min-width: 750px) {
  #solutions.richmedia figure {
    padding-bottom: 40px;
  }
}

#solutions.richmedia blockquote {
  margin-top: 40px;
  margin-right: 10px;
}
@media (max-width: 749px) {
  #solutions.richmedia blockquote {
    margin-top: 0px;
    margin-right: 0;
  }
}
@media (min-width: 480px) and (max-width: 749px) {
  #solutions.richmedia blockquote {
    margin-top: 40px;
  }
}

#solutions.richmedia h1 {
  color: #fff;
  text-shadow: 0 0 3px #c8cbce;
  max-width: 280px;
}
@media (min-width: 480px) and (max-width: 749px) {
  #solutions.richmedia h1 {
    max-width: 400px;
  }
}

#solutions.richmedia h2 {
  color: #203950;
  text-shadow: 0 0 3px #c8cbce;
}

/*SECOND SCREEN*/
.secondscreen.splash {
  overflow: visible;
}

.secondscreen.splash:before {
  position: absolute;
  content: "";
  left: 50%;
  top: 40px;
  margin-left: -409px;
  z-index: 20;
  width: 484px;
  height: 415px;
  background: url(/images/solutions_second_screen.png) no-repeat;
  background-size: contain;
}
@media (max-width: 749px) {
  .secondscreen.splash:before {
    top: 80px;
    margin-left: -158px;
    width: 320px;
  }
}
@media (min-width: 480px) and (max-width: 749px) {
  .secondscreen.splash:before {
    margin-left: -238px;
    width: 470px;
  }
}
@media (min-width: 750px) and (max-width: 933px) {
  .secondscreen.splash:before {
    top: 70px;
    margin-left: -393px;
    width: 403px;
  }
}

#solutions.secondscreen {
  background: url(/images/bg_opensource.png);
  padding-top: 75px;
}
@media (max-width: 749px) {
  #solutions.secondscreen {
    padding-top: 285px;
  }
}
@media (min-width: 480px) and (max-width: 749px) {
  #solutions.secondscreen {
    padding-top: 345px;
  }
}

#solutions.secondscreen .contain {
  min-height: 360px;
}
@media (max-width: 749px) {
  #solutions.secondscreen .contain {
    min-height: 330px;
  }
}
@media (min-width: 480px) and (max-width: 749px) {
  #solutions.secondscreen .contain {
    min-height: 360px;
    top: 50px;
    width: 470px;
  }
}

#solutions.secondscreen figure {
  margin-top: 0;
}
@media (min-width: 750px) {
  #solutions.secondscreen figure {
    padding-bottom: 40px;
  }
}

#solutions.secondscreen blockquote {
  margin-top: 40px;
  margin-right: 10px;
}
@media (max-width: 749px) {
  #solutions.secondscreen blockquote {
    margin-top: 80px;
    margin-right: 0;
  }
}

#solutions.secondscreen h1 {
  color: #fff;
  text-shadow: 0 0 3px #c8cbce;
  max-width: 280px;
}
@media (min-width: 480px) and (max-width: 749px) {
  #solutions.secondscreen h1 {
    max-width: 400px;
  }
}

#solutions.secondscreen h2 {
  color: #203950;
  text-shadow: 0 0 3px #c8cbce;
}

/*CONQUEST*/
.conquest.splash {
  overflow: visible;
}

.conquest.splash:before {
  position: absolute;
  content: "";
  left: 50%;
  top: 40px;
  margin-left: -459px;
  z-index: 20;
  width: 559px;
  height: 445px;
  background: url(/images/solutions_conquest.png) no-repeat;
  background-size: contain;
}
@media (max-width: 749px) {
  .conquest.splash:before {
    top: 80px;
    margin-left: -158px;
    width: 320px;
  }
}
@media (min-width: 480px) and (max-width: 749px) {
  .conquest.splash:before {
    margin-left: -238px;
    width: 470px;
  }
}
@media (min-width: 750px) and (max-width: 933px) {
  .conquest.splash:before {
    top: 90px;
    margin-left: -393px;
    width: 403px;
  }
}

#solutions.conquest {
  background: url(/images/bg_solutions_alt6.png);
  padding-top: 75px;
}
@media (max-width: 749px) {
  #solutions.conquest {
    padding-top: 285px;
  }
}
@media (min-width: 480px) and (max-width: 749px) {
  #solutions.conquest {
    padding-top: 345px;
  }
}

#solutions.conquest .contain {
  min-height: 360px;
}
@media (max-width: 749px) {
  #solutions.conquest .contain {
    min-height: 320px;
  }
}

#solutions.conquest figure {
  margin-top: 0;
}
@media (min-width: 750px) {
  #solutions.conquest figure {
    padding-bottom: 40px;
  }
}

#solutions.conquest blockquote {
  margin-top: 40px;
  margin-right: 10px;
}
@media (max-width: 749px) {
  #solutions.conquest blockquote {
    margin-top: 60px;
    margin-right: 0;
  }
}
@media (min-width: 480px) and (max-width: 749px) {
  #solutions.conquest blockquote {
    margin-top: 120px;
  }
}

#solutions.conquest h1 {
  color: #fff;
  text-shadow: 0 0 3px #c8cbce;
  max-width: 280px;
}
@media (min-width: 480px) and (max-width: 749px) {
  #solutions.conquest h1 {
    max-width: 400px;
  }
}

#solutions.conquest h2 {
  color: #203950;
  text-shadow: 0 0 3px #c8cbce;
}

/*CONTINUITY*/
.continuity.splash {
  overflow: visible;
}

.continuity.splash:before {
  position: absolute;
  content: "";
  left: 50%;
  top: 30px;
  margin-left: -417px;
  z-index: 20;
  width: 684px;
  height: 457px;
  background: url(/images/solutions_continuity.png) no-repeat;
  background-size: contain;
}
@media (max-width: 749px) {
  .continuity.splash:before {
    top: 50px;
    margin-left: -158px;
    width: 320px;
  }
}
@media (min-width: 480px) and (max-width: 749px) {
  .continuity.splash:before {
    top: 50px;
    margin-left: -238px;
    width: 470px;
  }
}
@media (min-width: 750px) and (max-width: 933px) {
  .continuity.splash:before {
    top: 90px;
    margin-left: -393px;
    width: 533px;
  }
}

#solutions.continuity {
  background: url(/images/bg_solutions_alt3.png);
  padding-top: 75px;
}
@media (max-width: 749px) {
  #solutions.continuity {
    padding-top: 265px;
  }
}
@media (min-width: 480px) and (max-width: 749px) {
  #solutions.continuity {
    padding-top: 326px;
  }
}

#solutions.continuity .contain {
  min-height: 380px;
}
@media (max-width: 749px) {
  #solutions.continuity .contain {
    min-height: 0;
  }
}
@media (min-width: 750px) and (max-width: 933px) {
  #solutions.continuity .contain {
    min-height: 340px;
  }
}

#solutions.continuity figure {
  margin-top: 0;
}
@media (min-width: 750px) {
  #solutions.continuity figure {
    padding-bottom: 40px;
  }
}

#solutions.continuity blockquote {
  margin-top: 40px;
  margin-right: 10px;
}
@media (max-width: 749px) {
  #solutions.continuity blockquote {
    margin-top: 0px;
    margin-right: 0;
  }
}
@media (min-width: 480px) and (max-width: 749px) {
  #solutions.continuity blockquote {
    margin-top: 40px;
  }
}

#solutions.continuity h1 {
  color: #fff;
  text-shadow: 0 0 3px #c8cbce;
  max-width: 280px;
}
@media (min-width: 480px) and (max-width: 749px) {
  #solutions.continuity h1 {
    max-width: 400px;
  }
}

#solutions.continuity h2 {
  color: #203950;
  text-shadow: 0 0 3px #c8cbce;
}

/*PINTEREST*/
.pinterest.splash {
  overflow: visible;
}

.pinterest.splash:before {
  position: absolute;
  content: "";
  left: 50%;
  top: 50px;
  z-index: 20;
  width: 259px;
  height: 390px;
  margin-left: -209px;
  background: url(/images/solutions_pinterest_a.png) no-repeat;
  background-size: contain;
}
@media (max-width: 749px) {
  .pinterest.splash:before {
    width: 160px;
    margin-left: 10px;
    top: 50px;
  }
}
@media (min-width: 480px) and (max-width: 749px) {
  .pinterest.splash:before {
    margin-left: -5px;
    width: 220px;
    top: 55px;
  }
}
@media (min-width: 750px) and (max-width: 933px) {
  .pinterest.splash:before {
    top: 65px;
    margin-left: -207px;
    width: 200px;
  }
}

#solutions.pinterest {
  background: url(/images/bg_solutions_alt7.png);
  padding-top: 75px;
  margin-bottom: 15px;
}

#solutions.pinterest .contain {
  min-height: 270px;
}
@media (max-width: 749px) {
  #solutions.pinterest .contain {
    min-height: 0;
  }
}
@media (min-width: 750px) and (max-width: 933px) {
  #solutions.pinterest .contain {
    min-height: 210px;
  }
}

#solutions.pinterest figure {
  margin-top: 0;
}
@media (min-width: 750px) {
  #solutions.pinterest figure {
    padding-bottom: 40px;
  }
}
@media (min-width: 750px) and (max-width: 933px) {
  #solutions.pinterest figure {
    padding-bottom: 0;
  }
}

#solutions.pinterest figure img {
  position: absolute;
}
@media (max-width: 749px) {
  #solutions.pinterest figure img {
    position: static;
    width: 290px;
  }
}
@media (min-width: 480px) and (max-width: 749px) {
  #solutions.pinterest figure img {
    width: 400px;
  }
}
@media (min-width: 750px) and (max-width: 933px) {
  #solutions.pinterest figure img {
    width: 350px;
    top: 31px;
  }
}

#solutions.pinterest blockquote {
  margin-top: 30px;
  margin-right: 10px;
}
@media (max-width: 749px) {
  #solutions.pinterest blockquote {
    margin-top: 10px;
    margin-right: 0;
  }
}
@media (min-width: 480px) and (max-width: 749px) {
  #solutions.pinterest blockquote {
    margin-top: 10px;
  }
}
@media (min-width: 750px) and (max-width: 933px) {
  #solutions.pinterest blockquote {
    margin-top: 10px;
  }
}

#solutions.pinterest h1 {
  color: #ffc862;
  text-shadow: 0 0 3px #c8cbce;
  max-width: 280px;
}
@media (min-width: 480px) and (max-width: 749px) {
  #solutions.pinterest h1 {
    max-width: 400px;
  }
}

#solutions.pinterest h2 {
  color: #fff;
  text-shadow: 0 0 3px #c8cbce;
}

/*****************SOLUTIONS INDEX PAGE******************************/
#indexhdr {
  background: #fff;
  padding-bottom: 70px;
}

#indexhdr h1 {
  font-family: SohoStd-BoldCompressed;
  font-weight: normal;
  font-size: 350%;
  line-height: 100%;
  margin: 50px 25px 10px;
  padding: 0;
  color: #00b3d8;
  text-shadow: 1px 1px 2px #bbb;
}
@media (max-width: 749px) {
  #indexhdr h1 {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 30px;
    font-size: 327%;
  }
}
@media (min-width: 480px) and (max-width: 749px) {
  #indexhdr h1 {
    font-size: 357%;
  }
}
@media (min-width: 750px) and (max-width: 933px) {
  #indexhdr h1 {
    font-size: 347%;
  }
}

#indexhdr h2 {
  color: #363636;
  font-size: 100%;
  text-shadow: 0 0 2px #ccc;
  margin: 0 25px;
  padding: 0;
}
@media (max-width: 749px) {
  #indexhdr h2 {
    margin: 0 10px;
  }
}

#solutions.index {
  background: url(/images/bg_solutions_alt5.png);
  overflow: visible;
  padding: 0;
}

#solutions.index:before {
  transform: rotate(0);
  -moz-transform: rotate(0);
  -webkit-transform: rotate(0);
  width: 100%;
  height: 140px;
  position: absolute;
  left: 0;
  z-index: 5;
  background: transparent;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(white), color-stop(1, white));
  /* webkit example */
  background-image: -moz-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 100%);
  /* mozilla example - FF3.6+ */
  /* IE8 uses -ms-filter for whatever reason... */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFFFF, endColorstr=#FFFFFFFF );
  -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFFFF, endColorstr=#FFFFFFFF );
  content: "";
  border: 1px transparent red;
  top: 655px;
}
@media (max-width: 749px) {
  #solutions.index:before {
    top: 1760px;
  }
}
@media (min-width: 480px) and (max-width: 749px) {
  #solutions.index:before {
    top: 995px;
  }
}
@media (min-width: 750px) and (max-width: 933px) {
  #solutions.index:before {
    top: 995px;
  }
}

#solutions.index:after {
  bottom: 0;
  top: 0;
  background: transparent url(/images/solutions_trim_tear_flip.png) repeat-x;
}

#solutionslist {
  position: absolute;
  margin-top: -40px;
}

#solutionslist ul {
  list-style: none;
  margin: 0 25px;
  padding: 0;
  overflow: hidden;
}
@media (max-width: 749px) {
  #solutionslist ul {
    margin: 0 10px;
  }
}
@media (min-width: 480px) and (max-width: 749px) {
  #solutionslist ul {
    width: 430px;
    margin-left: 30px;
  }
}

#solutionslist li {
  float: left;
  width: 263px;
  min-height: 350px;
}
@media (max-width: 749px) {
  #solutionslist li {
    width: 100%;
    text-align: center;
    margin: 0 auto;
    clear: both;
    min-height: 0;
    padding-bottom: 30px;
  }
}
@media (min-width: 480px) and (max-width: 749px) {
  #solutionslist li {
    width: 183px;
    margin: 0 30px 0 0;
    clear: none;
    min-height: 310px;
  }
}
@media (min-width: 750px) and (max-width: 933px) {
  #solutionslist li {
    text-align: center;
    margin: 0 42px;
  }
}

@media (min-width: 480px) and (max-width: 749px) {
  #solutionslist li img {
    width: 183px;
  }
}

#solutions.index .contain {
  min-height: 795px;
  z-index: 3;
}
@media (max-width: 749px) {
  #solutions.index .contain {
    min-height: 1900px;
  }
}
@media (min-width: 480px) and (max-width: 749px) {
  #solutions.index .contain {
    min-height: 1135px;
  }
}
@media (min-width: 750px) and (max-width: 933px) {
  #solutions.index .contain {
    min-height: 1135px;
  }
}

li.middle {
  margin: 0 42px;
}

#solutionslist h3 {
  font-size: 100%;
  color: #363636;
  text-shadow: 1px 1px 2px #fff;
  margin: 5px 0;
}

#solutionslist p {
  font-size: 77%;
  text-shadow: 1px 1px 2px #fff;
  margin: 0 0 15px;
  min-height: 60px;
}
@media (max-width: 749px) {
  #solutionslist p {
    min-height: 0;
  }
}
@media (min-width: 480px) and (max-width: 749px) {
  #solutionslist p {
    min-height: 70px;
  }
}

#solutionslist a.idxbtn {
  font-size: 100%;
}

/*******MAIN BODY TEXT********/
#solutionsbody {
  background: #fff;
  font-size: 123%;
  font-family: Helvetica;
  padding: 30px 0;
  color: #203950;
}

#solutionsbody a {
  color: #ff6243;
}

#solutionsbody b {
  display: block;
}

#solutionsbody img.bodyL {
  float: left;
  margin: 50px 25px 45px 0;
}

/*********DROP NAV**********/
section.dropnav {
  overflow: visible;
  z-index: 70;
}

#dropnav {
  position: absolute;
  top: 35px;
  right: 0;
  z-index: 50;
  width: 240px;
}
@media (max-width: 749px) {
  #dropnav {
    top: 0px;
    right: 50%;
    margin-right: -120px;
  }
}

#dropnav a.dntrigger {
  padding: 10px 8px;
  background: #fff;
  border: 1px solid #cecece;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  width: 218px;
}

#dropnav .dntrigger:hover {
  background: #F2F2F2;
}

#dropnav .dntrigger.on {
  background: #F2F2F2;
  border-radius: 4px 4px 0 0;
  -webkit-border-radius: 4px 4px 0 0;
}

#dropnav .dntrigger.on + ul {
  margin: 0;
  padding: 0;
  background: #F2F2F2;
  border: 1px solid #cecece;
  border-top: none;
  border-radius: 0 0 4px 4px;
  -webkit-border-radius: 0 0 4px 4px;
  list-style: none;
  width: 234px;
}

#dropnav .dntrigger span {
  background: url(/images/caret_down.png) 100% 40% no-repeat;
}

#dropnav a {
  display: block;
  text-align: center;
  min-width: 190px;
  text-decoration: none;
  text-transform: uppercase;
  color: #888;
  font-size: 77%;
  font-weight: bold;
}

#dropnav a span {
  display: inline-block;
  padding: 0 15px 0 5px;
}

#dropnav ul {
  display: none;
  list-style: none;
}

#dropnav ul a {
  text-align: left;
  padding: 12px 8px;
}

#dropnav ul a:hover {
  background: #addef2;
}

/*SHOULD INCORPORATE BOOTSTRAP - BUT THIS FOR NOW*/
.btn {
  display: inline-block;
  padding: 7px 25px;
  margin-bottom: 0;
  font-size: 115%;
  line-height: 20px;
  color: #333333;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  vertical-align: middle;
  cursor: pointer;
  background-color: #f5f5f5;
  background-image: -moz-linear-gradient(top, white, #e6e6e6);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(#e6e6e6));
  background-image: -webkit-linear-gradient(top, white, #e6e6e6);
  background-image: -o-linear-gradient(top, white, #e6e6e6);
  background-image: linear-gradient(to bottom, white, #e6e6e6);
  background-repeat: repeat-x;
  border: 1px solid #cccccc;
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  border-bottom-color: #b3b3b3;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-warning {
  color: #ffffff;
  text-decoration: none;
  text-shadow: 0 0 3px #bbb;
  background-color: #faa732;
  background-image: -moz-linear-gradient(top, #fbb450, #f89406);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
  background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
  background-image: -o-linear-gradient(top, #fbb450, #f89406);
  background-image: linear-gradient(to bottom, #fbb450, #f89406);
  background-repeat: repeat-x;
  border-color: #f89406 #f89406 #ad6704;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.btn:hover, .btn:focus {
  color: #ffffff;
  background-color: #f89406;
  background-position: 0 -15px;
  -webkit-transition: background-position 0.1s linear;
  -moz-transition: background-position 0.1s linear;
  -o-transition: background-position 0.1s linear;
  transition: background-position 0.1s linear;
}
