/* 
‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰
‰‰‰                               ‰‰‰
‰‰‰            B O D Y            ‰‰‰ DIRTY-cfs-style.css
‰‰‰                               ‰‰‰
‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰

*/
body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

@font-face {
  font-family: 'Insomniak';
  src: url('../style/fonts/Insomniak-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Radioaktiv';
  src: url('../style/fonts/Radioaktiv-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'DonaldsansCODE';
  src: url('../style/fonts/DonaldsansCODE-Regular.woff2') format('woff2');
}


/* 
‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰
‰‰‰                               ‰‰‰
‰‰‰        W R A P P E R S        ‰‰‰ DIRTY-cfs-style(+).css
‰‰‰                               ‰‰‰
‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰

*/

#bigheadwrapper, 
#diversitywrapper, 
#ramblewrapper, 
#greatwhitewrapper, 
#cashandbuywrapper, 
#starterwrapper_DonaldsansCODE,
#starterwrapper_BillyMozz,
#aboutcontactwrapper {
    position: absolute;
    background: none;
    border-style: none;
    border-width: 2px;
    border-radius: 25px;
    border-color: rgba(0, 0, 0, 0.2);
}

#bigheadwrapper {
    display: block;
    top: 20px;
    left: 18px;
    width: 1074px;
    height: 200px;
}

#diversitywrapper {
    display: block;
    top: 230px;
    left: 18px;
    width: 704px;
    height: 200px;
}

#ramblewrapper {
    display: inline-block;
    top: 0px;
    left: 735px;
    width: 338px;
    height: auto;
}

#greatwhitewrapper {
    display: block;
    top: 210px;
    left: -10px;
    width: 704px;
    height: 1000px;
}

#cashandbuywrapper {
    display: block;
    position: absolute;
    top: 570px;
    left: 755px;
    width: 338px;
    height: 100px;
}

#starterwrapper_DonaldsansCODE {
    display: block;
    position: absolute;
    top: 230px;
    left: 18px;
    width: 1074px;
    height: 270px;
}

#starterwrapper_BillyMozz {
    display: block;
    position: absolute;
    top: 510px;
    left: 18px;
    width: 1074px;
    height: 270px;
}

#aboutcontactwrapper {
    display: block;
    position: absolute;
    top: 810px;
    left: 18px;
    width: 1074px;
    height: 270px;
}





/* 
‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰
‰‰‰                               ‰‰‰
‰‰‰           B O X E S           ‰‰‰ DIRTY-cfs-style(+).css
‰‰‰                               ‰‰‰
‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰

*/ 
#variationsbox, 
#ramblebox,
#buybox, 
#pricebox,
#cartandbuybox,
#cartbox,
#bigpricebox,  
#aboutbox, 
#contactbox,  
#emailbox, 
#starterwrappercommentarybox,  
#mixedupalphabetbox, 
#typefontnamebox, 
#dottedlinebox_starterbox, 
#dottedlinebox_long, 
#dottedlinebox_short,
#dottedlinebox_shortest {
    border-style: none;
    border-width: 1px;
    border-radius: 5px;
    border-color: red;
    
}

/*        B O X E S = dotted lines */
#dottedlinebox_long {
    position:absolute;
    top: 170px;
    left: 0px;
    width: 1074px;
    height: 30px;
    margin-bottom: -60px;
}

#dottedlinebox_short {
    position: absolute;
    top: 170px;
    left: 0px;
    width: 704px;
    height: 30px;
    margin-bottom: -60px;
}

#dottedlinebox_shortest {
    position: relative;
    display: inline-block;
    top: 0px;
    left: 0px;
    width: 338px;
    height: 30px;
    margin-bottom: -60px;
}

#dottedlinebox_starterbox {
    position:absolute;
    top: 240px;
    left: 0px;
    width: 1074px;
    height: 30px;
    margin-bottom: -60px;
}

#typefontnamebox {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 250px;
    height: 40px;
}

#emailbox {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 1074px;
    height: 80px;
}

#variationsbox {
    position: absolute;
    top: 0px;
    left: 250px;
    width: 440px;
    height: 180px;
}

#variationenbox_ITALIC {
    position: absolute;
    top: 45px;
    left: 260px;
    width: 100px;
    height: 40px;
}

#variationenbox_BOLD {
    position: absolute;
    top: 90px;
    left: 260px;
    width: 100px;
    height: 40px;
}

#ramblebox {
    position: relative;
    top: 0px;
    left: 0px;
    width: 338px;
    height: auto;
}

#mixedupalphabetbox {
    position: absolute;
    top: 80px;
    left: 0px;
    width: 1074px;
    height: 130px;
}

#starterwrappercommentarybox {
    position: absolute;
    top: 38px;
    left: 0px;
    width: 600px;
    height: 40px;
}





/*       B O X E S = price and buy */
#pricebox {
    display: inline-block;
    position: relative;
    top: 20px;
    left: 0px;
    width: 150px;
    height: 80px;
}

#bigpricebox {
    display: inline-block;
    position: relative;
    top: -14px;
    left: -10px;
    width: 150px;
    height: 80px;
}

#cartandbuybox {
    display: inline-block;
    position: relative;
    top: 20px;
    left: 30px;
    width: 150px;
    height: 170px;
}

