body {
    margin:0px;
    width:100%;
    height:100%;
    overflow:hidden;
    font-family:Arial;
    /* prevent text selection on ui */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    /* prevent scrolling in windows phone */
    -ms-touch-action: none;
    /* prevent selection highlight */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    background: #fff;
}

.header, .footer{
    position: absolute;
    background-color: #fff;
    text-align: center;
}
.header {
    top: 0px;
    left: 0px;
    right: 0px;
    padding:0px;
    height: 60px;
}
.footer {
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 42px;
    padding:0px;
}
.title {
    width: auto;
    line-height: 32px;
    font-size: 20px;
    font-weight: bold;
    color: #eee;
    text-shadow: 0px -1px #000;
    padding:0 60px;
}
.navbtn {
    cursor: pointer;
    float:left;
    padding-left: 10px;
}
.navbtn-hover, .navbtn:active {
    color: #fff;
    text-shadow: 0px 1px #aaa;
    background-color: #aaa;
    box-shadow: 0 0 1px 1px #444,inset 0 1px 0 0 #ccc;
}

#content{
    position: absolute;
    left: 0px;
    right: 0px;
    overflow:hidden;
    background-color:#fff;
}

#main-logged-panel-content{
    color:black;
}

#main-menu-block{
    /*background-color:red;*/
    height:35px;
    line-height:35px;
}

#main-menu-content{
    vertical-align:middle;
    margin-top:5px;
}


#sidebar-list{
    width:90%;
    margin:0px auto;
}

#sidebar-list .sidebar-button{
    margin:0;
    padding:0;
    border:1px solid #666 !important;
    box-shadow:none !important;
}

#canvas{
    cursor:crosshair ;
    background-color:#fff;
}

.palette-case {
    width:260px;
    margin:auto;
    text-align:center;
}
.palette-box {
    float:left;
    padding:2px 6px 2px 6px;
}
.palette {
    border:2px solid #777;
    height:36px;
    width:36px;
}
.red{
    background-color:#c22;
}
.blue{
    background-color:#22c;
}
.green{
    background-color:#2c2;
}
.white{
    background-color:#fff;
}
.black{
    background-color:#000;
    border:2px dashed #fff;
}
*/
/******************GLOBAL**************************/
@-ms-viewport{
  width: device-width;
}

html { 
	width:100%; height:100%;
	overflow-x:hidden;
	font-family:Helvetica, Arial, sans-serif; 
	-webkit-text-size-adjust:100%; 
}

* { 
	margin:0; padding:0; 
	-webkit-box-sizing:border-box; box-sizing:border-box;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-touch-action:none;
}

img { border:none; }

body {
	width:100%;	height:100%;
    overflow:hidden;
    -webkit-user-select:none;
    font-family:"AmbleRegular", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

input,textarea
{
    -webkit-user-select:text;
    -moz-user-select:text;
}

::selection { 
	background:#aaa; 
	color:#fff; 
}

a:focus, a:active, a:hover { outline:0; }

.clear { clear:both; }
.wrapper { float:left; }


/******************* SMARTPHONE [DEFAULT STYLES] **************************/

.content {
    display:block;
    width:100%; height:100%;
    background-image:-webkit-gradient(linear,color-stop(0.01, rgb(0,84,154)),color-stop(0.16, rgb(2,90,160)),color-stop(1, rgb(11,125,193)));
    background-image:-webkit-linear-gradient(rgb(0,84,154) 1%,rgb(2,90,160) 16%,rgb(11,125,193) 100%);
    background-image:-ms-linear-gradient(rgb(0,84,154) 1%,rgb(2,90,160) 16%,rgb(11,125,193) 100%);
    background-image:linear-gradient(rgb(0,84,154) 1%,rgb(2,90,160) 16%,rgb(11,125,193) 100%);
    background:rgb(0,84,154) url("../images/swoops.png") no-repeat;
    background-position:bottom center;
    -webkit-background-size:cover; background-size:cover;
}

.headline {
    display:inline-block;
    width:100%;
    text-align:center;
    font-size:40px;
    letter-spacing:-1pt;
    line-height:120%;
    color:rgb(255,255,255);
    text-shadow:1px 1px 0px rgba(0,55,100,0.8);
    text-align:center;
    padding-top:20px;
}

.middlesection {
    padding-top:20px;
}

.bottom {
    font-size:16px;
    line-height:115%;
    color:rgb(255,255,255);
    text-align:left;
    padding-left:17px;
    padding-top:15px;
}

.ending {
    font-size:14px;
    line-height:90%;
    color:rgb(255,255,255);
    text-align:left;
    padding-left:45px;
    padding-right:35px;
    padding-top: 15px;
}

.lists {
    display:inline;
    padding-left:2px;
}

#list1 {
    margin-bottom:5px;
}

.imglandscape {
    position:absolute;
    top:17%;
    left:5%;
}

.headline.headlinelandscape {
    padding-top:5px;
}

.bottom.bottomlandscape {
    position: absolute;
    top:15%;
    left:50%;
    margin-left: -65px;
    padding-right: 15px;
}

