/* spncr Styles */

/* Global styles */

* {
	padding: 0;
	margin: 0;
	outline: none;
	border: none;
}

body {
	background: #FFF;
	font-family: Helvetica, sans-serif;
	color: #444;
}

#top {
	background: url(../images/gloss-top-orange.png) center;
	width: 100%;
	overflow: auto;
}

#nav {
	float: right;
	width: auto;
}

/* Primary global navigation */

#nav-primary {
	list-style: none;
	height: 1em;
}

#nav-primary li {
	float: left;
	height: 60px;
	line-height: 60px;
	text-align: center;
	margin-left: 10px;
}

#nav-primary li a {
	display: block;
	padding: 0 10px;
	color: #FFF;
	font-size: 18px;
	font-weight: bold;
	text-shadow: #111 0px 1px 0px;
}

#nav-primary li a:hover {
	background: url(../images/trans-menuback.png);
	color: #FFF;
	border-bottom: 6px solid #FFF;
	height: 54px;
	text-shadow: #333 0px 1px 0px;
}


/* It's submenu time! */

#nav-primary li ul {
	display: none;
	width: 170px; /*helps display in Opera*/
	list-style: none;
	border-top: 1px solid #FFF;
	background: url(../images/trans-submenu-back.png);
	z-index: 20;
}

#nav-primary li ul li {
	text-align: left;
	margin: 0;
	height: auto;
	line-height: normal;
}

#nav-primary li ul li a {
	padding: 10px;
	color: #FFF;
	font-size: 15px;
	font-weight: bold;
}

#nav-primary li ul li a:hover {
	color: #FFF;
	border: none;
	height: auto;
	background: url(../images/trans-menuback.png);
}

#nav-primary li:hover ul {
	display: block;
	position: absolute;
	margin: 0;
	padding: 0;
}

#nav-primary li:hover li {
	float: none;
}

/* Structure */

.container, .container-main {
	margin: 0 auto;
	width: 950px;
	clear: both;
}

#welcome {
	margin: 40px 0;
}

#by-num {
	padding-bottom: 20px;
	margin-bottom: 40px;
	border-bottom: 1px dotted #CCC;
	overflow: auto;
	height: 120px;
}

#count-web, #count-video, #count-photo, #count-posts {
	margin-right: 8px;
	float: left;
	text-align: center;
	position: relative;
	width: 231px;
}

#count-video {
	margin-left: 239px;
}

#count-photo {
	margin-left: 478px;
}

#count-posts {
	margin-left: 717px;
}

a .count-module {
	color: #333;
}

.count-module h3 {
	font-size: 28px;
}

.count-module .num {
	font-size: 48px;
	font-weight: bold;
	color: #F60;
}

.count-init {
	background: url(../images/dadada-gradient.jpg) repeat-x;
	width: 231px;
	padding: 12px 0;
	z-index: 10;
	position: absolute;
	left: 0;
	top: 0;
}

.count-hov {
	background: url(../images/f60-gradient.jpg) repeat-x;
	width: 231px;
	padding: 12px 0;
	position: absolute;
	left: 0;
	top: 0;
}

.count-hov span.num {
	color: #FFF;
	text-shadow: #333 0px 1px 0px;
}

#primary {
	width: 650px;
	float: left;
}

#secondary {
	width: 270px;
	float: left;
	margin-left: 30px;
	font-size: 14px;
}

#secondary ul li {
	margin: 0;
	padding: 6px 0;
}

#secondary ul.sidelist {
	border-bottom: 1px dotted #CCC;
	margin-bottom: 20px;
}

#secondary ul.sidelist li {
	border-top: 1px dotted #CCC;
	list-style: none;
}

/* Modules */

/* For the home page */
.module {
	margin-bottom: 40px;
}

.module ul {
	list-style: none;
	font-size: 12px;
}

/* Everything feed */
.feed-item {
	border-top: 1px dotted #CCC;
	margin-top: 30px;
	padding-top: 20px;
}

/* Videos and browser grabs */
.media-module {
	padding: 20px 0;
}

/* Video and web preview pages */
.preview-module {
	width: 280px;
	height: 190px;
	margin: 0 22px 22px 0;
	outline: 1px solid #CCC;
	border: 10px solid #FFF;
	float: left;
}

