.main {
    max-width: 800px;

    margin: 0 auto;
}

#header {
   margin-top: 43px;
   margin-bottom: 30px;
   text-align: center;
}

ul, ol {

}

h1 {
   margin-top: 2em;
}

h2 {
   margin-top: 1.5em;
}

.uar {
    text-align: center;

    font-weight: bold;
}

.main p, .main ul, .main ol {
   font-size: 16px;
}



#followus {
   position: relative;
   top: 4px;
   margin-left: 12px;
}

/*#logo {
   border: 1px solid green;
}*/

.cb_icon {
   width: 80px;
   height: 80px;
   position: relative;
   top: -20px;
   margin-right: 12px;
}

.cb_icon_and_text {
/*   
    max-width: 683px;
    min-width: 268px;
    width: 74%;
*/
   width: 300px;    
   margin: 1em 0 1em;
}

.cb_prefix,
.cb_suffix {
   font-family: 'Play', sans-serif;
   font-size: 72px;
}

.cb_prefix {
   font-weight: bold;
   color: #1a1a1a;
}

.cb_suffix {
   color: #888;
}

@media (max-width: 480px) {
   .cb_icon {
      width: 60px;
      height: 60px;
   }

   .cb_prefix,
   .cb_suffix {
      font-size: 50px;
   }
}

#github {
   width: 132px;
   height: 133px;
   position: absolute;
   top: 41px;
   right: 0px;
   border: 0;
}

.project_watch_count {
  position: absolute;
  top: 59px;
  right: -14px;
}

.project_watch_count > iframe:first-of-type {
  margin-right: 1em;
}

/*
#github {
   background-image: url('../img/gen/github.png');
}

#github:hover {
   background-image: url('../img/gen/github_highlighted.png');
}
*/

/* the below works to switch out SVG for PNG
   using Modernizr, but the rendering quality of
   text at an angle is currently so bad in Chrome
   that PNG is still the better solution
*/
#github {
   background-image: url('../img/gen/github_path.svg');
   -webkit-filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.5));
   filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.5));

   z-index: 10; /* otherwise the crossbar log overlays this partially and prevents the hover */
}

#github:hover {
   background-image: url('../img/gen/github_path_highlighted.svg');
   -webkit-filter: drop-shadow(0px 0px 15px rgba(0,0,0,0.7));
   filter: svg-drop-shadow;
}

html.no-svg #github {
   background-image: url('../img/gen/github.png');
}

html.no-svg #github:hover {
   background-image: url('../img/gen/github_highlighted.png');
}


@media (max-width: 630px) {
   #github {
      visibility: hidden;
   }

}

#viewport {
   /*min-width: 480px;*/
}

#shortExplainer {
    width: 100%;

    max-width: 790px;
    margin: 0 auto;
    /* background-color: #fff; */
    padding: 0.8em 2em;
    border-radius: 4px;
}

#shortExplainer > p {
    line-height: 1.7em;

}



#crossbarNameHomepage {
    width: 354px;

    margin: 1em 0 0 0;
    position: relative;
    bottom: 29px;
}


.centeredLink {
    text-align: center;

    font-size: 20px;
    font-weight: 300;
}

.centeredLink > a,
.centeredLink > a:visited {

}
.centeredLink > a:hover {

}

#contribute {
   margin-top: 2em;
}




/* initialExplanation formatting */

.initial-explanation {
    overflow: hidden;

    /* width: 100%; */
    /* padding: 10px; */
}

.initial-explanation > div {
    /* float: left; */

    /* width: 50%; */
    /* width: 80%; */
    margin: 0 auto;
}

.initial-explanation h1  {
    font-size: 40px;

    color: #444;
    font-weight: normal;
}

.initial-explanation p,
.initial-explanation ul {
    font-size: 20px;

}

.how-does-it-work > div > img {
    /* max-width: 500px; */

    padding: 5px;
    margin: 5%;
    /*box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.3);*/
    width: 94%;
    margin-top: 9em;
}

.how-does-it-work > div img.pattern-illustration {
    width: 44%;

    min-width: 300px;
    max-width: 350px;
    /* box-shadow: none; */
    /* float: left; */
    display: inline;
    margin: 1em 1em;
    background-color: #FFFBE2;
    padding: 16px;
    border-radius: 0px;
    border: 1px solid #B79F00;
}

