/******
SELLIT CSS FILE
Developer: Alan Hogan, June 2008
Updated: Many contributors, Sept – Nov 2008


Split into multiple sections, listed below in order. PLEASE update sections if you edit this file.

SECTIONS:
	-	YUI RESET & GRIDS
	-	LAYOUT
		-	HEAD
			- 	NAV
			-	LOGO ETC
			-	"GET STARTED"
		-	BODY (INCLUDING COLUMN LAYOUTS)
			(note that the items in the section called "STYLES"  apply mostly to things that will go in #bd.
			But they are not listed here in the hierachy.)
		-	FOOTER
	-	STYLES
	-	RAILS-SPECIFIC STYLES INCLUDING ERRORS
	-	PAGE AND SECTION-SPECIFIC STYLES
	-	COMPLETELY MISCELLANEOUS

	
MAINTENANCE: If you are a developer, please see doc/styles.text before continuing.  Also update the sections list above.
******/

/**Colors****

Banner Blue: #3399cc
Border grey: #d8d8d8
content bottom: #c8d7dc
*/

/*******************
=Yahoo! UI Grids reset-fonts-grids.css

version: 2.5.2 ~1.4KB
BSD License: http://developer.yahoo.net/yui/license.txt
View Uncompressed: http://tinyurl.com/6n8qps
*/

html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;font-variant:normal;}sup {vertical-align:text-top;}sub {vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}body {font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}table {font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}
body{text-align:center;}#ft{clear:both;}#doc,#doc2,#doc3,#doc4,.yui-t1,.yui-t2,.yui-t3,.yui-t4,.yui-t5,.yui-t6,.yui-t7{margin:auto;text-align:left;width:57.69em;*width:56.25em;min-width:750px;}#doc2{width:73.076em;*width:71.25em;}#doc3{margin:auto 10px;width:auto;}#doc4{width:74.923em;*width:73.05em;}.yui-b{position:relative;}.yui-b{_position:static;}#yui-main .yui-b{position:static;}#yui-main{width:100%;}.yui-t1 #yui-main,.yui-t2 #yui-main,.yui-t3 #yui-main{float:right;margin-left:-25em;}.yui-t4 #yui-main,.yui-t5 #yui-main,.yui-t6 #yui-main{float:left;margin-right:-25em;}.yui-t1 .yui-b{float:left;width:12.30769em;*width:12.00em;}.yui-t1 #yui-main .yui-b{margin-left:13.30769em;*margin-left:13.05em;}.yui-t2 .yui-b{float:left;width:13.8461em;*width:13.50em;}.yui-t2 #yui-main .yui-b{margin-left:14.8461em;*margin-left:14.55em;}.yui-t3 .yui-b{float:left;width:23.0769em;*width:22.50em;}.yui-t3 #yui-main .yui-b{margin-left:24.0769em;*margin-left:23.62em;}.yui-t4 .yui-b{float:right;width:13.8456em;*width:13.50em;}.yui-t4 #yui-main .yui-b{margin-right:14.8456em;*margin-right:14.55em;}.yui-t5 .yui-b{float:right;width:18.4615em;*width:18.00em;}.yui-t5 #yui-main .yui-b{margin-right:19.4615em;*margin-right:19.125em;}.yui-t6 .yui-b{float:right;width:23.0769em;*width:22.50em;}.yui-t6 #yui-main .yui-b{margin-right:24.0769em;*margin-right:23.62em;}.yui-t7 #yui-main .yui-b{display:block;margin:0 0 1em 0;}#yui-main .yui-b{float:none;width:auto;}.yui-gb .yui-u,.yui-g .yui-gb .yui-u,.yui-gb .yui-g,.yui-gb .yui-gb,.yui-gb .yui-gc,.yui-gb .yui-gd,.yui-gb .yui-ge,.yui-gb .yui-gf,.yui-gc .yui-u,.yui-gc .yui-g,.yui-gd .yui-u{float:left;}.yui-g .yui-u,.yui-g .yui-g,.yui-g .yui-gb,.yui-g .yui-gc,.yui-g .yui-gd,.yui-g .yui-ge,.yui-g .yui-gf,.yui-gc .yui-u,.yui-gd .yui-g,.yui-g .yui-gc .yui-u,.yui-ge .yui-u,.yui-ge .yui-g,.yui-gf .yui-g,.yui-gf .yui-u{float:right;}.yui-g div.first,.yui-gb div.first,.yui-gc div.first,.yui-gd div.first,.yui-ge div.first,.yui-gf div.first,.yui-g .yui-gc div.first,.yui-g .yui-ge div.first,.yui-gc div.first div.first{float:left;}.yui-g .yui-u,.yui-g .yui-g,.yui-g .yui-gb,.yui-g .yui-gc,.yui-g .yui-gd,.yui-g .yui-ge,.yui-g .yui-gf{width:49.1%;}.yui-gb .yui-u,.yui-g .yui-gb .yui-u,.yui-gb .yui-g,.yui-gb .yui-gb,.yui-gb .yui-gc,.yui-gb .yui-gd,.yui-gb .yui-ge,.yui-gb .yui-gf,.yui-gc .yui-u,.yui-gc .yui-g,.yui-gd .yui-u{width:32%;margin-left:1.99%;}.yui-gb .yui-u{*margin-left:1.9%;*width:31.9%;}.yui-gc div.first,.yui-gd .yui-u{width:66%;}.yui-gd div.first{width:32%;}.yui-ge div.first,.yui-gf .yui-u{width:74.2%;}.yui-ge .yui-u,.yui-gf div.first{width:24%;}.yui-g .yui-gb div.first,.yui-gb div.first,.yui-gc div.first,.yui-gd div.first{margin-left:0;}.yui-g .yui-g .yui-u,.yui-gb .yui-g .yui-u,.yui-gc .yui-g .yui-u,.yui-gd .yui-g .yui-u,.yui-ge .yui-g .yui-u,.yui-gf .yui-g .yui-u{width:49%;*width:48.1%;*margin-left:0;}.yui-g .yui-gb div.first,.yui-gb .yui-gb div.first{*margin-right:0;*width:32%;_width:31.7%;}.yui-g .yui-gc div.first,.yui-gd .yui-g{width:66%;}.yui-gb .yui-g div.first{*margin-right:4%;_margin-right:1.3%;}.yui-gb .yui-gc div.first,.yui-gb .yui-gd div.first{*margin-right:0;}.yui-gb .yui-gb .yui-u,.yui-gb .yui-gc .yui-u{*margin-left:1.8%;_margin-left:4%;}.yui-g .yui-gb .yui-u{_margin-left:1.0%;}.yui-gb .yui-gd .yui-u{*width:66%;_width:61.2%;}.yui-gb .yui-gd div.first{*width:31%;_width:29.5%;}.yui-g .yui-gc .yui-u,.yui-gb .yui-gc .yui-u{width:32%;_float:right;margin-right:0;_margin-left:0;}.yui-gb .yui-gc div.first{width:66%;*float:left;*margin-left:0;}.yui-gb .yui-ge .yui-u,.yui-gb .yui-gf .yui-u{margin:0;}.yui-gb .yui-gb .yui-u{_margin-left:.7%;}.yui-gb .yui-g div.first,.yui-gb .yui-gb div.first{*margin-left:0;}.yui-gc .yui-g .yui-u,.yui-gd .yui-g .yui-u{*width:48.1%;*margin-left:0;}s .yui-gb .yui-gd div.first{width:32%;}.yui-g .yui-gd div.first{_width:29.9%;}.yui-ge .yui-g{width:24%;}.yui-gf .yui-g{width:74.2%;}.yui-gb .yui-ge div.yui-u,.yui-gb .yui-gf div.yui-u{float:right;}.yui-gb .yui-ge div.first,.yui-gb .yui-gf div.first{float:left;}.yui-gb .yui-ge .yui-u,.yui-gb .yui-gf div.first{*width:24%;_width:20%;}.yui-gb .yui-ge div.first,.yui-gb .yui-gf .yui-u{*width:73.5%;_width:65.5%;}.yui-ge div.first .yui-gd .yui-u{width:65%;}.yui-ge div.first .yui-gd div.first{width:32%;}#bd:after,.yui-g:after,.yui-gb:after,.yui-gc:after,.yui-gd:after,.yui-ge:after,.yui-gf:after{content:".";display:block;height:0;clear:both;visibility:hidden;}#bd,.yui-g,.yui-gb,.yui-gc,.yui-gd,.yui-ge,.yui-gf{zoom:1;}