.ending.endinglandscape {
    position: absolute;
    top:50%;
    left:50%;
    margin-left:-15px;
    padding-top: 30px;
}


/************************ Mini-TABLET ****************************/
@media (orientation:portrait) and (min-width:481px) and (max-width:765px) {

    .content { 
       /* background:rgb(0,84,154) url("../images/swoops-lg.png") no-repeat;*/
        width:100%; height:100%;
        background-position:bottom center;
        -webkit-background-size:cover; background-size:cover;
    }

    .headline { 
        font-size:68px;
        text-shadow:3px 3px 0px rgba(0,55,100,0.8);
        padding-top: 40px;
    }

    .middlesection {
        padding-top: 40px;
    }

    .bottom {
        font-size: 30px;
        padding-left: 55px;
        padding-right: 28px;
        padding-top: 30px;
        padding-bottom: 15px;
    }

    .ending {
        font-size: 26px;
        padding-left: 125px;
        padding-right: 105px;
        padding-top: 0px;
    }

    #list1 {
        margin-bottom:15px;
    }

    .portrait {
        width:463px;
        height:271px;
    }

    .lists {
        padding-left:20px;
    }
}

@media (orientation:landscape) and (min-width: 481px) and (max-width:765px) {
    
    .imglandscape {
        position:absolute;
        top:17%;
        left:5%;
    }

    .headline.headlinelandscape {
        padding-top:5px;
    }

    .bottom.bottomlandscape {
        position: absolute;
        top:15%;
        left:50%;
        margin-left: -65px;
        padding-right: 15px;
    }

    .ending.endinglandscape {
        position: absolute;
        top:50%;
        left:50%;
        margin-left:-15px;
        padding-top: 30px;
    }
}

/************************ TABLET **************************/
@media (orientation:portrait) and (min-width:768px) and (max-width:1024px) {
    
    .content { 
       /* background:rgb(0,84,154) url("../images/swoops-lg.png") no-repeat;
        background-position:bottom center;*/
        -webkit-background-size:cover; background-size:cover;
    }

    .headline { 
        font-size:80px;
        text-shadow:3px 3px 0px rgba(0,55,100,0.8);
        padding-top: 40px;
    }

    .middlesection {
        padding-top: 40px;
    }

    .bottom {
        font-size: 36px;
        padding-left: 55px;
        padding-right: 28px;
        padding-top: 30px;
        padding-bottom: 15px;
    }

    .ending {
        font-size: 26px;
        padding-left: 125px;
        padding-right: 105px;
        padding-top: 0px;
    }

    #list1 {
        margin-bottom:15px;
    }

    .portrait {
        width:547px;
        height:320px;
    }

    .lists {
        padding-left:20px;
    }
}

@media (orientation:landscape) and (min-width:769px) and (max-width:1025px) {

     .headline { 
        font-size:68px;
    }

    .bottom {
        font-size: 30px;
    }

    .ending {
        font-size: 26px;
    }

    #list1 {
        margin-bottom:15px;
    }

    .imglandscape {
        width:322px;
        height:453px;
    }

    .headline.headlinelandscape {
        padding-top:5px;
    }

    .bottom.bottomlandscape {
        position: absolute;
        top:15%;
        left:50%;
        margin-left: -100px;
    }

    .ending.endinglandscape {
        position: absolute;
        top:50%;
        left:50%;
        margin-left: -80px;
        padding-top: 60px;
    }
}

/************************ DESKTOP ***************************/

@media (orientation:portrait) and (min-width:1080px) and (max-width: 1920px) {

    .content { 
       /* background:rgb(0,84,154) url("../images/swoops-lg.png") no-repeat;*/
        background-position:bottom center;
        -webkit-background-size:cover; background-size:cover;
    }

    .headline { 
        font-size:135px;
        text-shadow:4px 4px 0px rgba(0,55,100,0.8);
        padding-top: 40px;
    }

    .middlesection {
        padding-top: 40px;
    }

    .bottom {
        font-size: 60px;
        padding-left: 55px;
        padding-right: 28px;
        padding-top: 30px;
        padding-bottom: 15px;
    }

    .ending {
        font-size: 51px;
        padding-left: 125px;
        padding-right: 105px;
        padding-top: 0px;
    }

    #list1 {
        margin-bottom:15px;
    }

    .portrait {
        width:849px;
        height:497px;
    }

    .lists {
        padding-left:20px;
    }
}

@media (orientation:landscape) and (min-width:1080px) and (max-width: 1920px) {    
    .headline { 
        font-size:80px;
    }

    .bottom {
        font-size: 36px;
    }

    .ending {
        font-size: 30px;
    }

    .imglandscape {
        width:381px;
        height:535px;
    }

    .headline.headlinelandscape {
        padding-top:5px;
    }

    .bottom.bottomlandscape {
        position: absolute;
        top:15%;
        left:50%;
        margin-left: -236px;
    }

    .ending.endinglandscape {
        position: absolute;
        top:50%;
        left:50%;
        margin-left: -160px;
        margin-top: -115px;
        padding-top: 90px;
    }
}