#cartbox {
    display: inline-block;
    position: relative;
    top: 20px;
    left: 30px;
    width: 150px;
    height: 80px;
}

#buybox {
    display: inline-block;
    position: relative;
    top: -20px;
    left: 30px;
    width: 150px;
    height: 80px;
}

/*       B O X E S = about and contact */
#aboutbox {
    position: absolute;
    top:0px;
    left: 0px;
    width: 150px;
    height: 80px;
}

#contactbox {
    position: absolute;
    top:0px;
    left: 190px;
    width: 150px;
    height: 80px;
}

/* 
‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰
‰‰‰                               ‰‰‰
‰‰‰            T E X T            ‰‰‰ DIRTY-cfs-style(+).css
‰‰‰                               ‰‰‰
‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰

*/

p.bigtitling {
    font-family: Insomniak;
}

p.typefontname, p.aboutcontacttext, p.emailtext, p.dottedline, p.redboxtext, p.variations, p.ramble, p.initialcommentary, p.bigpricetext, p.pricetext, p.buytext {
    font-family: DonaldsansCODE;
}

 

/*             T E X T = top title */
p.bigtitling {
    position: relative;
    text-decoration: none;
    color: black;
    font-size: 87px;
    font-weight: normal;
    text-align: left;
    margin: 0px 0px;
    display: block;
}

/*         T E X T = email text */
p.emailtext {
    position: relative;
    color: white;
    background-color: black;
    font-size: 64px;
    text-align: left;
    margin: 0px 0px;
    padding: 0px;
    display: table;
}

/*         T E X T = typeface name */
p.typefontname {
    position: relative;
    color: white;
    background-color: black;
    font-size: 32px;
    text-align: left;
    margin: 0px 0px;
    padding: 0px;
    display: table;
}

/*        T E X T = variation name */
p.variations {
    position: relative;
    color: black;
    font-size: 32px;
    text-align: left;
    display: block;
    margin: 0px;

}



/*           T E X T = price/index */
p.pricetext {
    position: relative;
    color: white;
    background-color: grey;
    font-size: 64px;
    text-align: left;
    margin: 0px 0px;
    display: block;
}

p.bigpricetext {
    position: relative;
    color: grey;
    background-color: none;
    font-size: 100px;
    text-align: left;
    margin: 0px 0px;
    display: block;
}

/*                   T E X T = buy */
p.redboxtext {
    position: relative;
    color: white;
    background-color: #B22222;
    font-size: 64px;
    text-align: left;
    margin: 0px 0px;
    display: block;
}

/*                   T E X T = about/contact */
p.aboutcontacttext {
    position: relative;
    color: white;
    background-color: #B22222;
    font-size: 64px;
    text-align: left;
    margin: 0px 0px;
    display: table;
}

/*                T E X T = ramble */
p.ramble {
    position: relative;
    color: black;
    font-size: 20px;
    text-align: left;
    display: block;
    margin: 0px;

}

/*                T E X T = initial commentary */
p.initialcommentary {
    position: absolute;
    color: black;
    background-color: darkgrey;
    font-size: 20px;
    text-align: left;
    display: block;
    margin: 0px;
    display: table;
}

/*                T E X T = dotteds */
p.dottedline {
    position: relative;
    text-decoration: none;
    color: grey;
    font-size: 48px;
    font-weight: normal;
    letter-spacing: 13.7px;
    text-align: left;
    margin: -16px -10px;
    display: block;
}

/*    
‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰
‰‰‰                               ‰‰‰
‰‰‰             L I N K S         ‰‰‰ DIRTY-cfs-style.css
‰‰‰                               ‰‰‰
‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰‰

*/

/*          L I N K S = bigtitling */
a.bigtitlinglink {
    color: black;
    text-decoration: none;
}

a.bigtitlinglink:visited {
    color: black;
    text-decoration: none;
}

a.bigtitlinglink:hover {
    color: #B22222;
    text-decoration: none;
    cursor: pointer;
    background-color: white;
}

a.bigtitlinglink:active {
    color: black;
    text-decoration: none;
}

/*               L I N K S = ramble*/
a.ramblelink {
    color: grey;
    text-decoration: none;
    background-color: darkgrey;
}

a.ramblelink:visited {
    color: grey;
    text-decoration: none;
    background-color: darkgrey;
}

a.ramblelink:hover {
    color: #B22222;
    text-decoration: none;
    cursor: pointer;
    background-color: white;
}

a.ramblelink:active {
    color: #B22222;
    text-decoration: none;
    background-color: white;
}

/*          L I N K S = variationen*/
a.variationslink {
    color: grey;
    text-decoration: none;
    background-color: darkgrey;
}

a.variationslink:visited {
    color: grey;
    text-decoration: none;
    background-color: darkgrey;
}

a.variationslink:hover {
    color: #B22222;
    text-decoration: none;
    cursor: pointer;
    background-color: white;
}

a.variationslink:active {
    color: grey;
    text-decoration: none;
    background-color: darkgrey;
}

/*       L I N K S = typefontsample*/
a.#typefacesamplebox_donaldsans {
   text-decoration: none;
}

a.#typefacesamplebox_donaldsans:visited {
    text-decoration: none;
}

a.#typefacesamplebox_donaldsans:hover {
    text-decoration: none;
    cursor: pointer;
}

a.#typefacesamplebox_donaldsans:active {
    text-decoration: none;
}