/*************
	LAYOUT (extends/overrides YUI) 
	-	Contains subsections for #hd, #bd, #ft as mentioned in the outline at top of file
**********/
#doc, #doc2 {
	background: white none;
	width: 940px;
	margin-top: 5px;
	border: 20px solid white;
}
/** This stuff is used for: private invite, new_login, and home.html.erb, apparently. **/
#left { 
	float: left; 
	text-align:left; 
	width: 45%; 
	margin-top: 94px;
}
#middle { 
	float: left; 
	text-align:left; 
	background-image:url(/images/layouts/application/one_pixel_vline.gif); 
	background-repeat:repeat-y; 
	background-position:center; 
	height: 265px; 
	width:10%; 
	margin-top: 50px; 
}
#right { 
	float: left; 
	text-align:left; 
	width: 45%; 
	margin-top: 145px;
}

/*head of layout*/
#hd {
	position: relative; /*aunts, uncles... and let us position things absolutely within it.*/
	background: #3399cc;
}
#topNavWrap {
	color: black;
	background-color: #fff;
	height: 2.15em; /*for text resizing*/
	overflow: hidden; /*ie6*/
	position: relative;
}
#topNav {
	height: 2.15em;
	overflow: hidden;
	font-family:Verdana, Helvetica, Arial, sans-serif;
}
.blogTab { margin-left:20px;}
.notloggedin #topNav {
	padding-left: 150px;
}
.loggedin #topNav {
	padding-left: 100px; 
}
	#topNav a {
		background: white url("/images/layouts/application/nav_left.gif") no-repeat 0px 1px;
		margin-right: 4px;
		float: left;
		text-decoration: none;
		color: black;
		white-space:nowrap; /*ie6*/
		font-size: 14px;
	}
	/*hack for ie6*/
	* html #topNav a { 
		width : 1px;
	}
	#topNav a span {
		float: left;
		padding: 8px 10px 9px;
		display: block;
		background: transparent url("/images/layouts/application/nav_right.gif") no-repeat 100% 1px;
		white-space:nowrap; /*ie6*/
		cursor: hand;  /*ie6-7*/
		cursor: pointer; /*ie6-7*/
	}

	#topNav a.off:hover  {
		background-position: 0 0;
		color: #036;
	}
	#topNav a.off:hover span {
		background-position: 100% 0;
	}
	
	#topNav a.off:hover span, #topNav a.on span  {
		padding: 7px 10px 10px;
	}
	#topNav a.on, #topNav a.off:active {
		background-position: 0px -45px;	
		color: #036;
	}
	#topNav a.on span, #topNav a.off:active span {
		background-position: 100% -45px;		
	}
	
	#topNav a.selected, #topNav a.selected:active, #topNav a.selected:hover {
		background-position: 0px -45px;	
		color: #036;
	}
	#topNav a.selected span, #topNav a.selected:active span, #topNav a.selected:hover span {
		background-position: 100% -45px;		
	}
		#topNav a.selected:hover span, #topNav a.selected span  {
		padding: 7px 10px 10px;
	}
	
	#topNav .blogLink{
		margin-left:15px;
	}
#topLogIn {
	text-align: right;
	padding: 0 5px 3px 0;
	color: #999;
	text-transform: lowercase;
	background: #fff none;
}

	
	#login_container {
		width: 100%;
		margin-left: 0px;
		margin-right: 0px;
	}