.how-does-it-work > div img.pattern-illustration.first {
    /* margin: 0 55px 0 0; */

    /* float: left; */
}

.how-does-it-work > div img.pattern-illustration.second {
    /* float: right; */

}

.how-does-it-work .pattern-illustration-container {
   overflow: hidden;
   padding: 0 1em;
   text-align: center;
}



@media(max-width: px) {
   .how-does-it-work > div img.pattern-illustration.first {
    margin: 0 0 20px 0;
   }

}



@media (max-width: 1024px) {
   #initialExplanation > div {
       float: left;

       width: 100%;

       overflow: visible;
   }

   #initialExplanation > div > img {
      max-width: 600px;
      margin: 41px auto;

      display: block;
   }
}


/* detailExplanations formatting */

#detailExplanations {
    overflow: hidden;

}

#detailExplanations .detailsItem {
    /* float: left; */

    display: inline-block;
    /* width: 33.333333%; */
    width: 32%;
    vertical-align: top;
    padding: 0 2em;
}

#detailExplanations .detailsItem:first-of-type {
   padding-left: 0;
}

#detailExplanations .detailsItem h2 {
    color: #CBAE00;

    font-weight: normal;
}

#detailExplanations .detailsItem p {

}

#detailExplanations .detailsItem p.readMore {
    /* text-align: right; */

}

#detailExplanations .detailsItem p > a {

}




@media (min-width: 1200px) {
   #detailExplanations .detailsItem h2 {
      /*color: red;*/
   }
   #detailExplanations .detailsItem:nth-of-type(4) {
      padding-left: 0;
   }
}

@media (max-width: 1199px) {
   #detailExplanations .detailsItem h2 {
      /*color: green;*/
   }

   #detailExplanations .detailsItem {
      width: 49%;
   }

   #detailExplanations .detailsItem:nth-of-type(3),
   #detailExplanations .detailsItem:nth-of-type(5) {
      padding-left: 0;
   }
}

@media (max-width: 720px) {
   #detailExplanations .detailsItem h2 {
      /*color: blue;*/
   }

   #detailExplanations .detailsItem {
      width: 100%;
   }

   #detailExplanations .detailsItem {
      padding-left: 0;
   }
}


#code h2  {
   font-size: 45px;
   color: #444;
   font-weight: normal;
   text-align: left;
}




/* demoBox formatting */

#demoBox {
   /* text-align: center; */
   margin-top: 0.2em;
}

#demoBox h2 {
   font-size: 45px;
   color: #444;
   font-weight: normal;
   text-align: left;
}

#demoBox .spacerLine {
   display: inline-block;
   width: 60%;
   height: 2px;
   border-top: 2px solid #D1D1D1;
}

#demoBox h3 {
   font-size: 20px;
   /*font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;*/
   font-weight: 300;
   margin-top: 0.5em;
   border-bottom: none;
   text-align: center;
}

.demos-overview-link {
    text-align: center;

    font-size: 22px;
    padding-top: 0.7em;
}

.demos-overview-link a {
  text-decoration: underline;
}

#demoBox p.direct-demos {
    text-align: center;
  
    padding-top: 1em;
}

.demos_list {
   list-style: none;
   margin: 0 auto;
   min-height: 100px;
   text-align: center;
   /*max-width: 1507px;*/
   max-width: 100%;
   padding: 0;
}

.demos_list > li {
   width: 280px;
   height: 320px;

   position: relative;
   color: #444;
   margin-bottom: 16px;
   margin: 13px 16px 16px;
   padding: 0px;
   display: inline-block;
   text-align: center;
   vertical-align: top;
}

.demos_list > li.nonDisplay {
   display: none;
}

.demos_list > li > a {
   display: block;
   /*background-color: #f0f0f0;*/
   /*color: #333;*/
   background-color: #444;
   color: #fff;
   border-radius: 3px;
   border: solid 1px #000;
   padding: 10px 0;
   width: 282px;
   height: 280px;
   margin: 0 auto;
   font-size: 20px;
   text-align: center;
   /*vertical-align: middle;*/
   text-decoration: none;
}


