/**
 * Structure
 */
body {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
	font-weight: 300;
	background:#fff;
	color: #333;
	font-size:14px;
}

h1, h2, h3, h4, h5 {
    font-family: 'Lato', sans-serif;
}

p {
    line-height:160%;
}

pre {
    line-height:120%;
}

.clear {
	clear:both;
}

a.button,
a.button:visited,
a.button:link {
    display:inline-block;
    border:1px solid #fff;
    padding:10px 20px;
    color: #fff;
    border-radius:20px;
    cursor:pointer;
}

a.button:hover,
a.button:active {
    background:#fff;
    color: #FF6600;
    text-decoration:none;
}

a.button[disabled] {
    cursor:default;
}

#custom a.button[disabled]:hover,
a.button[disabled]:hover {
    background:#ff6600;
    color: #fff;
}

/**
 * Landing page
 */
#lead {
    position:fixed;
    background: #FF6600;
    width:50%;
    height:100%;
    color:#fff;
}

#lead .box {
    position:absolute;
    top:50%;
    right:0%;
    margin-top:-100px;
    width:300px;
    padding:10px 30px;
    height:200px;
    text-align:right;
}

#lead h1 {
    font-size:70px;
}

#lead .button {
    margin-top:20px;
}

#preview {
    position:fixed;
    width:50%;
    margin-left:50%;
    height:100%;
}

#code {
    background:#333;
    border-radius:3px;
    color:#fff;
    font-family:monospace;
    padding:10px 20px;
    line-height:160%;
    overflow:auto;
    white-space: pre;
}

#code .italic {
    font-style:italic;
}

#code .red {
    color:#F92672;
}

#code .string {
    color: #E6DB74;
}

#code .blue {
    color: #66D9EF;
}

#preview .box {
    position:absolute;
    top:50%;
    left:0;
    margin-top:-172px;
    padding:20px;
    width:480px;
    height:355px;
    box-sizing:border-box;
}

#preview .box .nav {
    position:absolute;
    top:130px;
    width:40px;
    height:40px;
    cursor:pointer;
}

#preview .box .nav:hover i,
#preview .box .nav:active i {
    background: #FF6600;
}

#preview #prevIcon {
    left:20px;
}

#preview #nextIcon {
    right:20px;
}

#preview #icon {
    display:block;
    margin: 0 auto;
    width:250px;
    height:250px;
    cursor:pointer;
}

#preview .footer {
    position:absolute;
    bottom:10px;
    left:20px;
}

/** Page **/
.page {
    margin:0 auto;
}

.page .nav {
    position:fixed;
    padding:20px;
    width:30%;
    height:100%;
    color:#fff;
    background: #FF6600;
    text-align:right;
}

.page .nav h1 {
    font-size:50px;
}

.page .nav a {
    color:#fff;
}

.page .nav a:hover {
    text-decoration:none;
}

.page .nav .button {
    margin:5px;
}

.page .nav a.button:hover {
    color:#ff6600;
}

.page .nav .item {
    margin-top:30px;
}

.page .content {
    margin-left:30%;
    padding:50px 30px;
    width:500px;
}

.page .content h1,
.page .content h2,
.page .content p {
    padding:10px;
}

.page .content h1,
.page .content h2 {
    border-bottom:1px solid #FF6600;
}

.page .content h1 {
    font-size:40px;
}

.page .content h2 {
    font-size:25px;
}

.page .content p code,
.page .content .iconList code {
    display:inline-block;
    background:#ddd;
    padding:0px 7px;
    border-radius:5px;
    border: 1px solid #ccc;
}

/* Icon list */
.page .iconList .item {
    float:left;
    width:140px;
    padding:15px 10px;
}

.page .iconList .icons {
    display:block;
    margin:10px auto;
    width:30px;
    height:30px;
    vertical-align:middle;
    cursor:pointer;
}

.page .content .iconList code {
    display:block;
    text-align:center;
}

/* FAQ */
.page ol {
    margin-top:30px;
}

.page ol > li {
    margin:20px 0px;
}

/* API */
.page h3 {
    margin-top:40px;
    font-size:20px;
    padding:10px;
    border-bottom:1px solid #ccc;
}

/* Custom */
#custom .compile {
    margin-top:30px;
}

#custom .compile .button {
    display:block;
    float:right;
    width:150px;
    margin:5px;
    text-align:center;
}

#custom .iconList .item {
    margin:5px;
    width:100px;
    text-align:center;
    padding:15px 5px 10px;
    border-radius:5px;
    border: 1px solid #ccc;
    cursor:pointer;
}

#custom .iconList .item i {
    display:block;
    margin:0 auto;
    -webkit-transition:none;
    -moz-transition:none;
    -o-transition:none;
    transition:none;
}


#custom .iconList .iteam:hover,
#custom .iconList .item.selected {
    background:#ff6600;
    color:#fff;
}

#custom .iconList .iteam:hover i > i,
#custom .iconList .item.selected i > i {
    background:#fff;
}

#custom #generate {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    padding:10px;
    text-align:center;
    background:#ff6600;
    color:#fff;
    border-bottom:1px solid #fff;
    z-index:1;
}

#compilePopup {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

#compilePopup .wrapper {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#000;
    opacity:0.5;
}

#compilePopup .box {
    position:absolute;  
    top:50%;
    left:50%;
    margin-top:-225px;
    margin-left:-250px;
    width:500px;
    height:450px;
    background:#fff;
}

#compilePopup h2 {
    padding-left:20px;
}

#compilePopup .option {
    position:absolute;
    top:15px;
    right:15px;
}

#compilePopup .button {
    color: #ff6600;
    border-color: #ff6600;
}

#compilePopup .button:hover,
#compilePopup .button.selected {
    color:#fff;
    background: #ff6600;
}

#compilePopup .text {
    width:460px;
    height:290px;
    margin:20px;
    padding:10px;
    border: 1px solid #ccc;
    border-radius:5px;
    white-space:pre;
    overflow:auto;
    font-family:monospace;
    line-height:160%;
    display:block;
    resize:none;
}

#compilePopup p {
    padding:0;
}

#compilePopup .close {
    padding: 5px 20px;
}

.page .content .footer {
    padding:40px 20px 20px;
}

@media all and (max-width: 640px) {

    /* Landing Page */
    #lead {
        position:relative;
        width:100%;
    }

    #lead .box {
        position:relative;
        top:0;
        left:0;
        margin:0;
        width:100%;
        padding: 50px 30px;
        text-align:left;
        height:auto;
    }

    #preview {
        position:relative;
        width:480px;
        margin:0 auto;
        height:auto;
    }

    #preview .box {
        position:relative;
        top:0;
        left:0;
        margin:0;
        width:100%;
        height:auto;
    }

    #preview #code {
        margin-top: 30px;
    }

    #preview .footer {
        position:relative;
        bottom:0px;
        left:0px;
        padding:10px;
        text-align:center;
    }

    /* Page */
    .page {
        width: 100%;
    }

    .page .nav {
        position: relative;
        width: 100%;
        height: auto;
        text-align: left;
    }

    .page .nav br {
        display:none;
    }

    .page .nav .item {
        margin-top: 10px;
        text-align: center;
    }

    .page .nav .item a {
        margin: 5px;
    }

    .page .content {
        width:100%;
        margin-left:0;
    }
}

@media all and (max-width: 480px) {

    /* Landing Page */
    #preview {
        width:100%;
    }

    #preview #icon {
        width:125px;
        height:125px;
    }

    #preview .box .nav {
        top:60px;
    }
}