.notloggedin #topLogIn {
	padding: 6px 15px 0 0;
	position: absolute;
	right: 0;
	top: 0;
	display: block;
	width:50px;
}
#logged_out{
	position:relative;
	left:10px;
	color:#3399CC;
}
#topLargeBlock {
	position: relative;
	color: white;
	background: transparent url("/images/layouts/application/hd_univ_new.gif") no-repeat;
	height:119px;
	font-family:Verdana, Helvetica, Arial, sans-serif;

}
.small #topLargeBlock {
	height: 80px;
	background: transparent url("/images/layouts/application/hd_univ_small_new.gif") no-repeat;

}
.small #topLargeBlock.notched{
	height:72px;
}
	.topLogo {
	}
	.topLogo a {
	background: transparent url("/images/layouts/application/logo_02.gif") no-repeat top left;
	display: block;
	position: absolute;
	top: 28px;
	left: 22px;
	width: 0;
	padding: 0 0 0 152px;
	height: 58px;
	overflow: hidden;
	background-image: url("../images/layouts/application/logo_02.gif");
	}
	.small .topLogo a {
		top: 11px; 
		left: 18px; 
	} 

#topNotch{
	position: relative;
	background:  url("/images/layouts/application/hd_btm_small.gif") bottom left no-repeat;
	height:20px;
}

	#topSlogan {
		position: absolute;
		left: 300px;
		top: 54px;
		color: white;
		line-height: 32px;
		text-align: center;
	}

	#notch_text {
		text-align: center;
		display: block;
		font: normal normal normal 20px/22px "Heveltica Neue", Helvetica, Arial, sans-serif;
		position: absolute;
		bottom: 20px;
		left: 487px;
		width: 350px;
	}
	.small #topSlogan{
		left: 300px;
		top: 25px;
	}
	#topSlogan h1{
		font-size:200%;
		position: relative;
		top: 0px;
		left: -50px;
	}
	#topGetStarted div {
		float: left;
	}
	
	.greyTab span{
		color:#AAA !important;
		font-style:italic;
		
		
	}
	/*
		"TOP GET STARTED"
		Get new store: New Widget Form @ Top of Page (grey box, red button)
	*/
	.partner_logo { float:left; margin-left:5px; margin-top:35px;}
	.amzlogo { position:absolute; left:15px; top:25px;}
	
	
	.topNewUrl {
  padding: 25px 0px 20px 15px;
  text-align:left;

  }
  /* for amazon */
  .topNewUrl1 {
  padding: 25px 20px 20px 170px;
  text-align:left;
  }

	#video {
		padding-top:5px;
	}

	#topGetStarted div {
		float: left;
	}
	
	#topGetStarted {
		position: relative;
		height: 100px;
		overflow: hidden;
		background: #333 url("/images/layouts/get_started/get-started-rnd-top.gif") top left no-repeat;
	}
	#topGetStarted .topNewBtn input {
		padding: 0 .4em;
		background-color: #f84;
		color: black;
		border: 1px solid black;
	}
	#topGetStarted #cafePressLogo
	{
	position:absolute;
	top:20px;
	left:95px;
	}
	#ctl00_widget_store_provider_url {
		font-size: 110%;
		width: 427px;
		padding: 3px 5px;
		margin-top:3px;
		background: #fef7df none;
		border: 1px solid white;
		border-top-color: #776;
		border-left-color: #776;
	}
	#ctl00_widget_store_provider_url.prompt {
		font-style: italic;
		color: #776;
	}
	#start_out_btn {
		border-width: 0 !important;
		margin: 35px 0 0 0  !important;
		padding: 0 !important;
		float:left;
		height: 45px;
		width: 158px;
		/*background: transparent url("/layouts/get_started/images/start_out.gif") no-repeat 0 -45px; */
	}
	#start_out_btn1 {
		border-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		position: absolute;
		top: 33px;
		left: 685px;
		height: 45px;
		width: 158px;
	/*	background: transparent url("/layouts/get_started/images/start_out.gif") no-repeat 0 -45px; */
	}
	#start_out_btn:hover {
		background-position: 0 0;
	}

	#get_started_label {
	color: #fff;
	font-family:Verdana, Helvetica, Arial, sans-serif;
	font-weight: semibold;
	}
	#get_started_label1 {
	color: #f7b516;
	font-family:Verdana, Helvetica, Arial, sans-serif;
	font-weight: semibold;
	}
	
#contact_category {width:206px;}
	
/***** Fancy Tool-TIP MakeOver ********/
#cluetip-close img {
  border: 0;
}
#cluetip-title #cluetip-close {
  float: right;
  position: relative;
}
.cluetip-arrows {
  display: none;
  position: absolute;
  top: 0;
  left: -11px;
  height: 22px;
  width: 11px;
  background-repeat: no-repeat;
  background-position: 0 0;
}
#cluetip-extra {
  display: none;
}

/* font for clueTip */
#cluetip  { color:#666666; }



/***************************************
   =cluetipClass: 'rounded'
-------------------------------------- */

.cluetip-rounded {
  background: transparent url(/images/tooltip/bl.png) no-repeat 0 100%;  
  margin-top: 10px;
  margin-left: 12px;
}

.cluetip-rounded #cluetip-outer {
  background: transparent url(/images/tooltip/tl.png) no-repeat 0 0;  
  margin-top: -12px;
}

.cluetip-rounded #cluetip-title {
  background-color: transparent;
  padding: 5px 12px 10px;
  margin: 0 -12px 0 0;
  position: relative;
}

.cluetip-rounded #cluetip-extra {
  position: absolute;
  display: block;
  background: transparent url(/images/tooltip/tr1.png) no-repeat 100% 0; 
  top: 0;
  right: 0;
  width: 12px;
  height: 30px;
  margin: -12px -12px 0 0;
}
.cluetip-rounded #cluetip-inner {
  background: url(/images/tooltip/br.png) no-repeat 100% 100%;  
  padding: 5px 12px 12px;
  margin: -18px -12px 0 0;
  position: relative;
}

.cluetip-rounded div#cluetip-close { 
  text-align: right;
  margin: 0 5px 5px;
  color: #009;
  background: transparent;
}
.cluetip-rounded div#cluetip-close a {
  color: #777;
}



/* stupid IE6 HasLayout hack */
.cluetip-rounded #cluetip-title,
.cluetip-rounded #cluetip-inner {
  zoom: 1;
}

/* End TOOLTIP */