/* CDN CTA */

#cta {
    background-color: #E5E5E5;

    padding: 1.1em;
    margin: 1em auto;
    width: 91%;
    font-size: 35px;
    text-align: center;
    border-radius: 2px;
    box-shadow: 0 0 18px -1px rgba(0, 0, 0, 0.2);
}

#cta .want,
#cta .reward {
    display: block;

}

#cta .want {

}

#cta .reward {
    font-size: 87%;

}

/*#cta a,*/
#cta button {
    background-color: #FFDE00;

    color: #444;
    padding: 0.2em 1em;
    border-radius: 5px;
    border: none;
    border: 1px solid #F2D300;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.3);
    margin: 0.9em 0 0.1em;
    /* display: block; */
}

#cta button a {
    color: #7D7D7D;

    /* font-weight: bold; */
    font-size: 110%;
}

#cta button a:visited {
   color: #7d7d7d;
}

#cta button a:hover {
   text-decoration: none;
   color: #999;
}
#cta button:hover {
   background-color: #FFEB61;
}


.floatContainer {
   overflow: hidden;
}

.floatLeft {
   float: left;
}

.interactionsSubList {
   max-width: 425px;
}



#logo {
   position: relative;
   margin-bottom: 20px;
/*   
   border-bottom: 1px solid #806F00;
   */
}

#tagline {
   font-size: 28px;
   font-weight: 300;
   margin-top: 12px;
/*   
   position: absolute;
   top: 132px;
   left: 220px;
*/
}

#taghead td {
   vertical-align: top;
   padding: 12px;
   font-size: 24px;
   font-weight: 300;
}

#header-cta {
    font-size: 48px;
    color: #B79F00;

    font-weight: 300;
    padding-bottom: 12px;
    border-bottom: 1px solid #aaa;
/*
    text-shadow: -2px 0 3px rgba(0,0,0,.2);
    border-image: linear-gradient(to right, black, rgba(0, 0, 0, 0)) 1 100%; 
*/    
}

#where_to_go li {
   font-size: 20px;
   font-weight: 300;
   line-height: 1.7em;
}

#foowrapper {
   margin-top: 32px;
/*   
   box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.3);
*/   
   padding: 8px 12px 8px 12px;
   border-radius: 0px;
   border: 1px solid #B79F00;
   background-color: #FFFBE2;
}

#foo {
   padding: 18px;
   width: 100%;
/*   
   border-collapse: separate;
   border-spacing: 1px 5px;
*/   
   font-size: 20px;
}

#foo tr {
   font-size: 16px;
/*   
   background-color: #B79F00;
   background-color: rgba(183,159,0,0.2);

   border-top: 1px solid #B79F00;
   border-top: 1px solid rgba(183,159,0,0.3);
*/   
}

#foo ul {
    margin-left: 0;
    padding-left: 0;

}

#foo li {
   font-size: 14px;
    
   list-style-type: none;
    margin-left: 0;
    
   text-indent: -1em;
    padding-left: 1.5em;
}
#foo li:before
{
  content: "\2013\A0";
}

#foo tr:first-of-type {
   font-size: 20px;
   font-weight: 300;
   text-align: left;
   background: none;
   border-top: none;
/*   
   background-color: rgba(183,159,0,0.2);
   background-color: #FFDE00;
*/   
   border-bottom: 1px solid rgba(183,159,0,0.3);
}

#foo tr:first-of-type > h2 {
   font-size: 28px;
   font-weight: 300;   
}

.bullet {
   width: 24px;
   height: 24px;
   border-radius: 12px;
   background-color: #716200;
   color: #fff;
   display: inline-block;
   vertical-align: middle;
   text-align: center;
   margin-right: 12px;
   position: relative;
   top: -3px;
}

/*
#foo tr:nth-of-type(2) {
   padding-top: 30px;
}*/


#foo td {
   /*width: 50%;*/
   padding: 12px 24px 12px 24px;
   vertical-align: top;
}

/*
   background-color: #B79F00;
*/

/************************/
/*    code box styles   */
/************************/

#codeBlock {
   max-width: 900px;
   margin: 1em auto;
}


