/* general  */

body {
    background: url('../layout/mainbg.png') repeat;
    background-attachment: fixed;
    font: 100 1.1em 'Abel', sans-serif;
    color: #497e79;
    margin: 0;
    padding:  0;
}

img {
    border: 0;
}

a:link, 
a:visited, 
a:active {
    color: #88d4df;
    text-decoration:none;
    padding: 0 5px;
}

a:hover {
    color:#fff;
    background-color: #c0f41e;
    border-bottom: 1px solid #88d4df;
    transition: all 0.4s ease-in;
}

strong {
    color:#f75745;
}

em {
    color: #88d4df;
}


#wrapper {
    width: 100%;
}



/* navigation  */

#navigation {
    height: 76px;
    position: fixed;
    width: 100%;
    background-color: #d14d3e;
    box-shadow: 0 5px 10px rgba(0,0,0,0.3);
    z-index: 10;
    margin: 0;
    padding: 20px 0 0;
    text-align: center;
    border-bottom: 1px solid #f8fdfc;
}

#navigation ul {
    list-style-type: none;
    padding-right: 30px;
}

#navigation li {
    font:  1.35em 'Abel', sans-serif;
    list-style-type: none;
    letter-spacing: 1px;
    display: inline-block;
}

#navigation li a {
    background-color: #d14d3e;
    color: #f8fdfc;
    text-decoration: none;
    margin: 0;
    padding: 40px 30px 26px;
    border: 0;
    text-shadow: 1px 1px 1px #dff6f4;
}

#navigation li a:hover {
    color: #fff;
    border: 1px solid #d14d3e;
    border-bottom-color: #88d4df;
    transition: all 1.0s ease-in;
    background-color: transparent;
    background-color: #c0f41e;
    text-shadow: 1px 1px 1px #fff;
}

.subnavigation {
    padding: 40px 0 0;
    margin: 40px 0 0;
}
.subnavigation ul {
    list-style-type: none;
    padding: 0;
    margin: 0;    
}
          
.subnavigation li {
    list-style-type: none;
    border-bottom: 1px solid #88d4df;
    padding: 20px 0 10px;
}
          
.subnavigation li a {
    font: small-caps 100 1.15em 'Kreon', serif;
}
           
.infotext {
    margin: 2px 0 0;
    padding: 0;
    font-size: 0.88em;
    font-style: italic;
    text-indent: 58px;
}
          

          

/* arrow */
          
.arrow_box { 
    position: relative; 
    background: #e9f8f7; 
    border-top: 0;
    border-bottom: 1px solid #88d4df;
    margin: 75px 0 0;
    height: 0;
} 
          
.arrow_box:after, 
.arrow_box:before { 
    top: 100%;
    left: 50%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
}
          
.arrow_box:after { 
    border-color: rgba(233, 248, 247, 0); 
    border-top-color: #e9f8f7; 
    border-width: 35px; 
    margin-left: -35px; 
} 
          
.arrow_box:before { 
    border-color: rgba(136, 212, 223, 0); 
    border-top-color: #88d4df; 
    border-width: 36px; 
    margin-left: -36px; 
}

          

/* content  */

#main {
    position: relative;
    top: 145px;
    z-index: 5;
}

#content {
    width: 50%;
    margin: 0 auto;
    padding: 20px 20px 70px;
    text-align: left;
    background: transparent;
    background-color: rgba(248, 253, 252, 0.36);
}

.banner {
    margin: 0;
    background-color: #88d4df;
    border-radius: 20px 0 20px 20px;
    border: 1px solid #f8fdfc;
    text-align: center;
    box-shadow: 0 2px 3px rgba(0,0,0,0.3);
}

.banner h2 {
    margin: 0;
    padding: 30px 50px;
    color: #f8fdfc;
    font: 1.2em 'Homemade Apple', cursive;
    line-height: 60px;
    text-align: center;
    text-transform: none;
    word-spacing: 7px;
    text-shadow: 3px 3px 2px rgba(0,0,0,0.3);
}
          
.intro {
    background-color: #f8fdfc;
    padding: 5px 40px 35px;
    margin-top: 60px;
    border-bottom: 1px solid #88d4df;
    border-radius: 20px;
    border-bottom-left-radius: 0;

}

