html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
}
table {
    border-spacing: 0;
    border-collapse: collapse;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote, q {
    quotes: none;
}
:focus {
    outline: 0;
}
@font-face {
    font-family: 'FFFTusjBold';
    src: url('../fonts/FFF_Tusj-webfont.eot');
    src: url('../fonts/FFF_Tusj-webfont.eot?#iefix') format('eot'), url('../fonts/FFF_Tusj-webfont.woff') format('woff'), url('../fonts/FFF_Tusj-webfont.ttf') format('truetype'), url('../fonts/FFF_Tusj-webfont.svg#webfontjSpbZQRv') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'UbuntuRegular';
    src: url('../fonts/Ubuntu-Regular-webfont.eot');
    src: url('../fonts/Ubuntu-Regular-webfont.eot?#iefix') format('eot'), url('../fonts/Ubuntu-Regular-webfont.woff') format('woff'), url('../fonts/Ubuntu-Regular-webfont.ttf') format('truetype'), url('../fonts/Ubuntu-Regular-webfont.svg#webfontHLBpjp3B') format('svg');
    font-weight: normal;
    font-style: normal;
}
body {
    font: normal 16px'UbuntuRegular', tahoma, verdana, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, sans-serif;
    text-transform: lowercase;
    background: #464646 url('../body-bg.png') repeat-x;
    color: #444;
}
div#wrapper {
    background: #a9a9a9;
    background: rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid #b86509;
    padding: 10px 0;
    min-height: 350px;
}
h1, h2, h3, h4, h5, h6{
	font-family: 'UbuntuRegular',verdana,sans-serif;
	font-weight: bold;
	}

h1.intro {
    font-size: 150%;
    color: #444;
    margin-top: 10px;
    letter-spacing:-1px;
}
div#header p {
    background: transparent url('../marmalade.png') no-repeat;
    margin-top: 30px;
    font: 73pt Georgia, serif;
    text-indent: -9999px;
    color: #ababab;
}
div#header, div#footer, div#content {
    width: 1050px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
div#header {
    height: 180px;
    position: relative;
}
div#footer {
    clear: both;
    color: #ababab;
    text-align: right;
    font-size: 87.5%;
    padding: 40px 0;
}
div#footer a {
    color: #ababab;
}
div#header ul {
    list-style-type: none;
    position: absolute;
    right: 0;
    bottom: 0;
}
div#header li {
    float: left;
}
span#tag {
    bottom: 30px;
    font-style: italic;
    left: 205px;
    position: absolute;
    color: #733e03;
}
body#home li#m_home a, body#work li#m_work a, body#about li#m_about a, body#contact li#m_contact a {
    color: #844703;
    background: #a9a9a9;
    background: rgba(255, 255, 255, 0.5);
}
div#header li a {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    -webkit-border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 8px;
    -moz-border-radius-topleft: 8px;
    -moz-border-radius-topright: 8px;
    font-size: 150%;
    display: block;
    text-decoration: none;
    margin: 0 5px;
    color: #eecda7;
    float: left;
    text-transform: lowercase;
    background-color: #ca6f0a;
    padding: 4px 20px 3px 20px;
}
div#header li a:hover {
    color: #043b53;
}
span.dash {
    color: #ca6f0a;
}
div.work {
    overflow: auto;
    margin-bottom: 1em;
}
div.work img {
    float: left;
}
div#content h2 {
    border-bottom: 1px solid #844703;
    font-size: 160%;
    margin: 15px 0 10px;
    padding: 0;
    color: #844703;
}
div#content h3 {
    font-size: 150%;
    line-height: .8em;
    font-weight: normal;
    color: #844703;
}
div#content h4 {
    font-size: 120%;
    font-weight: normal;
    line-height: 1.4em;
    color: #363636;
    text-transform: lowercase;
}
h5 {
    font-size: 120%;
    margin-bottom: .5em;
}
a {
    text-decoration: none;
    color: #844703;
}
a:hover {
    text-decoration: underline;
    color: #363636;
}
h3 a:hover {
    text-decoration: none;
}
p {
    margin: 8px 0;
    line-height: 1.2em;
}
div#slider li {
    width: 1000px;
}
dl.services dt {
    font-weight: bold;
    font-size : 120%;
}
dl.services:first-child {
    padding-top: 3px;
}
dl.services dd {
    margin-left: 15px;
}

dl.services dd p{
    margin: 0 0 8px 0;
}

.plans{
    border: 1px solid #444;
    border-radius: 20px;
    width: 252px;
    float : left;
    margin : 10px 5px 0 0;
}