#switchBar {
    border-radius: 3px 3px 0px 0px;
    font-size: 1px;
    background-color: #000;
}

#switchBar > div {
    background-color: #E0E0E0;
    border: 1px solid #CCCCCC;

    background-color: #FFFBE2;
   border: 1px solid #B79F00;

    display: inline-block;
    padding: 0.3em 1.1em 0em 0.7em;
    /* border-radius: 3px; */
    text-align: center;
    font-size: 14px;
    width: 100%;
}


#switchBar .switchBarButtons {
   display: inline-block;
}

#switchBar  button {
    background-color: #BBBBBB;
    border: medium none;
    padding: 3px 10px;
    border-radius: 3px;
    width: 8em;
    margin-bottom: 6px;
    margin-right: 3px;
    transition: all 0.3s;
    font-size: 17px;
}

#switchBar .switchBarButtons > button.highlighted {
    color: #F0F0F0;
    text-decoration: none;
    background-color: #777;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5);;
    transition: all 0.5s;
}


#switchBar .switchBarButtons > button:hover {
    color: #000;
    background-color: #ABABAB;
}

#switchBar .switchBarButtons > button.highlighted:hover {
   color: #ddd;
   background-color: #666
}

.syntaxContainer {
    height: 528px;
    overflow: auto;
    font-size: 14px;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid #B79F00;
    border-radius: 0px;
}



.syntaxContainer .container:before,
.syntaxContainer .container:after {
   content: none;
}


.syntaxContainer {
   position: relative;
}

.syntaxContainer > div {
   position: absolute;
   left: 24px;
   top: 0;
   opacity: 1;
   transition: opacity 0.7s;
}

.syntaxContainer > div.noShow {
   opacity: 0;
   z-index: -1;  /* make the displayed code accessible for selection */
   transition: opacity 0.7s;
}


/* change overflow here for the code box */
[class^="highlight-"],
[class*=" highlight-"] {
   overflow: visible;
}

div.highlight {
   border: none;
}

div.highlight pre {
   font-size: 15px;
}

.tip {
   color: #7c6a00;
   font-size: 14px;
   width: 80%;
   margin: auto;
}



/******************************
* Top Advantages Switch Box   *
******************************/

.topCarousel {
    width: 100%;

}

.topCarousel .controller {
    text-align: center;

}

.topCarousel .controller button {
    border: none;

    margin: 0 9%;
    font-size: 1.5em;
    /* text-decoration: underline; */
    color: #888;
    background-color: transparent;
}

.topCarousel .controller button.active {
    color: #A18700;
    text-decoration: underline;
}

.topCarousel .controller button:focus {
    color: #A18700;
}

.topCarousel .contentWrapper {
   position: relative;
   margin-top: 3em;
}

.topCarousel .content {
   opacity: 0; 
   position: absolute;
   top: 0;
   left: 0;
   transition: all .3s;
}

.topCarousel .content.active {
   opacity: 1;
   position: relative;
   transition: all .3s .3s;
}

.topCarousel .content img {
    width: 44%;

    min-width: 270px;
    max-width: 400px;
    vertical-align: top;
}

.topCarousel .content .advantages {
    display: inline-block;
    width: 50%;
    min-width: 300px;
    margin-left: 3%;
}


@media (max-width: 670px) {

  .topCarousel .content {
    text-align: center;

  }
  .topCarousel .content img {
    width: 100%;
    
  
  }

  .topCarousel .content .advantages {
      display: block;
  
      width: 100%;
  
      text-align: left;
   
      margin-top: 2em;
   }

   .topCarousel .controller button {
    margin: 0 0px;
      
   
    width: 44%;
    font-size: 1.2em;
}
}

.content h1 {
    margin-top: 0;

}

.advantages p {

}

.advantages ul {

}

.advantages li {
    line-height: 2em;

}


.ctaContainer {
    text-align: center;

    margin: 3em 0 2em 0;
}

.ctaContainer a {
    font-size: 2em;
   
    font-weight: bold;
    background-color: #FFF;
    background-color: #b59f00;
    padding: .5em 1em;
    /* border: 1px solid; */
    color: #fff;
    border-radius: 2px;
}