@import url('https://fonts.googleapis.com/css?family=Raleway');

.hidescreen {
    display:none;
}

html,body {
    padding:0;
    margin:0;
    min-height:100%;
}

body,p,td,input,select,textarea {
    font-family:'Raleway', sans-serif;
    font-size:12pt;
    line-height:133%;
}

a,a:visited {
    color:#666;
    text-decoration:none;
}

a:hover,a:active,a.active,.active a,.active-parent a {
    color:black;
    text-decoration:underline;
}

header {
    background:url("../img/lz_wasser.jpg") no-repeat center;
    background-position-y:57%;
    background-size:cover;
    color:white;
}

header div {
    padding:16px;
    background:rgba(0,48,3,0.33);
}

nav {
    float:right;
}

nav ul {
    list-style:none;
    margin:0;
    margin-top:78px;
    padding:0;
}

nav ul li {
    font-size:133%;
    display:inline-block;
    margin-right:2em;
}

main {
    margin:16px;
    padding:16px;
    display:inline-block;
    vertical-align:top;
    width:62%;
}

main.full {
    display:block;
    width:auto;
}

aside {
    display:inline-block;
    vertical-align:top;
    float:right;
    width:calc(37% - 96px);
    min-height:calc(100% - 131px);
    
    padding:16px;
    background:rgba(32,48,32,0.9);
    color:white;
}

aside *, aside a:hover, aside a:visited,
header *, header a:hover, header a:visited {
    color:white;
}

img {
    max-width:100%;
}

aside .progress.current {
    font-weight:bold;
}

aside .progress.done {
    text-decoration:line-through;
}

.lzselector {
    vertical-align:top;
    display:inline-block;
    width:256px;
    margin-right:16px;
    margin-bottom:16px;
    cursor:pointer;
    border-radius:16px;
    padding:16px;
    background:#eee;
}

.lzselector.imgcustom {
	background:#edf;
}

.lzselector img {
    display:block;
    border:2px solid #ccc;
    box-shadow:2px 2px 10px 0px rgba(0,0,0,0.25);
    width:100%;
    margin-bottom:16px;
    background-color:white;
}

.lzselector:hover {
    background:#ccc;
}

.lzselector.imgcustom:hover {
	background:#cbd;
}

label {
    cursor:pointer;
}

.fontselect {
    background-repeat:no-repeat;
    display:inline-block;
    margin-bottom:16px;
    vertical-align:middle;
    width:256px;
    height:28px;
}

.fontselect.taz {
    background-size:320px;
    background-position:-85px -124px;
}

.fontselect.ds.oneimg {
    background-size:400px;
    background-position:-93px -59px;
    width:210px;
}

.fontselect.ds.twoimg {
    background-size:540px;
    background-position:-388px -120px;
}

.fontselect.ds.twoimg.onlyimage {
    background-position: -320px -79px;
}

.visualize {
    float:left;
    margin-right:32px;
}

.visualize .image {
    border:2px solid #ccc;
    box-shadow:2px 2px 10px 0px rgba(0,0,0,0.25);
    background-repeat:no-repeat;
    background-position:top left;
    background-size:cover;
    width:256px;
    position:relative;
}

.visualize .image div {
    background:rgba(255,128,0,0.5);
    position:absolute;
}

.visualize.taz .image {
    height:320px;
}

.visualize.taz .step-2a {
    top:101px;
    left:66px;
    height:28px;
    width:180px;
}
.visualize.taz .step-2b {
    top:181px;
    left:66px;
    height:8px;
    width:180px;
}
.visualize.taz .step-3 {
    top:17px;
    left:66px;
    height:33px;
    width:112px;
}
.visualize.taz .step-4 {
    top:64px;
    left:66px;
    height:28px;
    width:112px;
}

.visualize.taz .step-5 {
    top:139px;
    left:66px;
    height:33px;
    width:180px;
}

.visualize.taz .step-6 {
    top:185px;
    left:156px;
    height:65px;
    width:90px;
}

.visualize.taz .step-7 {
    top:261px;
    left:66px;
    height:16px;
    width:180px;
}

.visualize.taz .step-8 {
    top:277px;
    left:66px;
    height:16px;
    width:180px;
}

.visualize.taz .step-9, 
.visualize.taz .step-10 {
    top:293px;
    left:66px;
    height:8px;
    width:180px;
}

.visualize.taz .step-11 {
    top:16px;
    left:181px;
    height:80px;
    width:66px;
}

.visualize.ds.oneimg .image {
    height:163px;
}

.visualize.ds.oneimg .step-2a {
    top:133px;
    left:62px;
    height:6px;
    width:56px;
}

.visualize.ds.oneimg .step-2b {
    top:40px;
    left:62px;
    height:14px;
    width:130px;
}

.visualize.ds.oneimg .step-3 {
    top:12px;
    left:62px;
    height:12px;
    width:124px;
}

.visualize.ds.oneimg .step-4 {
    top:24px;
    left:62px;
    height:14px;
    width:130px;
}

.visualize.ds.oneimg .step-5 {
    top:57px;
    left:62px;
    height:4px;
    width:130px;
}

.visualize.ds.oneimg .step-6 {
    top:70px;
    left:62px;
    height:59px;
    width:182px;
}

.visualize.ds.oneimg .step-7 {
    top:134px;
    left:201px;
    height:4px;
    width:38px;
}