/**************
#BD: BODY OF LAYOUT
***************/
#bd { 
	font-size: 110%;
	padding: 2em 63px;
	
	color: #373737; /**TODO make it 373737 or something not so light as 666666 **/
	
	border-left: 1px solid #d8d8d8;
	border-right: 1px solid #d8d8d8;
	background: #c8d7dc url("/images/layouts/application/gradient.gif") repeat-x top left; /*gradient...*/
}
.centerWrap {
	text-align: center;
}
.centerCol, .centerColTiny {
	text-align: left;
	width: 60%;
	margin-left: auto; margin-right:auto;
}
	.centerCol .oversizePullquote {
		margin: 0 -20px;
	}
.centerColTiny {
	width: 50%;
	margin: 65px auto;
}
.centerCol, .centerColWide {
	text-align: left;
	width: 60%;
	margin-left: auto; margin-right:auto;
}
	.centerCol .oversizePullquote {
		margin: 0 -20px;
	}
.centerColWide {
	width: 90%;
	margin: -10px auto;
}
select.drop_down {
	width: 100%;
	margin-bottom: 10em;
}
.leftColPad {
	padding-right: 40px;
}
.rightColPad {
	padding-left: 11px;
}

/*
	#FT: FOOTER OF LAYOUT
*/
#ft { 
	text-align: center;
	font-size: 92%;
	color: #445055;
	background: transparent url("/images/layouts/home/verybottom.gif") no-repeat top left;
	padding-top: 16px;
	padding-bottom: 0px;
}
#ft2 { 
	text-align: center;
	font-size: 92%;
	color: #445055;
	padding-top: 20px;
	padding-bottom: 0px;
}
#ft3 { 
	text-align: center;
	font-size: 92%;
	color: #445055;
	padding-bottom: 20px;
	height:100%;
	width:100%;
}
/* New rounded footer (?) */
.roundFt{display:block}
.roundFt *{
  display:block;
  height:1px;
  overflow:hidden;
  font-size:.01em;
  background:#cccccc}
.roundFt1{
  margin-left:3px;
  margin-right:3px;
  padding-left:1px;
  padding-right:1px;
  border-left:1px solid #e9e9e9;
  border-right:1px solid #e9e9e9;
  background:#d8d8d8}
.roundFt2{
  margin-left:1px;
  margin-right:1px;
  padding-right:1px;
  padding-left:1px;
  border-left:1px solid #f9f9f9;
  border-right:1px solid #f9f9f9;
  background:#d5d5d5}
.roundFt3{
  margin-left:1px;
  margin-right:1px;
  border-left:1px solid #d5d5d5;
  border-right:1px solid #d5d5d5;}
.roundFt4{
  border-left:1px solid #e9e9e9;
  border-right:1px solid #e9e9e9}
.roundFt5{
  border-left:1px solid #d8d8d8;
  border-right:1px solid #d8d8d8}
.roundFtfg{
  background:#cccccc;
  font-family: Arial;}



/***********
STYLES
***********/
/* 
	The Basics / Bread and Butter: H#, p, li, a... 
*/
body {
	font-family:Verdana, Helvetica, Arial, sans-serif;
}
em, var, dfn, cite{
	font-style: italic;
}
strong, th {
	font-weight: bold;
}
h1 { font-size: 180%;}
h2 {font-size: 140%;}
h3,h4,h5,h6 {
	font-weight: bold;
}
h3 { font-size: 115%; }
h4 { letter-spacing: 0.11em; }
.center {text-align: center;}

.codeDiv {background-color:#ccc; padding:8px; text-align:left; font-size:80%}
.maroonCode {color:#990000;}
.darkCode {color:#000066;}
.blueCode {color:#0000cc;}


/*   Link styles   */
a:link {
	color: #3399cc;
	text-decoration: none;
}
a:visited {
	color: #336699;
	text-decoration: none;
}
a:hover {
/*	color: #114499;*/
	text-decoration: underline;
}
a:link .noUnderline, a:visited .noUnderline, a:hover .noUnderline, .noUnderline {
	text-decoration: none !important; /*Todo: Fix!*/
}

/* for blue links */
a.blue_link{
	color:#3399cc;
	font-style:normal;
	text-decoration:none;
}
a.blue_link:hover{
	text-decoration:underline;
}
a.blue_link:visited{
	color:#336699;
	text-decoration:none;
}

/* Forms and input elements */
#account_login {
	width:220px !important; 
}
#account_password {
	width:220px !important; 
}
#account_password_confirmation {
	width:220px !important; 
}

input.inputSubmit {
	padding-left: .5em;
	padding-right: .5em;
}
input.inputText, input.inputPass {
	border: 1px solid #bbb;
	border-top-color: #333;
	border-left-color: #333;
}
html>body input.inputCheckbox {
	border: 1px solid #bbb;
	border-top-color: #333;
	border-left-color: #333;
	padding: 4px;
}
.inputCheckbox:checked {
	background: #c0ffc3;
}
.inputCheckbox:not(:checked) {
	background: #ffd3d3;
}
input.inputText, input.inputPass {
	padding: 2px 4px;
}
input.inputText:focus, input.inputPass:focus {
	border: 1px solid #000;
}
.fullWidthForm input.inputText, .fullWidthForm input.inputPass {
	width: 99%;
}
.almostFullWidthForm {
	width: 80%;
	margin-left: 35px;
}
#bd input.inputText, #bd input.inputPass {
	width: 99%;
}
.submitWrap {
	text-align: right;
}




/*the following styles apply only to body of the layout*/
.bd h1.small {
	color: #3399cc;
	font-size: 150%;
	font-weight: normal;
	margin-bottom: 0;
}
.bd h2.large {
	color: #525252;
	font-size: 220%;
	font-weight: normal;
	margin-top: 0;
	line-height: 1.09em;
}
.bd h3 {
	color: black;
	font-weight: normal;
	font-size: 150%;
	padding-bottom: .35em;
	border-bottom: 1px solid #999;
}
.bd p, .bd h4, .bd li, .bd blockquote {
	margin-top: 1.3em;
	margin-bottom: 1.3em;
}
.bd dt {
	margin-top: 1.3em;
}
.bd h1, .bd h2 {
	margin-bottom: 20px;
}
.bd h3 {
	margin-top: 1em;
	margin-bottom: 1em;
}
.bd ul, .bd ol {
	padding-left: 2em;
}
.bd ul li {
	list-style-type: disc;
} 
.bd ol {
	margin-top: 1.3em;
	margin-bottom: 1.3em;
}
.bd ol li {
	margin-top: 0;
	margin-bottom: 0.5em;
	padding:0 0 0 1em;
	list-style-type: decimal;
	list-style-position: inside;
}
dt {
	font-weight: bold;
}

.centerCol p, .centerCol li, .centerCol dd, .centerCol dt {
	line-height: 1.6em;
}


.minorMktgCopy {
	width: 90%;
	margin: 0 auto;
	color: #505050;
}

.minorMktgCopy li {
	margin-top: 0.3em;
	margin-bottom: 0.3em;
}
.widgetWrap380 {
	padding: 0 0 42px 0;
	background: transparent url(/images/images_reused/widget_reflection.png) no-repeat bottom left;
}
.important {
	font-weight: bold;
	color: #cc0000;
}


a:link .noUnderline, a:visited .noUnderline, a:hover .noUnderline, .noUnderline {
	text-decoration: none !important; /*Todo: Fix!*/
}

/* Progress (progress.css) */
img.percentImage1 {
 background: white url(../images/percentImage_back1.png) top left no-repeat;
 padding: 0;
 margin: 5px 0 0 0;
 background-position: 1px 0;
}

img.percentImage2 {
 background: white url(../images/percentImage_back2.png) top left no-repeat;
 padding: 0;
 margin: 5px 0 0 0;
 background-position: 1px 0;
}

img.percentImage3 {
 background: white url(../images/percentImage_back3.png) top left no-repeat;
 padding: 0;
 margin: 5px 0 0 0;
 background-position: 1px 0;
}

img.percentImage4 {
 background: white url(../images/percentImage_back4.png) top left no-repeat;
 padding: 0;
 margin: 5px 0 0 0;
 background-position: 1px 0;
}

/*"What is beta" box*/
#whatIsBetaBox {
	background:#999999 url("/images/images_old/beta_top.gif") no-repeat top left;
	height:70px;
	overflow:hidden;
	position:relative;
	padding:5px 5px 5px 5px;
	margin-bottom:5px;
}
#gradFP {
	position:absolute; top:500px; left:250px;
}
#gradText {
	position:absolute; top:505px; left:400px; width: 310px;
}
#pressBtn {position:absolute; top:518px; left:250px; }
 #fpList {position:absolute; top:180px; left:-180px;margin-bottom:20px;margin-left:-50px;width:400px}
#empowerImg {top:55px; left:-230px; width:424px; height:62px;}
#forPartBubImg {top:45px; left:-269px; width:75px; height:155px;}
#forPartImg {  top:16px; left:-194px; width:390px; height:389px;}
.FpHead {position:absolute; left:-210px; top:-30px;}


	/*Just for rounded corners*/
	#whatIsBetaBox .betaInnerWrap {
	position:	absolute;
	top:0;bottom:0; left: 0; right: 0; padding: 0; margin:0;
	background: transparent url("/images/images_old/beta_btm.gif") no-repeat bottom left; 
	}

#whatIsBetaBox #betaBoxImg{
	position:absolute;
	top:15px;
	left:60px;
}

#whatIsBetaBox #betaBoxText{
	font-family:Verdana, Helvetica, Arial, sans-serif;
	font-size:14px;
	font-weight: semibold;
	position:absolute;
	width:510px;
	top:10px;
	left:417px;
	text-align:left;
	color:#000;
	padding:2px 3px 3px 3px ;
}