/* Title text links floating over preview mods */
.preview-module a.pmd {
	position: relative;
	top: 147px;
	left: 0;
	background: #FFF;
	color: #F60;
	padding: 8px 8px 6px;
	font-size: 22px;
	font-weight: bold;
}

.preview-module a:hover.pmd {
	background: #F60;
	color: #FFF;
}

/* Home "By the numbers" section */
#bar-web, #bar-photo, #bar-video, #bar-notes {
	padding: 6px 0;
	border-top: 1px dotted #CCC;
}

#bar-notes {
	border-bottom: 1px dotted #CCC;
}

.numbers {
	float: right;
	display: block;
	width: auto;
	text-align: right;
	font-weight: bold;
}

#web, #video, #photo, #story {
	overflow: auto;
	border-top: 1px solid #CCC;
	padding: 6px 0;
}

#story {
	border-bottom: 1px solid #CCC;
	border-top: none;
}

#photo img, #video img {
	clear: both;
}

#photo a, #video a {
	display: block;
	height: 30px;
	width: 30px;
}

#photo-holder, #video-holder {
	clear: both;
	overflow: auto;
	width: 270px;
}

#video-holder a {
	padding: 6px 0 0 40px;
}

#photo a:hover, a#previous:hover, a#next:hover {
	background: #FFF;
	opacity: 0.5;
}

#photo img {
	float: left;
}

p#welcome-message {
	font-size: 50px;
	font-weight: bold;
	letter-spacing: -2px;
}

h1 {
	float: left;
}

h2 {
	font-size: 48px;
	font-weight: bold;
	letter-spacing: -2px;
	margin: 0;
	padding: 0;
}

h3 {
	font-size: 36px;
	font-weight: bold;
	letter-spacing: -1px;
	margin: 0;
	padding: 0 0 6px;
}

#secondary h3 {
	font-size: 26px;
	padding: 0;
	margin-bottom: 10px;
	letter-spacing: -1px;
}

a {
	color: #F60;
	text-decoration: none;
}

#light-table a {
	display: inline-block;
	background: #FFF;
}

#light-table a:hover {
	opacity: 0.5;
}

p, label {
	font-size: 14px;
	font-family: Helvetica, sans-serif;
	margin: 0;
}

#primary p {
	padding-top: 20px;
	line-height: 22px;
	margin-bottom: 10px;
	font-size: 14px;
}

#logo {
	background: url(../images/spncr.png) no-repeat;
	height: 24px;
	width: 70px;
	margin: 18px 0;
}

#logo strong {
	display: none;
}

.toggle-web, .toggle-photo, .toggle-video, .toggle-story {
	cursor: pointer;
}


/* Input forms */
form {
	padding: 20px 0;
	clear: both;
}

input, textarea {
	padding :1px;
	font-size: 14px;
	font-family: Helvetica, sans-serif;
	background: #FFF;
	color: #444;
	border: none;
	border-bottom: 1px solid #CCC;
	outline: none;
}
	
textarea { 
	width: 99%;
	height: 20px;
	display: block;
}
	
input:focus, textarea:focus {
	background: #F3F3F3;
}
	
#submitinput {
	padding: 5px;
	font-size: 20px;
	font-weight: bold;
	margin: 30px 0 0;
	color: #FFF;
	text-shadow: #111 0px 1px 0px;
	background: url(../images/gloss-top-orange.png) repeat-x center;
	border: 1px solid #F30;
	cursor: pointer;
}
	
#submitinput:hover {
	background: url(../images/gloss-top-orange.png) repeat-x bottom;
}


/* Design input forms */
form#step-1 input, form#step-1 textarea {
	padding: 8px;
	border: 1px solid #DADADA;
	height: auto;
	width: 934px;
	margin-top: 8px;
}

form#step-1 input:focus, form#step-1 textarea:focus {
	background: #F3F3F3;
}

form#step-1 textarea {
	display: block;
}

form#step-1 input#nameinput, form#step-1 input#emailinput, form#step-1 input#phone-input, form#step-1 input#existing-url-input {
	width: 600px;
	display: block;
}

form#step-1 input#designtype_0, form#step-1 input#designtype_1 {
	width: auto;
}

#step-2-box textarea {
	margin-bottom: 21px;
}

