body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #fff;
}
#browsers {
    float: left;
    width: 120px;
    position: relative;
    left: 170px;
}
#browsers span {
    font-size: 9px;
}
#browsers img {
    max-width: 30px;
}
#header {
    text-align: left;
    background: #000000 url(../img/header.jpg) no-repeat center top;
    font-size: 40px;
    font-weight: bold;
    font-family: 'Miltonian Tattoo', arial, serif;
    padding: 20px 0 20px 400px;
    margin: 0;
    letter-spacing: 6px;
}
#header p {
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: white;
}
#header h1 {
    margin: 0;
}
#header .f { 
    color: #FD3500; 
    display: inline-block;
    -webkit-transform: rotate(-15deg);
    -moz-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    -o-transform: rotate(-15deg);
    transform: rotate(-15deg);
}
#header .l { 
    color: #F59A24; 
    display: inline-block;
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    transform: rotate(10deg);
}
#header .e { 
    color: #A0C2EB; 
    display: inline-block;
    -webkit-transform: rotate(-15deg);
    -moz-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    -o-transform: rotate(-15deg);
    transform: rotate(-15deg);
}
#header .x { 
    color:  #6F8C53; 
    display: inline-block;
    -webkit-transform: rotate(12deg);
    -moz-transform: rotate(12deg);
    -ms-transform: rotate(12deg);
    -o-transform: rotate(12deg);
    transform: rotate(12deg);
}
#header .i { 
    color: pink; 
    display: inline-block;
}
#header .color { 
    font-family: 'Waiting for the Sunrise', arial, serif;
    margin-left: 50px;
    color: white; 
    letter-spacing: 2px;
    font-size: 24px;
}
#header .picker-header { 
    font-family: 'Waiting for the Sunrise', arial, serif;
    margin-left: 10px;
    color: lightgray; 
    font-size: 18px;
}

#main {
    width: 1200px;
    margin: 50px auto 0 auto;
}

#example {
    width: 500px;
    float: left;
    font-size: 12px;
    opacity: 0.8;
    margin-left: -30px;
}
#example pre {
    margin: 0;
    margin-left: -30px;
}
#example span {
    font-size: 22px;
    font-weight: bold;
}
#example .start-mark {
    display: inline-block;
    margin-left: 20px;
}
#example .end-mark {
    display: inline-block;
    margin-top: -10px;
    margin-left: 400px;
}

#theme-selector {
    float: left;
    clear: both;
    position: relative;
    left: 515px;
    top: -100px;
}
#theme-selector a {
    text-decoration: none;
    background-color: white;
    color: black;
    border-radius: 10px;
    font-size: 12px;
    margin-right: 20px;
    padding: 5px;
}
#theme-selector a:hover {
    background-color: black;
    color: white;
}

#color-values {
    list-style-type: none;
    float: left;
    clear: both;

}
#color-values label {
    display: inline-block;
    width: 50px;
    font-size: 14px;
}
#color-values span {
    display: inline-block;
    border: 1px solid gray;
    padding: 4px;
    font-size: 12px;
    width: 100px;
    margin-bottom: 4px;
    margin-left: -5px;
}
#color-values span:hover {
    background-color: white;
}
.clear {
    height: 1px;
    clear: both;
}


#notes {
    margin: 0 auto;
    width: 800px;
	color:white;
}
.note {
    width: 250px;
    color: white;
    padding: 12px;
    font-size: 14px;
    line-height: 20px;
    margin: auto;
}
.note h3 {
    letter-spacing: 3px;
    font-size: 20px;
    margin: 8px;
}
.note p {
    margin-top: 4px;
}
.note a {
    color: white;
}


#buy-button {
    margin-left: -240px;
    margin-top: 50px;
    letter-spacing: 0px;
    width: 100px;
    text-align: center;
    float: left;
    -moz-box-shadow:inset 0px 1px 0px 0px #caefab;
    -webkit-box-shadow:inset 0px 1px 0px 0px #caefab;
    -ms-box-shadow:inset 0px 1px 0px 0px #caefab;
    box-shadow:inset 0px 1px 0px 0px #caefab;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #77d42a), color-stop(1, #5cb811) );
    background:-moz-linear-gradient( center top, #77d42a 5%, #5cb811 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77d42a', endColorstr='#5cb811');
    background-color:#77d42a;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px 6px 6px 6px;
    border:1px solid #268a16;
    display:inline-block;
    color:#306108;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:1px 1px 0px #aade7c;
}
#buy-button:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5cb811), color-stop(1, #77d42a) );
    background:-moz-linear-gradient( center top, #5cb811 5%, #77d42a 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5cb811', endColorstr='#77d42a');
    background-color:#5cb811;
}
#buy-button:active {
    position:relative;
    top:1px;
}

#disqus_thread {
    width: 600px;
    margin: 0 auto;
}
#disqus_thread h3 {
    color: white;
    font-size: 14px;
}
#disqus_thread a {
    color: white;
    font-size: 10px;
}
.dsq-like-activity {
    color: white;
}
.dsq-brlink {
    color: white;
}
.dsq-comment-text {
    display: block;
    line-height: 20px;
    font-size: 12px;
    color: white;
}
.dsq-commenter-name {
    color: pink;
}