#notCafePress_help_icon_image{
	padding-top: 3px;
	
}

#whatIsBetaBox #betaBoxText a{
	color:#FFFFFF;
	}

#not_with_cafePress{
	color:#003366;
	font-size:120%;
	text-decoration:none;
}



/* Rails is ridiculous at times. 
Also, errors. */
form div.fieldWithErrors {
	display: inline;
}
.fieldWithErrors label  {
	color: #c00; font-weight: bold;
}
.errorExplanation {
	border: 1px solid #c33;
	background: #ecc none;
	padding: 0;
	color: #600;
}
.errorExplanation li {
	margin-top: 0; margin-bottom: 0;
}

#errorExplanation {
  width: 320px;
  padding: 7px;
  padding-bottom: 12px;
  margin-bottom: 20px;
  background-color: #f0f0f0;
  text-align: left;
}
#errorExplanation h2 {
  text-align: left;
  font-weight: bold;
  padding: 5px 5px 5px 15px;
  font-size: 12px;
  margin: -7px;
  background-color: #c00;
  color: #fff;
}
#errorExplanation p {
  color: #333;
  margin-bottom: 0;
  padding: 5px;
}
#errorExplanation ul li
{
  font-size: 12px;
  list-style: square;
  padding: 0;
  margin: 0;
}




/********
PAGE AND SECTION SPECIFIC STUFF -- TODO: MOVE TO MORE SPECIFIC CSS FILE (?) -- SEE MICHAEL FLEET
********/

