/* ============ Reset ============ */

html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td {
    margin:0;
    padding:0;
}

img,body,html {
    border:0;
}

address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
}

ol,ul{
    list-style:none;
}

a {
    cursor:pointer;
    color:#CF8300;
    text-decoration:none;
}



/* ============ Global ============ */

body {
    color:#333333;
    font-family:Verdana,Arial,Helvetica,sans-serif;
    font-size:13px;
    background:url(images/body-bg.jpg) repeat-x;
}

hr {
    visibility:hidden;
    clear:both;
}

.error {
    color:#ff0000;
    font-size:11px;
}

.button {
    font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
    padding:5px;
    color:#CF8300;
    font-size:14px;
}



/* ============ Language ============ */
#language {
    position:absolute;
    top:5px;
    left:100%;
    margin-left:-170px;
}

    #language li {
        float:left;
        color:#CF8300;
        margin-right:5px;
    }
    


/* ============ Header ============ */

div#header {
    position:relative;
    width:300px;
    left:50%;
    margin-left:-510px;
    margin-top:20px;
    margin-bottom:5px;
}

    #header h1 {
        margin-left:60px;
        width:186px;
        height:46px;
        background:url(images/small-logo.png) center 3px no-repeat;
    }
    
    #header h1 span {
        visibility:hidden;
    }



/* ============ Main Area ============ */

div#content {
    position:relative;
    width:960px;
    left:50%;
    margin-left:-480px;
}



/* ============ Introduction ============ */

div#intro {
    position:relative;
    background:url(images/bg.png);
    width:930px;
    height:299px;
    padding:20px;
    padding-left:5px;
}

    #donation {
        width:100%;
        margin-top:120px;
        text-align:center;
        color:#8F5700;
    }

    #badge {
        display:block;
        top:0;
        left:100%;
        margin-left:-50px;
        margin-top:-25px;
        position:absolute;
        background:url(images/badge.png);
        width:78px;
        height:78px;
    }
    
        #badge span {
            visibility:hidden;
        }
    
    #badgeinfo {
        display:none;
        font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
        font-weight:bold;
        font-size:12px;
        top:0;
        left:100%;
        margin-left:-430px;
        margin-top:-70px;
        position:absolute;
        width:386px;
        height:84px;
        background:url(images/badgebg.png);
        z-index:10;
        color:white;
    }
    
        #badgeinfo span {
            display:block;
            margin:20px;
            margin-top:10px;
        }

    #introscreens {
        overflow:hidden;
        width:480px;
        height:280px;
        margin-left:30px;
    }

        #carousel li {
            display:block;
            width:480px;
            height:280px;
        }
        
        #carousel p {
            font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
            color:white;
            font-size:16px;
            font-weight:bold;
            margin-left:10px;
        }
    
    #intro .prev span,
    #intro .next span {
        visibility:hidden;
    }
    
    #intro .prev,
    #intro .next {
        display:block;
        width:24px;
        height:24px;
        position:absolute;
        top:140px;
    }    
    
    #intro .prev {
        background:url(images/left_arrow.png);
        left:10px;
    }
    
    #intro .next {
        background:url(images/right_arrow.png);
        left:504px;
    }

    #introtext {
        position:absolute;
        top:25px;
        left:540px;
        width:390px;
        text-align:center;
    }
    
        #introtext h1 {
            font-size:22px;
            color:#8F5700;
        }
        
        #introtext h2 {
            margin-top:15px;
            color:#FFF6DF;
            font-size:14px;
        }
        
        #introtext h3 {
            margin-top:15px;
            color:#FFE08F;
            font-size:18px;
        }
        
        #introtext a {
            display:block;
            width:300px;
            padding:13px;
            padding-left:70px;
            font-size:16px;
            font-weight:bold;
            margin-top:40px;
            color:#6F4607;
            background:url('images/download.png') 15px 5px no-repeat;
            text-decoration:underline;
        }
        
            #introtext a span {
                text-decoration:none;
                font-size:10px;
                display:block;
            }



/* ============ Features ============ */

ul#features {
    margin-top:20px;
    color:#777777;
}

    #features li {
        float:left;
        width:138px;
        height:50px;
        padding-left:10px;
        padding-right:10px;
        border-right:1px dashed #999;
        text-align:center;
    }
    
    #features li.last {
        border:0;
        z-index:5;
    }


/* ============ Requirements, Licence and Contact============ */
ul#information {
    margin-top:20px;
}

    ul#information h1 {
        font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
    }

    ul#information p {
        margin-top:20px;
        margin-bottom:20px;
    }

    ul#information > li {
        float:left;
        width:280px;
        margin:20px;
    }

    #information h1 {
        font-size:18px;
    }
    
    ul#requirements {
        list-style:disc;
    }
    
        ul#requirements li {
            margin-left:25px;
        }
    
    ul#examples {
        margin-left:18px;
    }
    
        ul#examples li {
            float:left;
        }
    
        ul#examples li,
        ul#examples a {
            display:block;
            width:48px;
            height:48px;
        }
        
            ul#examples span {
                visibility:hidden;
            }
            
            #example-deviantart {
                background:url(images/deviantart.png) no-repeat;
            }
            
            #example-delicious {
                background:url(images/delicious.png) no-repeat;
            }
            
            #example-flickr {
                background:url(images/flickr.png) no-repeat;
            }
            
            #example-twitter {
                background:url(images/twitter.png) no-repeat;
            }
            
            #example-youtube {
                background:url(images/youtube.png) no-repeat;
            }
    
    #contact label {
        display:block;
        width:100px;
        margin-top:20px;
    }
    
    #contact input, 
    #contact textarea {
        width:250px;
    }
    
    #contact textarea {
        height:150px;
    }
    
    #loading {
        display:none;
        width:100%;
        height:200px;
        background:url(images/ajax-loader.gif) center center no-repeat;
    }
    
    #success {
        display:none;
        margin-top:20px;
    }
    

/* ============ Footer ============ */

#footer {
    background:#222222;
    border-top:3px solid #DF9829;
    height:100px;
}

#footer,
#footer a {
    color:white;
    font-size:11px;
}

#footer a {
    text-decoration:underline;
}

#footer p {
    position:relative;
    width:600px;
    left:50%;
    margin-left:-470px;
    margin-top:20px;
}


/* ====== Exception Error Page ======= */

#error {
    position:relative;
    width:700px;
    left:50%;
    margin-left:-450px;
    margin-top:50px;
}

    #error h1,
    #error h2,
    #error h3 {
        margin-top:15px;
    }