* {
    vertical-align: baseline;
    font-style: inherit;
    font-size: 100%;
    border: none;
    padding: 0;
    margin: 0;
    font-family: inherit;
}

li, dd, blockquote {
    margin-left: 40px;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

html, body {
    height: 100%;
    width: 100%;
    font-family: Helvetica, Arial, Sans-serif;
}

body {
    font-size: 100%;
    background: rgb(240, 240, 240);
    position: relative;
    height: 100%;
    min-height: 100%;
}

#wrapper {
    width: 40em;
    min-height: 100%;
    margin: 0 auto;
    padding: 0em 5em 5em 5em;
    position: relative;
    -webkit-box-shadow: 0 10px 40px rgba(51,51,51,128);
    -moz-box-shadow: 0 10px 40px rgba(51,51,51,128);
    box-shadow: 0 10px 40px rgba(51,51,51,128);
    z-index: 10;
}

#navigation {
    padding-top: 32em;
    list-style: none;
    overflow: hidden;
    height: 5em;
    }

    #navigation li {
        float: left;
        display: block;
        margin: 0;
        padding: 0;
    }

    #navigation li a {
        color: rgb(51,51,51);
        text-decoration: none;
        font-size: 1.4em;
        -moz-text-shadow: 1px 1px 2px #fff;
        text-shadow: 1px 1px 2px #fff;
        font-family: 'Droid Serif', Helvetica, Arial, Sans-serif;
        padding: 0.5em;
        border: 2px solid transparent;        
        margin-right: 0.5em;
    }

    #navigation li a.selected {
        border: 2px  solid #aaa;
        -moz-border-radius: 1em;
        border-radius: 1em;
    }

    #navigation li a:hover {
        border: 2px  solid #ddd;
        -moz-border-radius: 1em;
        border-radius: 1em;
    }

#head {
    position: absolute;
    top: 0;
    left: 5em;
    width: 35em;
    padding: 3em 3em 3em 9em;
    background: url(cards.png) no-repeat left 1em;
}

#head h1 {
    font-size: 3em;
    color: rgb(51,51,71);
    -moz-text-shadow: 1px 1px 2px #fff;
    text-shadow: 1px 1px 2px #fff;
    font-family: 'Droid Serif', Helvetica, Arial, Sans-serif;
    }

    #head h1 .small {
        font-size: 0.5em;
        color: rgb(151,151,171);
        -moz-text-shadow: 2px 2px 2px #fff;
        text-shadow: 1px 1px 2px #fff;
        font-family: 'Droid Serif', Helvetica, Arial, Sans-serif;
    }

    #head h2 {
        font-size: 1em;
        color: rgb(51,51,71);
        padding: 0px 0px 0px 0.6em;
    }

    .demo {
        position: absolute;
        top: 3.5em;
        right: 5em;
        font-size: 20px;
        font-weight: bold;
    }

#teaser {
    position: absolute;
    width: 100%;
    height: 18.5em;
    top: 11em;
    left: 0;
    z-index: 5;
    background-color: rgb(77,128,179);
    background: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(51,102,153)),
        color-stop(1, rgb(98,149,200))
    );
    background: -moz-linear-gradient(
        center bottom,
        rgb(51,102,153) 0%,
        rgb(98,149,200) 100%
    );
    border-top: 2px solid rgb(151,151,151);
    border-bottom: 2px solid white;
}
    #teaser p {
        color: white;
        font-size: 1.4em;
        width: 28em;
        line-height: 125%;
        padding: 1em 0em;
        position: relative;
        margin: 0 auto;
        -moz-text-shadow: 2px 2px 2px rgb(77,128,179);
        text-shadow: 2px 2px 2px rgb(77,128,179);
        font-family: 'Droid Serif', Helvetica, Arial, Sans-serif;
    }


#faq {
    list-style: none;
    padding-left: 1em;    
    }

    #faq li {
        margin: 0;
    }

    #faq h2 {
        margin-bottom: 1em;
        cursor: pointer;
        font-weight: normal;
        color: #0066cc;
    }

    #faq h2.selected {
        font-weight: bold;
    }

    #faq p {
        line-height: 150%;
        margin-bottom: 2em;
        color: rgb(70,70,70);
    }
    
#footer {
	text-align: center;
	color: rgb(120,120,120);
	text-shadow: 1px 1px 1px 2px white;
	font-size: 0.7em;
}    
    

#wrapper a {
    font-weight: normal;
    color: #0066cc;
    text-decoration: none;
    border-bottom: 1px dotted #0066cc;
}    

#wrapper a:hover {
    border-bottom: 1px solid #0066cc;
}    

#screenshots {
    list-style: none;
    padding: 0;
    margin: 0;
    }

    #screenshots li {
        margin: 0 0 1em 0;
        padding: 0;
        position: relative;
        min-height: 400px;
    }

    #screenshots span {
        position: absolute;
        display: block;
        left: 0px;
        bottom: 0px;
        padding: 1em;
        width: auto;
        background: rgba(0,0,0,200);
        color: white;
    }

#info {
    list-style: none;
    padding: 0;
    margin: 0;
    }

    #info li {
        margin: 0 0 1em 0;
        padding: 0;
    }

    #wrapper h2.shadow {
        font-size: 1.5em;
        margin-bottom: 1em;
        color: rgb(51,51,51);
        -moz-text-shadow: 1px 1px 1px #FFF;
        text-shadow: 1px 1px 1px #FFF;
        font-family: 'Droid Serif', Helvetica, Arial, Sans-serif;
    }

    #info p {
        margin-bottom: 3em;
        line-height: 150%;
    }


/** ---- BUTTONS ----  **/
button {
	-moz-border-radius: 20px;
	border-radius: 20px;
	border: 2px solid rgb(150,150,150);
	background: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0, rgb(255,255,255)),
	    color-stop(1, rgb(193,193,193))
	);
    background: -moz-linear-gradient(
	    center bottom,
	    rgb(255,255,255) 0%,
	    rgb(193,193,193) 100%
	);
	padding: 4px 3px 4px 3px;
	cursor: pointer;
	-webkit-box-shadow: 1px 1px 1px #FFF;
	-moz-box-shadow: 1px 1px 1px #FFF;
	box-shadow: 1px 1px 1px #FFF;
}


button span {
	-moz-border-radius: 12px;
	border-radius: 12px;
	background: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0.5, rgba(255,255,255,0)),
	    color-stop(1, rgba(255,255,255,255))
	);
    background: -moz-linear-gradient(
	    center bottom,
	    rgba(255,255,255,0) 50%,
	    rgba(255,255,255,255) 100%
	);
	padding: 2px 10px;
	text-shadow: 1px 1px 1px #FFF;
	font-weight: bold;
	color: rgba(51,51,51,126);
}

button:hover {
	background: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0, rgb(235,255,255)),
	    color-stop(1, rgb(133,153,153))
	);
    background: -moz-linear-gradient(
	    center bottom,
	    rgb(235,255,255) 0%,
	    rgb(133,153,153) 100%
	);
}

button:active {
	padding: 5px 2px 3px 4px;
	background: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0, rgb(215,235,235)),
	    color-stop(1, rgb(113,133,133))
	);
    background: -moz-linera-gradient(
	    center bottom,
	    rgb(215,235,235) 0%,
	    rgb(113,133,133) 100%
	);
}

button:active span {
	background: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0.5, rgba(235,235,235,0)),
	    color-stop(1, rgba(235,235,235,255))
	);
    background: -moz-linear-gradient(
	    center bottom,
	    rgba(235,235,235,0) 50%,
	    rgba(235,235,235,255) 100%
	);
}