Preview - HTML - CSS

/**************************************
****					Reset					***
***************************************/

h1,h2,h3,h4,h5,h6,pre,code {font-size:1em; outline:none; font-weight:normal}
ul,ol {list-style:none}
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,fieldset,input {margin:0; padding:0}
fieldset {border:0}
a img,:link img,:visited img {border:none}
:link,:visited {text-decoration:none; color:#407a8b}
.cf:before,.cf:after {content:"";display:table}
.cf:after {clear:both}
.cf {zoom:1}
button::-moz-focus-inner {outline:none}
.floatleft{float:left}
.floatright{float:right}
.alignleft{text-align:left}
.alignright{text-align:right}


/**************************************
****				Basic						***
***************************************/
body,html {
	background:#f3f3f3;
	font:12px/1.5em 'Ruda',sans-serif;
}

#wrapper {width:900px;margin:0 auto}

#header {margin:0 0 36px;overflow:auto}
#header h1 {float:left;margin:19px 0 0}
#header ul {float:right;margin:60px 0 0}
#header ul li {float:left}
#header ul li a {padding:0 15px;font:16px/2em 'Advent Pro',sans-serif;color:#000;font-weight:500;text-transform:uppercase}
#header ul li.alt a {color:#e72a6a}
.home #header {background:url(images/homepage-header-bg.jpg) no-repeat;height:455px}
.home #header h1 {margin:35px 0 0}
.home #header ul {margin:56px 0 0}
.home #header ul li {float:left;}
.home #header ul li a {padding:0 10px;font-size:1.2em}

#actions {background:url(images/row-line.png) repeat-x left bottom;overflow:auto;padding:0 0 50px}
#actions li {float:left;width:190px;padding:225px 55px 0}
#actions h2 {font:24px/1.5em 'Advent Pro';font-weight:600;text-align:center;color:#327ea0;margin:0 0 6px}
#actions p {font-size:11px}
#actions .signup {background:url(images/actions-signup.png) no-repeat 50% 37px}
#actions .receive {background:url(images/actions-receive.png) no-repeat 50% 37px}
#actions .enjoy {background:url(images/actions-enjoy.png) no-repeat 50% 37px}

#homeContainer {}
#homeContainer ul {margin:0 0 0 -15px}
#homeContainer li {font:15px/2em 'Ruda';background:url(images/pink-bullet.png) no-repeat 0 50%;padding:0 0 0 15px}
#homeContainer h1 {color:#498fae;font:28px/1.2em 'Advent Pro', sans-serif;font-weight:500;margin:0 0 0.5em}
#homeContainer .row1 {background:url(images/row1-bg.png) no-repeat left 60px;padding:30px 0 70px 300px}
#homeContainer .row2 {background:url(images/row2-bg.png) no-repeat right 0;padding:30px 300px 30px 50px;}
#homeContainer .row3 {background:url(images/row3-bg.png) no-repeat left 30px;padding:70px 0 75px 300px;}
#homeContainer .row4 {background:url(images/row-line.png) repeat-x left top;padding:42px 0 0}


#homeContainer .row4 .inner {background:url(images/row4-bg.png) no-repeat 50% 0;padding:46px 0 30px;margin:0 0 20px}
#homeContainer .row4 p {text-align:center;font:34px/40px 'Advent Pro';color:#498fae;width:520px;margin:0 auto}
#homeContainer .row4 .alignright {width:600px;text-align:right}

#homeContainer .row5 {overflow:auto;padding:0 0 80px}
#homeContainer .row5 ul {width:300px;margin:0 auto;}
#homeContainer .row5 ul li {float:left;background:none;padding:0;width:150px;}
#homeContainer .row5 ul a {background:url(images/button-buy-now.png);display:inline-block;width:134px;height:32px;text-align:center;font:20px/32px 'Advent Pro';font-weight:500;color:#191919;text-transform:uppercase;}
#homeContainer .row5 ul a.learn-more {background:url(images/button-learn-more.png)}



#footer {clear:both}

#footer a {color:#fff}
#footer .rowAbove {background:#de6d93;padding:52px 0 10px}
#footer .rowBelow{background:#205673}
#footer .rowBelow p {line-height:4em;font-size:11px;color:#749aaf}


#footer .inner {width:900px;margin:0 auto;overflow:auto}
#footer .inner li {float:left;font-size:11px}
#footer .col1 {width:148px;padding:0 30px 0 0}
#footer .col2 {width:388px;padding:0 50px 0 0}
#footer .col3 {width:284px}

#footer .col1 li {float:none}
#footer .col1 li ul {width:120px;margin:0 0 1em}
#footer .col1 li li {float:left;width:40px;height:40px;}

#footer .col2 li {margin:0 0 30px}
#footer .col2 p.date {color:#914761}

#footer .col3 p {font-size:16px;line-height:20px;margin:0 0 1em}
#footer .col3 input[type="text"] {background:url(images/footer-input.png) no-repeat;width:264px;height:36px;border:none;padding:0 10px;font-size:12px}
#footer .col3 input[type="button"],#footer .col3 input[type="submit"] {background:url(images/button-submit.png) no-repeat;border:none;color:#f3f3f3;width:134px;height:33px;margin:0 auto}
#footer .col3 .center {text-align:center;margin:0 0 1.5em}
#footer h2 {font:24px/28px 'Advent Pro';font-weight:500;color:#e5e5e5;text-shadow:1px 1px 1px rgba(0,0,0,0.5);margin:0 0 0.5em}




#survey {
	clear:both;
}

#survey p.big {font:28px/42px 'Advent Pro';font-weight:600;color:#327ea0;margin:0;}
#survey p.alt {color:#191919;margin:0 0 90px}