/* Page specific: "About us"*/
.about_styling   a:link {
	color: #3399cc;
	text-decoration: none;
}
.about_styling a:visited {
	color: #336699;
	text-decoration: none;
}
.about_styling a:hover {
	color: #888;
	text-decoration: none;
}
.about_styling h1 { font-size: 175%; color:#666; }
.about_styling img { text-decoration: none; border:0;}
.about_styling p { font-size: 100%; color: #666; }
.about_styling .pFont { font-size: 18px; color: #666; line-height:25px; }
.about_styling .hfont { font-size: 24px; color: #666; line-height:25px; }

.innerThumb { margin: 9px 9px 5px 9px; text-align:left; }
.thumbs { text-align:center; margin-left:20px;}
.text { font-size: 95%; color: #666; }
#text4 {color:#888;}
.text2 { font-size: 100%; color: #000; font-weight:bold; }
.names { font-size: 100%; color:#000; font-weight:semibold; }
.theFoot {background:#ccc; width:100%; height:50px; clear:both; position:relative; text-align:center; font-size:80%; padding-top:8px; }
.aPadding { padding-bottom:50px;}
#teamDiv { padding-top:50px; }
#teamDiv br { margin-top:-12px; }
.rightAboutDiv { padding-left:10px; padding-top:10px; line-height:20px; }
.pressHead { font-size: 175%; color: #666; }
.blueText { color: #3399cc;}

	


/* Page specific: ACCOUNTS/SHOW */
/* I don't know why it is not a class. */
#bold_sub_heading{
	font-weight:bold;
	font-size:16px;
	margin-top:-10px;
}


/* Page specific: FAQ page  */
#FAQNav, .TOC {
	padding: 0;
	margin-left:0;
}

#FAQNav li, .TOC li {
	margin: 0;
	font-weight: bold;
	padding: 5px 0;
	border-bottom: 1px solid #999;
	list-style-type: none;
	font-size:90%;
}
#FAQSet dd, .bigDict dd {
	border-bottom: 1px solid #999;
	padding-bottom: 1.2em;
}

#FAQlist {
	padding: 0; margin-left:0px;
	list-style-type: none; 
}
#FAQlist li {
	list-style: none;
	padding-left: 5px;
	margin: 0;
	line-height:30px; 
}
table.faqTable td { padding:10px 5px 5px 5px; width:400px; vertical-align:top; }
.greyed a:link, .greyed a:visited { color:#000; background:#ccc;}


/* Page specific: Contact email  */
#browser_email_form textarea {
	width: 376px;
}

#browser_email_form label {
	padding-top: 2px;
}
.formfield {
	border: 1px solid #999;
	font-size: 12px;
	width: 200px;
	padding: 2px;
}
#browser_email {
	font-size: 13px;
	color: #333;
    padding-top: 7px;
}
#browser_email p {
	margin: 0 0 8px 0;
	text-align: left;
}
form#browser_email_form {
	width: 516px;
	margin: 30px 0 0 40px;
	text-align: left;
}
form#browser_email_form fieldset {
	border: 0;
}
#browser_email_form label {
	text-align: right;
	padding-right: 0.4em;
	color: #333;	
	width: 110px;
	float: left;
	clear: left;
	display: block;
}
#browser_email_form em {
	font-size: 70%;
}	
#browser_email_form .btnsubmit {
	float: right;
}
#browser_email_form .fieldWithErrors {
  padding: 2px;
  background-color: #f88;
  display: table; /*TODO: Who did this? why? */
}

/* No Section Page */
#cp_nosection { position:relative; top:130px; left:33px; float:left; }
#no_section_holder {float:left; margin-left:2px; margin-bottom:5px; margin-top:30px;}
#no_section_margin {margin-left:125px;}
#breaker {margin-top:40px;clear:left;}
#noSection .redTop { color:#cc0000; font-size:18px; font-weight:bold; }
#noSection .dark { color:#2d3035;  font-size:24px; font-weight:bold;  }
#noSection .dark2 { color:#2d3035; font-size:18px;  }
#noSection .dark3 { color:#333; font-size:18px; }
#noSection .dark4 { color:#333; font-size:14px; font-weight:bold;  }
#noSection .redSmaller { color:#cc0000; font-size:14px; font-weight:bold;  }
#noSection .lightBlue {  font-size:16px; font-weight:bold; } 
#inputz  { color:black;  font-size:14px; width:300px; line-height:30px; padding-top: 2px; padding-left: 5px; padding-bottom: 2px; } 
#noSection a:link {color: #3399cc}    
#noSection a:visited {color: #3399cc}
#noSection a:hover {color: #3399cc}
#noSection a:active {color: #3399cc}
/* End No Section Page */


/****** COMPLETELY WEIRD AND MISCELLANEOUS ******/

/* I don't know why this exists or where it is used or why it is not a class. */
#p_below_header{
	margin-top:-10px;
}
/* for sellers page */
#bot_img {height:389px;left:-90px;position:relative;width:390px;}
#bot_img2 {position:relative;top:-204px;left:-85px}
#right_tout {left:395px;position:relative;top:-630px;width:460px;padding-top:2px;}
#myspace_button_partnersFS
{
	position: relative;
	display: block;
	width: 183px;
	height: 58px;
	background: url("../images/for_partners/for_partners_see_on_ms_states.gif") no-repeat 0 0;
	top:0px;
	left:180px;
}

#myspace_button_partnersFS:hover
{ 
 background-position: 0 -62px;
}

#blog_button_partnersFS
{
	position: relative;
	display: block;
	width: 181px;
	height: 58px;
	background: url("../images/for_partners/for_partners_see_on_blog_states.gif") no-repeat 0 0;
	top:-58px;
	left:0px;
}

#blog_button_partnersFS:hover
{ 
 background-position: 0 -62px;
}



/* for merchants page */
#easyHeader {background:#8bb3c1 url(/images/for_merchants/easyheader.jpg) repeat-x;width:180px; margin-top:20px}
#easyHeader ul {list-style-position: inside;padding:60px 10px 10px 10px;text-align:center;}
#easyHeader ul li { list-style:none;font-size:14px; padding:0;margin:0; margin-bottom:22px;}
#easyHeader ul li span { color:#333; font-size:14px; }

#adpakul li {text-align:left; list-style-type:square; color:#8BB3C1; }
#adpakul {margin:10px;}
#adpakul li span {color:#333;}

#playVideo {
/*	position:absolute;
 	right:20px;
	top: 0px;
	z-index:999;*/
}
#video_button { 
	background: url("../images/faq/cp_video_thumb_up.png") no-repeat 0 0; 
	display:block;
	width:85px;
	height:64px;
}
#video_button:hover { 
	background: url("../images/faq/cp_video_thumb_over.png") no-repeat 0 0; 
	display:block;
	width:85px;
	height:64px;
}