form#step-1 #step1-submit, form#step-1 #finish-submit {
	width: auto;
	padding: 5px;
	font-size: 20px;
	font-weight: bold;
	margin-top: 10px;
	color: #FFF;
	text-shadow: #111 0px 1px 0px;
	background: url(../images/gloss-top-orange.png) repeat-x center;
	border: 1px solid #F30;
	cursor: pointer;
}

.steps .breathe {
	padding: 30px 0 10px;
}

form#step-1 #step1-submit:hover, form#step-1 #finish-submit:hover {
	background: url(../images/gloss-top-orange.png) repeat-x bottom;
}
	
p.st-main {
	font-size: 22px;
	font-weight: bold; 
	padding-bottom: 10px;
}

.steps p, .steps label { 
	padding: 14px 0 8px;
}

.steps .radio-list {
	margin-bottom: 20px;
}

.steps .radio-list p {
	padding-top: 0;
}

.steps .lbl-full {
	display: block;
	padding: 0;
}


/* Twitter feed */
ul#twitter_update_list {
	margin: 10px 0;
	font-size: 14px;
	border-top: 1px dotted #CCC;
}

#twitter_update_list li,
#native-update-list li {
	clear: both;
	border-bottom: 1px dotted #CCC;
	overflow: auto;
}

#twitter_update_list li span {
	float: left;
	width: 270px;
	padding-top: 4px;
}

#twitter_update_list li a,
#native-update-list li a {
	float: left;
	margin-top: 4px;
	padding-bottom: 4px;
}

#twitter_update_list li span a,
#native-update-list li span a {
	float: none;
	font-size: 14px;
}

/* Delicious Linkroll...mmmmm */

.delicious-posts {
	margin-bottom: 20px;
}

h2.delicious-banner a {
	font-size: 26px;
	padding: 0;
	letter-spacing: -1px;
	margin-bottom: 10px;
	color: #444;
}

.delicious-posts ul {
	border-bottom: 1px dotted #CCC;
}

#secondary ul li.delicious-post {
	border-top: 1px dotted #CCC;
	padding: 10px 0;
}

.delicious-network-username {
	display: block;
	width: 270px;
	font-style: italic;
}

/* Rock bottom */
ul#footer {
	padding: 70px 0 20px;
	list-style: none;
}

ul#footer li {
	padding: 4px 0 0;
	margin: 0;
}


/* Cycler */
#cycler {
	padding: 10px 0;
  	margin: 18px 0 0;
	border-bottom: 1px solid #CCC;
	overflow: auto;
}

#pn {
	float: right;
	width: 161px;
	overflow: auto;
}

li#previous-cyc {
	background: url(../images/prev.png) no-repeat;
	width: 80px;
	height: 40px;
  	float: left;
	list-style-type: none;
	padding: 0;
	display: block;
	clear: inherit;
}

li#next-cyc {
	background: url(../images/next.png) no-repeat;
	width: 80px;
	height: 40px;
  	float: left;
	list-style-type: none;
	padding: 0;
	margin-left: 1px;
	display: block;
	clear: inherit;
}

a#previous, a#next {
	width: 80px;
	height: 40px;
	display: block;
}

#pagination-holder {
	width: auto;
	float: left;
	clear: both;
}

ul#pagination {
	margin: 0 auto;
	padding: 0;

}

#pagination-restraint {
	margin: 0 auto;
}
	  
#pagination a {
	width: 40px;
	height: 40px;
	text-align: center;
	line-height: 40px;
	margin-right: 4px;
	float: left;
	display: block;
	background: #CCC;
	color: #CCC;
}

#pagination a.activeSlide {
	background: #F60;
	color: #F60;
}


/* Stats and specifications sections */
ul.stats {
	list-style: none;
	margin: 0;
	padding: 0;
	margin-bottom: 40px;
}

ul.stats li {
	padding: 10px 0;
	border-bottom: 1px solid #CCC;
}

.t-menu {
	font-weight: bold;
}

.t-m-title, .t-m-cat, .t-m-date,
.t-title, .t-cat, .t-date {
	padding: 8px 0;
	border-bottom: 1px solid #CCC;
}
.t-m-title, .t-title {
	width: 64%;
}

.t-m-cat, .t-m-date,
.t-cat, .t-date {
	width: 18%;
}

.t-title h3 {
	font-size: 22px;
}

.t-title p {
	font-size: 12px;
	margin-top: 4px;
	margin-right: 10px;
}