#survey ul li {}
#survey .black {color:#191919}
#survey .step1 {overflow:auto;margin:0 0 2em}
#survey .step1 li {float:left;width:300px;color:#e38eab;font-size:14px;}
#survey .step1 label {display:block;margin:0 0 12px;color:#000;font-weight:500;}
#survey .step1 .left {display:inline-block;width:115px;padding:7px 0 0}
#survey .step1 ul li li .left {padding:0}
#survey .step1 li .right {float:right;display:block;width:160px;}
#survey .step1 li li .right {width:170px}
#survey .step1 li li {float:none;width:auto;margin:0 0 1em}


#survey .step2 {clear:both}
#survey .step2 li {float:left;width:300px;height:125px}
#survey .step2 ul {margin:0 0 2em;overflow:auto}
#survey .step2 .left {}
#survey .step2 .middle {}
#survey .step2 .right {text-align:right}
#survey h2 {
	font:14px/2em 'Ruda';
	color:#e38eab;
	margin:0 0 0.5em
}
#survey p {
	color:#191919;
	font-size:15px;
}
#survey .q1 .left {background:url(images/survey-img-1.png) no-repeat left 35px;height:220px}
#survey .q1 .right {background:url(images/survey-img-2.png) no-repeat right 35px;height:220px}
#survey .q2 .left {background:url(images/survey-img-3.png) no-repeat left 35px;height:220px}
#survey .q2 .right {background:url(images/survey-img-4.png) no-repeat right 35px;height:220px}
#survey .q3 .left {background:url(images/survey-img-5.png) no-repeat left 50px;height:220px}
#survey .q3 .right {background:url(images/survey-img-6.png) no-repeat right 50px;height:220px}

#survey .ui-slider-horizontal {
	background:url(images/slider-bg.png) no-repeat;
	width:278px;
	padding:0 23px 0 0;
	height:31px;
}
#survey  .ui-slider-handle {
	background:url(images/slider-button.png) no-repeat;
	width:23px;
	height:23px;
	display:block;
	outline:none;
	position:relative;
}
#survey .end {text-align:center;clear:both;padding:2em 0 0}
#survey .end p {margin:0 0 1.5em;font-size:20px;color:#327ea0}
#survey .end input {background:url(images/button-buy-now.png) no-repeat;display:inline-block;width:134px;height:32px;border:none;color:#fff;font:20px/32px 'Advent Pro',sans-serif;text-transform:uppercase;font-weight:600}




/*

Uniform Theme: Uniform Default
Version: 1.6
By: Josh Pyles
License: MIT License
---
For use with the Uniform plugin:
http://pixelmatrixdesign.com/uniform/
---
Generated by Uniform Theme Generator:
http://pixelmatrixdesign.com/uniform/themer.html

*/

/* Global Declaration */

div.selector, 
div.selector span, 
div.checker span,
div.radio span, 
div.uploader, 
div.uploader span.action,
div.button,
div.button span {
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
}

.selector, 
.radio, 
.checker, 
.uploader,
.button, 
.selector *, 
.radio *, 
.checker *, 
.uploader *,
.button *{
  margin: 0;
  padding: 0;
}

/* SPRITES */

/* Select */

div.selector {
  background:url(images/select-right.png) no-repeat;
  line-height: 37px;
  height: 37px;
}

div.selector span {
  background:url9images/select-left.png) no-repeat;
  height: 37px;
  line-height: 37px;
}

div.selector select {
  /* change these to adjust positioning of select element */
  top: 10px;
  left: 0px;
}


/* Checkbox */

div.checker {
  width: 34px;
  height: 34px;
}

div.checker input {
  width: 34px;
  height: 34px;
}

div.checker span {
  background:url(images/checkbox.png) no-repeat;
  height: 34px;
  width: 34px;
}

div.checker span.checked {
  background:url(images/checkbox-checked.png) no-repeat;
}


div.checker.focus span.checked,
div.checker:hover span.checked {
  background:url(images/checkbox-checked.png) no-repeat;
}

/* PRESENTATION */

/* Select */
div.selector {
  width: 121px;
  font-size: 12px;
  cursor:pointer;
  height:37px
}

div.selector select {
  min-width: 121px;
  font-family: 'Ruda', sans-serif;
  font-size: 12px;
  border: solid 1px #fff;
}

div.selector span {
  padding: 0px 25px 0px 2px;
  cursor: pointer;
}

div.selector span {
  color: #666;
  width: 94px;
  text-shadow: 0 1px 0 #fff;
}

div.selector.disabled span {
  color: #bbb;
}

/* Checker */
div.checker {
  margin-right: 5px;
}

/*
CORE FUNCTIONALITY 

Not advised to edit stuff below this line
-----------------------------------------------------
*/

.selector, 
.checker, 
.button, 
.radio, 
.uploader {
  display: -moz-inline-box;
  display: inline-block;
  vertical-align: middle;
  zoom: 1;
  *display: inline;
}

.selector select:focus, .radio input:focus, .checker input:focus, .uploader input:focus {
  outline: 0;
}
/* Select */

div.selector {
  position: relative;
  padding-left: 10px;
  overflow: hidden;
}

div.selector span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

div.selector select {
  position: absolute;
  opacity: 0;
  filter: alpha(opacity:0);
  height: 25px;
  border: none;
  background: none;
}

/* Checker */

div.checker {
  position: relative;
}

div.checker span {
  display: -moz-inline-box;
  display: inline-block;
  text-align: center;
}

div.checker input {
  opacity: 0;
  filter: alpha(opacity:0);
  display: inline-block;
  background: none;
}