.indent {
	font-family:Verdana, Helvetica, Arial, sans-serif;
	margin-top:15px; 
	line-height:20px;
	margin-left:50px;
}
#col1M {
	position:relative;
 	float:left;
 	width:430px;
 	left:-45px;
 	margin-top:-20px;
}
#col2M {
	margin-top:30px;
	margin-left:410px;
	position:relative;
	width:430px;
}
.merch_styles h2 {
	font-size: 20px;
	font-weight: 600;
	color:#333;
}
.merch_styles h3 {
	position: absolute;
	font-family:Verdana, Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-weight: 600;
	color:#000066;
}
#col2M li {
	line-height:14px;
	
}
.merch_styles ul {
	/* list-style-image:url("../images/green_bullet.gif"); */
	list-style-position:outside;
	margin-top:-20px;
}
.merch_styles li {
	font-size: 12px;
	line-height:14px;
	margin-bottom:1.0em;
	color:#666;
	padding:3px;
	margin:3px;
}
#myspace_button
{
 position:absolute;
 display: block;
 width: 207px;
 height: 58px;
 background: url("../images/for_partners/for_partners_see_on_ms_states.gif") no-repeat 0 0;
 top:255px;
 left:219px;
}
#myspace_button:hover
{ 
 background-position: 0 -62px;
}
#blog_button
{
 position: absolute;
 display: block;
 background: url("../images/for_partners/for_partners_see_on_blog_states.gif") no-repeat 0 0;
 top: 255px;
 left: 38px;

 width: 207px;
 height: 58px;
}

#blog_button:hover
{ 
 background-position: 0 -62px;
}

#blog_button span, #myspace_button span
{
 display: none;
}
.header4 {
	position:absolute;
	font-size: 18px;
	font-weight: 600;
	color:#336699 !important;
}

/* for partners page */

#fp_right_header { width:430px;margin-left:-200px;padding-top:40px; }
#fp_right_header h1 { font-size:20px; }
#fp_right_header span { color:#336699;font-size:16px;border:0;margin:0px;padding:0px; }

.partners{
	width: 300px;
	height: 501px;
	position:relative;
}

.partners img{
	position:absolute;
}
#col1 {
	position:absolute;
	left:22px;
	width:438px;
	height:490px
}
#col1 img{
	position:absolute;
}
#col2 {
	position:relative;
	margin-left:483px;
	margin-top:24px;
	width:180px;
	height:176px
}

#shopkeepers_entrance {
	font-size: 14px;
	background-image:url("../images/for_partners/fp_paper.gif");
	position: absolute;
	width: 215px;
	height: 70px;
	margin-top: -52px;
	padding-top:5px;
	left:15px;
	background-repeat: no-repeat;
	text-align: left;
	text-indent: 115px;
}

#shopkeepers_entrance a {
	position:absolute;
	top:5px;
	left:0px;
	margin-top:5px;
	}

#want_to_partner {
	color: #333333;
	position: absolute;
	top: 357px;
	left: -175px;
	text-align: center;
	padding-top: 0px;
}

#want_to_partner a {
margin-top:15px;
} 
 
#partner_contactUs {
	margin-left:30px;
	position:absolute;
	display: block;
	width: 300px;
	height: 52px;
	background: url("../images/for_partners/for_partners_want_to_partner.jpg") no-repeat 0 0;
}

#partner_contactUs:hover
{ 
 background-position: 0 -52px;
}
.forP_styles {height:600px;}
.forP_styles h2 {
	font-size: 24px;
	font-weight: semibold;
	color:#333;
}
.forP_styles h3 {
	position: absolute;
	font-size: 18px;
	font-weight: semibold;
	color:#000066;
}
.forP_styles ul {
	margin-top:-20px;
	line-height:-8px;
}
.forP_styles li {
	font-size: 16px;
	line-height:16px;
	margin-left:-26px;
	color:#666;
	margin:3px;
	padding:3px;
}
#myspace_button_partnersFP
{
	position: absolute;
	display: block;
	width: 183px;
	height: 58px;
	background: url("../images/for_partners/for_partners_see_on_ms_states.gif") no-repeat 0 0;
	top:405px;
	left:0px;
}

#myspace_button_partnersFP:hover
{ 
 background-position: 0 -62px;
}

#blog_button_partnersFP
{
	position: absolute;
	display: block;
	width: 181px;
	height: 58px;
	background: url("../images/for_partners/for_partners_see_on_blog_states.gif") no-repeat 0 0;
	top:405px;
	left:-190px;
}

#blog_button_partnersFP:hover
{ 
 background-position: 0 -62px;
}

#blog_button_partners span, #myspace_button_partners span, #partner_contactUs span
{
 display: none;
}
.gradient_box_text{
	font-size: 12px;
	line-height:12px;
	color:#666;
}

#partners_header {
	position:absolute;
	font-size: 16px;
	font-weight: regular;
	color:#336699;
	border-bottom:0px;
}


a.blue_link{
	color:#3399cc;
	font-style:normal;
	text-decoration:none;
}
a.blue_link:hover{
	text-decoration:underline;
}



.merchside { border:1px solid black;margin:0px; margin-bottom:15px; padding:10px; width:250px;background:#c8d7dc;
	-moz-border-radius:10px; -webkit-border-radius:10px ;}
#rightmerch {float:right; margin-right:0px; margin-top:10px;text-align:center;}
/* **********    CodaSlider CSS ************* */

.stripViewer .panelContainer .panel ul {
	text-align: left;
	margin: 0 15px 0 30px;
}

/* These 2 lines specify style applied while slider is loading */
.csw {width: 100%; height: 460px; background: #fff; overflow: scroll}
.csw .loading {margin: 200px 0 300px 0; text-align: center}

.stripViewer { /* This is the viewing window */
	position: relative;
	overflow: hidden; 
	margin: auto;
	width: 570px; /* Also specified in  .stripViewer .panelContainer .panel  below */
	height: 470px;
	clear: both;

}

.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
	position: relative;
	left: 0; top: 0;
	list-style-type: none;
	/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
}

.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
	float:left;
	height: 100%;
	position: relative;
	width: 570px; /* Also specified in  .stripViewer  above */
}
.panelContainer {margin-top:10px; }

.stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
	padding: 10px;
	padding-top:0px;
}

.stripNav { /* This is the div to hold your nav (the UL generated at run time) */
	margin: auto;
}