.visualize.ds.oneimg .step-8 {
    top:145px;
    left:62px;
    height:4px;
    width:182px;
}

.visualize.ds.oneimg .step-9 {
    top:14px;
    left:193px;
    height:54px;
    width:46px;
}

.visualize.ds.twoimg .image {
    height:85px;
}

.visualize.ds.twoimg.onlyimage .image {
    height:67px;
}

.visualize.ds.twoimg .step-2a {
    top:58px;
    left:87px;
    height:6px;
    width:31px;
}

.visualize.ds.twoimg .step-2b {
    top:18px;
    left:146px;
    height:6px;
    width:105px;
}

.visualize.ds.twoimg .step-2c {
    top:66px;
    left:146px;
    height:4px;
    width:28px;
}

.visualize.ds.twoimg.onlyimage .step-2a {
    top:50px;
    left:216px;
    height:13px;
    width:35px;
}

.visualize.ds.twoimg.onlyimage .step-2b {
    top:10px;
    left:112px;
    width:94px;
}

.visualize.ds.twoimg.onlyimage .step-2c {
    top:54px;
    left:112px;
}

.visualize.ds.twoimg .step-3 {
    top:62px;
    left:133px;
    height:14px;
    width:124px;
}

.visualize.ds.twoimg.onlyimage .step-3 {
    top:36px;
}

.visualize.ds.twoimg .step-4 {
    top:10px;
    left:146px;
    height:6px;
    width:105px;
}
.visualize.ds.twoimg.onlyimage .step-4 {
    top:5px;
    left:110px;
    height:4px;
    width:95px;
}

.visualize.ds.twoimg .step-5 {
    top:25px;
    left:146px;
    height:4px;
    width:105px;
}

.visualize.ds.twoimg.onlyimage .step-5 {
    top:16px;
    left:110px;
    height:4px;
    width:95px;
}

.visualize.ds.twoimg .step-6 {
    top:32px;
    left:146px;
    height:32px;
    width:105px;
}

.visualize.ds.twoimg.onlyimage .step-6 {
    top:20px;
    left:110px;
    height:32px;
    width:95px;
}

.visualize.ds.twoimg .step-7 {
    top:66px;
    left:232px;
    height:4px;
    width:20px;
}

.visualize.ds.twoimg.onlyimage .step-7 {
    top:54px;
    left:184px;
}

.visualize.ds.twoimg .step-8 {
    top:72px;
    left:146px;
    height:4px;
    width:105px;
}

.visualize.ds.twoimg.onlyimage .step-8 {
    top:58px;
    left:110px;
    height:4px;
    width:95px;
}

.visualize.ds.twoimg .step-9 {
    top:16px;
    left:84px;
    height:44px;
    width:36px;
}

.visualize.ds.twoimg.onlyimage .step-9 {
    top:-87px;
    left:4px;
    height:58px;
    width:39px;
}

.visualize, .wizard {
    display:inline-block;
    vertical-align:top;
}

textarea {
    width:100%;
    min-height:80px;
}



.editor {
    border-radius:16px;
    padding:16px;
    background:#eee;
    margin-bottom:16px;
}

.editor textarea {
    vertical-align:top;
    display:inline-block;
    width:70%;
    height:320px;
    margin-right:8px;
}

.editor .texts {
    vertical-align:top;
    font-size:80%;
    display:inline-block;
    width:calc(30% - 48px);
    height:312px;
    overflow-y:auto;
    border:1px solid #ccc;
    padding:4px;
}

.editor .text {
    padding-bottom:4px;
    border-bottom:1px solid #999;
    margin-bottom:4px;
    cursor:pointer;
}

.editor .text:hover {
    background:white;
}

.editor table tr td:nth-child(1) {
    width:20%;
}
.editor table tr td:nth-child(2) {
    width:80%;
}

.editor td input[type=text] {
    width:100%;
}

.wizard {
    width:calc(100% - 300px);
}

.success,.error {
	padding:8px;
	border-radius:8px;
	border-width:2px;
	border-style:solid;
}

.success {
	background-color:#6BFF6C;
	border-color:#007F01;
	color:#007F01;
}

.error {
	background-color:#FF6C6B;
	border-color:#7F0100;
	color:#7F0100;
}

table {
    border-collapse:collapse;
}

.team {
    vertical-align:top;
    display:inline-block;
    width:200px;
    margin-right:16px;
    margin-bottom:16px;
}

.img-lz {
    width:64px;
    margin-right:16px;
    margin-bottom:16px;
    display: inline-block;
    vertical-align: top;
}

aside p {
	
    display: inline-block;
    vertical-align: top;
	width: 80%;
}

aside p:first-child {
	width:100%;
}

.clear {
    clear:both;
}

@media only screen and (max-width: 1000px) {
    .hidemobile {
        display:none;
    }
    
    .hidescreen {
        display:block;
    }
    
    nav {
        float:none;
    }
    
    aside {
        width:auto;
        height:auto;
        min-height:0 !important;
        float:none;
        display:block;
    }
    
    nav ul {
        margin-top:1em;
    }
    
    nav ul li {
        display:block;
        margin-bottom:0.5em;
    }
    
    div.wizard {
        width:auto;
        display:block;
    }
    
    h1,h2 {
        line-height:133%;
    }
    
    .editor textarea,
    .editor .texts{
        width:100%;
        margin-bottom:4px;
    }
    
    
}