.stats {
    background-color: #f8fdfc;
    padding: 5px 40px 35px;
    margin: 10px 0 0;
    border-bottom: 1px solid #88d4df;
    border-radius: 20px;
    border-top-left-radius: 0;

}

.stats a {
    background-color: transparent;
    color: #f75745;
}
          
.stats ul {
    text-align: center;
}

.stats li {
    list-style-type: none;
    display: inline-block;
    padding-right: 20px;
}

.stats li strong {
    font-weight: 500;
    font-size: 28px;
}   
.divider {
    border-left: 1px solid #dff6f4;
    padding: 0;
    margin: 0;
}

.text {
    padding-top: 40px;
    margin-top: 40px;
}
          
#content h1 {
    font: 900 1.7em 'Poiret One', cursive;
    padding: 15px 0 5px;
    margin: 15px 0 15px;
    color: #f75745;
    text-indent: 5px;
}

#content h4 {
    font: small-caps 400 1.1em 'Kreon', serif;
    padding: 0;
    margin: 5px 0 0;
}

.symbol {
    font-size: 1.3em;
    color: #f75745;
    margin: 0 20px 0 0;
    padding: 0 5px;
    background-color: #fff;
    border-radius: 50px;
}

.paragraph {
    padding: 15px 0 55px;
    margin: 0;
}

.show_owned_where_you_are,
.show_owned_intro_list,
.show_joined_where_you_are {
    padding: 0;
    margin: 0 0 25px;
}

.show_joined_intro_list {
    padding: 0;
    margin: 0;
}

.show_owned_list_items,
.show_joined_list_items {
    list-style-type: circle;
}

.fanlistings img {
    margin: 15px 0 10px 150px;
    padding: 0;
    border: 25px solid #fff;
    border-radius: 25px;
    border-bottom-left-radius: 0;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
    filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
}

.fanlistings a:hover {
    background: transparent;
    border: 0;
}

.fanlistings img:hover {
    background: transparent;
    border: 25px solid #c0f41e;
    -webkit-filter: none;
    -moz-filter: none;
    -ms-filter: none;
    filter: none;
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0'/></filter></svg>#grayscale");
}

.joined img {
    border: 5px solid #fff;
    border-radius: 15px;
    border-bottom-left-radius: 0;
}

.joined a:hover {
    background: transparent;
    border: 0;
}

.joined img:hover {
    background: #c0f41e;
    border: 5px solid #c0f41e;
}

       
.closedlist,
.kimlist {
    list-style-type: none;
    padding-left: 0;
    margin: 1px 0 55px;
}

.wishlist {
    margin: 0 0 55px;
    padding: 0;
}

.wishlist img {
    float: left;
    border: 15px solid #fff;
    border-radius: 20px;
    border-bottom-left-radius: 0;
    margin: 0 20px 0 0;
    padding: 0;
}

.wishlist a[title]:hover:after {
    background-color: #fff;
    border-bottom: 1px solid #88d4df;
}

.wishlist h4 {
    font: small-caps 400 1.1em 'Kreon', serif;
    padding: 0;
    margin: 0;
}

.websites {
    padding-bottom: 15px;
    margin-bottom: 40px;
}

.websites img {
    float: left;
    border: 10px solid #fff;
    border-radius: 20px;
    border-bottom-left-radius: 0;
    padding: 0 20px 20px 0;
}
          
.todolist {
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
    margin-bottom: 55px;
}

.contactform {
    margin: 0 auto;
    width: 500px;
    top: 20px;
}

.contactform label {
    width: 100%;
    display: block;
    padding: 10px 0 10px 0;
}

.contactform label span {
    display: inline-block;
    float: left;
    width: 300px;
    text-align: left;
    padding: 5px 20px 5px 10px;
}

input, select, textarea {
    width: 400px;
    background-color: #f8fdfc;
    border: 0;
    border-bottom: 1px solid #88d4df;
    border-radius: 10px;
    border-top-left-radius: 0;
    padding: 10px;
    font: 100 1.1em 'Abel', sans-serif;
    color: #d14d3e;
}




/* footer */

#footer {
    font-size: 0.7em;
    margin: 90px 0 70px;
    padding: 10px 60px 0;
    border-top: 1px solid #f8fdfc;
    text-align: center;
}