#stripNav0 {display:none;}

.stripNav ul { /* The auto-generated set of links */
	list-style: none;
}

.stripNav ul li {
	float: left;
	margin-right: 2px; /* If you change this, be sure to adjust the initial value of navWidth in slideviewer.js */
}

.stripNav a { /* The nav links */
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	line-height: 32px;
	background: #c6e3ff;
	color: #000;
	text-decoration: none;
	display: block;
	padding: 0 15px;
}

.stripNav a:hover {
	background: #9cf;
}

.stripNav a.current {
	background: #39c;
	color: #fff;
}


div#cross-links { text-align:center; background:#f6f6f6;padding:10px; margin-top:-35px; margin-left:10px; margin-bottom:20px; 	   width:532px;border:1px solid #666}
#cross-links img { width:10%;  }
#slider-top { width:570px; text-align:center;padding:0px;margin-top:10px;
	-moz-border-radius-topleft:10px; -moz-border-radius-topright:10px;
	-webkit-border-top-right-radius:10px; -webkit-border-top-left-radius:10px;	}
	
	
	/*AdPak Pages /app/views/ad_paks/* */
	.adPakDiv {float:left; width:680px; margin:0; padding:5px; text-align:left; }
	.leftAdPak {float:left;width:250px; margin:0;padding:10px;padding-top:0px; }
	.adpakp {color:#666; border-top:0px solid #2e5387; border-bottom:1px solid #666; 
		text-align:center; padding:5px; margin-top:2px; padding-bottom:5px; width:85%; }
	.marketingp { text-align:center; color:black; font-size:90%; margin-top:0px;}
	.blueUl { float:left; border:1px solid #999999; border-top:0px; width:298px;}
	.blueUl li { float:left; padding:3px; color:#2e5387; margin-bottom:8px;
		list-style: disc url(/images/ad_paks/bluebullet.jpg) inside; }
	.blueUl li:last-child {margin-bottom:20px;}
	.blueUl li:first-child {margin-top:20px;}

	.rightAdPak input[type=text] { background:url(/images/ad_paks/gradient.jpg) repeat-x; border: 1px solid #999; padding-bottom:3px;padding-left:4px;margin-bottom:5px; margin-top:2px;  }
	.rightAdPak select { margin:5px; }
	.rightAdPak form {margin-left:20px; margin-top:0px;padding-top:0px;}
	.rightAdPak {float:left;width:400px;margin:0;padding:0px; color:#666; }
	.redSubmit { background:url(/images/ad_paks/signmeup.jpg); height:43px; width:195px;
		border:0; margin:5px 50px 5px}
	.redsubscribe { background:url(/images/ad_paks/subscribe.png); height:43px; width:195px;
			border:0; margin:5px; margin-left:75px; }
	.submitRed { background:url(/images/ad_paks/submit.png); height:43px; width:195px;
					border:0; margin:5px; margin-left:75px; }
	.billingH3 {text-align:center;color:#333;margin-right:40px; margin-top:-20px; }
	.redstar {color:red;font-size:80%; text-align:left; margin-top:0px;margin-left:1px;}
	.successconfirm {text-align:center; color:#666;margin-top:100px;}
	.successconfirm p {margin-bottom:20px;}	
	#greySubmit { background:url(/images/ad_paks/cancelbutton.jpg); height:43px; width:195px;
		border:0; margin:10px;margin-top:5px; margin-bottom:10px;}
	.resubscribeAdpak { background:url(/images/ad_paks/resubscribe.jpg); height:43px; width:195px;
			border:0; margin:15px; }
	#adpakheadfont {float:left;margin-top:-25px;margin-left:125px;color:#2C5286;font-size:110% }
	.keywordli li { list-style-type:circle;list-style-position:inside;margin-bottom:10px; font-size:12px;}
	.keywordli li:last-child {margin-bottom:0px;}
	#grey_pm { background:url(/images/payments_handler/cancelbutton.png); height:43px; width:195px;
		border:0; margin:10px;margin-top:5px;}
	#grey_pmc { background:url(/images/payments_handler/cancelpro.png); height:43px; width:195px;
			border:0; margin:10px;margin-top:5px;}
	
	/* New Flex Admin page CSS  
	#botAdmin { height:610px;} */
	#so_content_video { height:610px; }  
	#bot_preview {height:380px;}
	
	#adpakbutton { margin-top:-28px; margin-bottom:10px;float:right;margin-right:-63px; }
	.leftAdPak #errorExplanation { float:left; width:240px; }
	.leftAdPak #errorExplanation li { padding:3px; 
		list-style:none;
		background:url(/images/accounts/errorsign.jpg) no-repeat 0px 2px; 
		padding-left:25px; }
	.leftAdPak #errorExplanation ul { margin-left:0px; }
	.signupbonus { border:2px solid #faca00; background:#ffff99; width:650px; height:30px;
	margin-top:15px; margin-left:20px; padding:3px 0px 3px 0px;
	-moz-border-radius-topright:5px;-moz-border-radius-bottomright:5px;
	-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:5px }
	#rightytighty .rightAdPak {margin-top:-25px }

/* premium accounts - payments_handler layout */
.ph_div {float:left; width:860px; margin:0; padding:5px; text-align:left; }
.prem {padding-left:20px;}
.prem li {list-style-type:circle;padding:0;margin:0;margin-top:3px;}
#redupgrade {background:url(/images/packages/upgrade_btn.png) no-repeat; width:250px; height:50px;border:0px;margin:10px;}
.proDiv {text-align:left;}
.proDiv input {border:1px solid #3399cc;padding:5px;margin:5px;}
.proDiv select {margin:5px;}

/*  services page page/packages */
.proDiv #errorExplanation { width:455px; margin-top:15px; -moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px; }
.proDiv #errorExplanation li { padding:3px; 
	list-style:none;
	background:url(/images/accounts/errorsign.jpg) no-repeat 0px 2px; 
	padding-left:25px; }
.proDiv #errorExplanation ul { margin-left:0px; }
#adpUpgrade {background:url(/images/packages/adv_btn.png) no-repeat; width:250px; height:50px;border:0px;margin:10px;}