.plans ol{
    margin-top: 10px;
    list-style-type: circle;
    list-style-position: inside;
}

.plans ol li{
    padding-left: 10px;
    line-height: 1.5em;
}

.plans h1{
    background-color: #888;
    margin: 0;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 10px  5px;
    text-align: center;
}

.plans-platinum h1{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f5f6f6+0,dbdce2+21,b8bac6+49,dddfe3+80,f5f6f6+100;Grey+Pipe */
background: rgb(245,246,246); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(245,246,246,1) 0%, rgba(219,220,226,1) 21%, rgba(184,186,198,1) 49%, rgba(221,223,227,1) 80%, rgba(245,246,246,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=0 ); /* IE6-9 */
;
}

.plans-gold h1{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fceabb+0,fccd4d+50,f8b500+51,fbdf93+100;Orange+3D+%235 */
background: rgb(252,234,187); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(252,234,187,1) 0%, rgba(252,205,77,1) 50%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(252,234,187,1) 0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(252,234,187,1) 0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=0 ); /* IE6-9 */

}

.plans-silver h1{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f6f8f9+0,e5ebee+50,d7dee3+51,f5f7f9+100;White+Gloss */
background: rgb(246,248,249); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(246,248,249,1) 0%, rgba(229,235,238,1) 50%, rgba(215,222,227,1) 51%, rgba(245,247,249,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 ); /* IE6-9 */
}

.plans-bronze h1{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f3e2c7+0,c19e67+50,b68d4c+51,e9d4b3+100;L+Brown+3D */
background: rgb(243,226,199); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(243,226,199,1) 0%, rgba(193,158,103,1) 50%, rgba(182,141,76,1) 51%, rgba(233,212,179,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3e2c7', endColorstr='#e9d4b3',GradientType=0 ); /* IE6-9 */
}

body#maint div.plans h2{
    padding: 10px;
    margin: 10px 0 0 0;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background: #3a3a3a;
    color: #ca6f0a;
    font-size: 300%;
    font-weight: normal;
}
body#maint div.plans h2 span{
    font-size : 50%;
    color : #a9a9a9;
    font-weight: normal;
}

input,textarea,button{
	font-family: 'UbuntuRegular',sans-serif;
	padding: 4px 10px;
	border-radius: 15px;
	border : 1px solid #666;
}

div.clear{
	clear:both;
}

div#footer #social{
	text-align: left;
	padding-top : 5px;
	float:left;
}

.feedback{
	border : 1px solid #666;
	padding : 20px;
	margin : 10px 0;
	border-radius: 5px;
}

.warning{
	background-color : #844703;
	font-weight: bold;
	color : #aaa;
}

.feedback h3{
	color : #fff !important;
	padding-bottom : 10px !important;
}

.feedback ul{
	list-style-type : none;
}

.feedback li{
	padding-left : 20px;
}

img.screenshot{
    width : 100%;
    height: 100%;
    max-width: 480px;
}

img.shadow{
    -moz-box-shadow: 6px 6px 6px #555;
    -webkit-box-shadow: 6px 6px 6px #555;
    box-shadow: 6px 6px 6px #555;
    margin: 0 20px 20px 0;
}



@media screen and (min-width: 800px) and (max-width:960px){
    div#header,div#footer,div#content{
            width : 800px;
            margin : 0 auto;
            position : relative;
            overflow : hidden;
    }
    div#header{
        height : 150px;
    }

    div#header p{
            background : transparent url('../marmalade800.png') no-repeat;
    }               
}
@media screen and (min-width: 400px) and (max-width:830px){
	div#header,div#footer,div#content{
            width : 650px;
            margin : 0 auto;
            position : relative;
            overflow : hidden;
    }
	div#header p{
			background : transparent url('../marmalade391.png') 50% 0 no-repeat;
	}
	div#header{
		height : 180px
	}
	div#header li a {
		margin: 0 0 0 0.2em;padding:0.3em 0.4em;
		font-size : 125%;
	}
}

@media screen and (max-width:530px){
	div#header,div#footer,div#content{
			width : 420px;
			margin : 0 auto;
			position : relative;
			overflow : hidden;
            padding : 0 20px;
	}
    div.work{
        overflow: hidden;
    }
	div#header{
		height : 172px
	}
	div#header p{
			background : transparent url('../marmalade350.png') no-repeat;
	}
	div#header li a {
		margin: 0 0 0 0.2em;
        padding:0.3em 0.4em;
		font-size : 100%;

	}
    div#wrapper{
        background: #aaa;
        width : 390px;
    }
}