/* General */

/*Fonts*/
@font-face {
    font-family: 'BebasNeueRegular';
    src: url('BebasNeue-webfont.eot');
    src: url('BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('BebasNeue-webfont.woff') format('woff'),
         url('BebasNeue-webfont.ttf') format('truetype'),
         url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/*Reset Common Tags*/

a,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,th,td,img
{
    margin:0;
    padding:0;
}

header,nav,article,aside,footer,hgroup,section
{
    display:block;
}

body
{
    font-family: "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
    font-weight:400;
    font-stretch:normal;
    background:url(../images/bg_main.jpg) top center repeat-x #d6eeff;
    font-size:14px;
    line-height:21px;
    color:#6e8a9e;
    text-shadow: 0 1px 0 #FFFFFF;
    text-align:center;
    padding:0;
    margin:0;
}

/**** GENERAL ****/

a
{
    color:#6e8a9e;
    outline:0;
    text-decoration:none;
    cursor:pointer;
}

a:hover
{
    text-decoration:none;
}

img
{
    border:0;
}

p
{
    float:left;
    width:690px;
    padding: 0 135px;
    margin:15px 0;
}

h1
{
    margin:12px 0;
    font-weight:normal;
}

h2
{
    margin:30px 0 20px 0;
    font-weight:normal;
    font-family: 'BebasNeueRegular';
    font-size:40px;
    color:#7597b0;
    text-shadow: 0 1px 0 #ebf7ff;
}

/**** LAYOUT ****/

#container
{
    margin:0 auto;
    width:960px;
    background: url(../images/bg_top.jpg) top center no-repeat;
}

/**** HEADER ****/

header
{
    float:left;
    width:960px;
    height:150px;
    color:#7696ae;
}

header h1
{
    margin:60px 0 20px 0;
    font-family: 'BebasNeueRegular';
    font-size:60px;
}

/**** CONTENT ****/

#main-loader-container
{
    float:left;
    width:960px;
    height:330px;
    position:relative;
    background: url(../images/bg_loaders.jpg) no-repeat top center;
}

#main-loader
{
    float:left;
    width:230px;
    height:230px;
    position:absolute;
    top:29px;
    left:364px;
}

.button
{
    float:left;
    font-family: 'BebasNeueRegular';
    text-shadow: 0 1px 1px #dfeef9;
    font-size:24px;
    line-height:57px;
    width:167px;
    height:57px;
    margin:30px 0 0 396px;
    display:block;
    cursor:pointer;
    color:#638caa;
    background: url(../images/bg_button.png) top center no-repeat;
}

.button:hover
{
    background-position: 0 -60px;
    color:#729fc0;
}

#bitbucket
{
    float:left;
    width:960px;
    font-size:10px;
    margin-bottom:10px;
}

#bitbucket a
{
    font-weight:bold;
}

#share
{
    float:left;
    width:650px;
    padding-left:310px;
}

.share-item
{
    float:left;
    width:105px;
}

.share-item-g
{
    float:left;
    width:80px;
}

#better
{
    clear:both;
    float:left;
    width:70px;
    margin:15px 445px;
}

#better:hover,
#bitbucket a:hover
{
    opacity:0.8;
}

#more-examples
{
    clear:both;
    width:70px;
    font-family: 'BebasNeueRegular';
    font-size:12px;
    padding-bottom:23px;
    color:#7597b0;
    margin:0 445px;
    text-shadow:none !important;
    background: url(../images/arrow_down.png) bottom center no-repeat;
}

#examples
{
    clear:both;
    float:left;
    width:960px;
    margin-top:1000px;
}

#examples p
{
    margin-bottom:100px;
}

#examples p.last
{
    margin-bottom:30px;
}

#controllable-loader-container
{
    float:left;
    width:960px;
    height:390px;
    position:relative;
    background: url(../images/bg_controllable.jpg) no-repeat top center;
}

#controllable-loader
{
    position:absolute;
    width:230px;
    height:230px;
    left:364px;
    top:22px;
}

#slider
{
    position:absolute;
    top:340px;
    width:332px;
    height:12px;
    text-align:center;
    margin:0 314px;
    background: url(../images/bg_slider.jpg) no-repeat;
}
 
.ui-slider-handle {
    width:36px;
    height:36px;
    position:absolute;
    top:-13px;
    margin-left:-18px;
    z-index:200;
    background: url(../images/slider.png) no-repeat;
}

#multiple-loader-container
{
    float:left;
    width:960px;
    height:270px;
    position:relative;
    background: url(../images/bg_multiple.jpg) no-repeat top center;
}

#multiple-loader-one
{
    position:absolute;
    width:160px;
    height:160px;
    left:205px;
    top:22px;
}

#multiple-loader-two
{
    position:absolute;
    width:160px;
    height:160px;
    left:401px;
    top:22px;
}

#multiple-loader-three
{
    position:absolute;
    width:160px;
    height:160px;
    left:595px;
    top:22px;
}

#run-multiple
{
    margin:0 0 10px 396px;
}

#back-to-top
{
    float:left;
    clear:both;
    width:70px;
    font-family: 'BebasNeueRegular';
    font-size:12px;
    padding-top:23px;
    color:#7597b0;
    margin:0 445px 10px 445px;
    text-shadow:none !important;
    background: url(../images/arrow_up.png) top center no-repeat;
}

@media screen and (max-width: 600px) {

html {
    -webkit-text-size-adjust: none;
}

body
{
    background:#d6eeff;
    text-align:center !important;
}

/**** GENERAL ****/

p
{
    float:left;
    width:90%;
    padding: 0 5%;
    margin:10px 0;
}

h1
{
    margin:10px 0;
    font-weight:normal;
}

h2
{
    margin:20px 0 10px 0;
    font-weight:normal;
    font-family: 'BebasNeueRegular';
    font-size:30px;
    color:#7597b0;
    text-shadow: 0 1px 0 #ebf7ff;
}

/**** LAYOUT ****/

#container
{
    margin:0 auto;
    width:100%;
    background: none;
    text-align:center;
}

/**** HEADER ****/

header
{
    float:left;
    width:100%;
    height:120px;
    color:#7696ae;
}

header h1
{
    margin-top:20px;
    font-family: 'BebasNeueRegular';
    font-size:30px;
}

/**** CONTENT ****/

#main-loader-container
{
    float:left;
    width:100%;
    height:auto;
    position:relative;
    background: none;
    text-align:center;
}

#main-loader
{
    float:left;
    width:230px;
    height:230px;
    position:relative;
    top:5px;
    left:50%;
    margin-left:-115px;
}

.button
{
    float:left;
    font-family: 'BebasNeueRegular';
    text-shadow: 0 1px 1px #dfeef9;
    font-size:24px;
    line-height:57px;
    width:167px;
    height:57px;
    display:block;
    cursor:pointer;
    color:#638caa;
    position:relative;
    left:50%;
    margin-left:-83px;
    background: url(../images/bg_button.png) top center no-repeat;
}

#bitbucket
{
    float:left;
    width:100%;
    font-size:10px;
    margin-bottom:5px;
}

#bitbucket a
{
    font-weight:bold;
}

#share
{
    float:left;
    width:100%;
    text-align:center;
    padding-left:0;
}

.share-item
{
    float:left;
    width:50%;
    text-align:center;
    margin:5px 0;
}

.share-item-g
{
    float:left;
    width:50%;
    text-align:center;
    margin:5px 0;
}

#better
{
    clear:both;
    float:left;
    width:100%;
    margin:10px 0px;
    text-align:center;
}

#more-examples
{
    display:none;
}

#examples
{
    clear:both;
    float:left;
    width:100%;
    margin-top:20px;
    display:none;
}

#examples p
{
    margin-bottom:50px;
}

#examples p.last
{
    margin-bottom:15px;
}

#controllable-loader-container
{
    float:left;
    width:100%;
    height:390px;
    position:relative;
    background:none;
}

#controllable-loader
{
    position:absolute;
    width:230px;
    height:230px;
    left:0;
    top:0;
}

#slider
{
    position:absolute;
    top:340px;
    width:332px;
    height:12px;
    text-align:center;
    margin:0 314px;
    background: url(../images/bg_slider.jpg) no-repeat;
    display:none;
}
 
.ui-slider-handle {
    width:36px;
    height:36px;
    position:absolute;
    top:-13px;
    margin-left:-18px;
    z-index:200;
    background: url(../images/slider.png) no-repeat;
}

#multiple-loader-container
{
    float:left;
    width:960px;
    height:270px;
    position:relative;
    background: url(../images/bg_multiple.jpg) no-repeat top center;
    display:none;
}

#multiple-loader-one
{
    position:absolute;
    width:160px;
    height:160px;
    left:205px;
    top:22px;
    display:none;
}

#multiple-loader-two
{
    position:absolute;
    width:160px;
    height:160px;
    left:401px;
    top:22px;
    display:none;
}

#multiple-loader-three
{
    position:absolute;
    width:160px;
    height:160px;
    left:595px;
    top:22px;
    display:none;
}

#run-multiple
{
    margin:0 0 10px 396px;
    display:none;
}

#back-to-top
{
    display:none;
}

}