/* Resets */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup, 
menu, footer, header, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: MyndraineRegular, 'Century Gothic', Geneva, Verdana, sans-serif;
	font-size: 12px;
	line-height: 150%;
	color: #555555;
}

article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video {
	display: block;
}

a img {border: 0;}

figure {position: relative;}
figure img {width: 100%;}

.clear {
	display: block;
	height: 0;
	line-height: 0;
	margin: 0;
	padding: 0;
	width: 100%;
	overflow: hidden;
	float: none;
	clear: both;
}


/* Default 768 px layout */

body {
	background: #FCFCFC;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#EEEEEE));
	background-image: -webkit-linear-gradient(#FCFCFC, #EEEEEE);
	background-image: -moz-linear-gradient(#FCFCFC, #EEEEEE);
	padding: 24px;
	-webkit-tap-highlight-color: #C8C1DA;
}

::selection {
	background: #C8C1DA;
}

::-moz-selection {
	background: #C8C1DA;
}

img::selection {
	background: transparent;
}

img::-moz-selection {
	background: transparent;
}

#outer {
	width: 720px;
	margin: 0 auto;
	position: relative;
	left: 0;
	top: 0;
	background: #FFFFFF;
	border: 1px solid #E9E9E9;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.1);
	-moz-box-shadow: 0 0 5px rgba(0,0,0,0.1);
	box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

* html #outer {
	overflow: hidden;
}

#social {
	width: 30px;
	overflow: hidden;
	position: fixed;
	left: 50%;
	bottom: 100px;
	margin-left: 360px;
	background: #F9F9F9;
	border: 1px solid #DDDDDD;
	-webkit-border-top-right-radius: 4px;
	-webkit-border-bottom-right-radius: 4px;
	-moz-border-radius-topright: 4px;
	-moz-border-radius-bottomright: 4px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	list-style-type: none;
}

* html #social {
	position: absolute;
}

#social li a {
	display: block;
	width: 20px;
	height: 20px;
	overflow: hidden;
	margin: 5px;
	background-position: left top;
	text-indent: -5000px;
}

#social li a:hover {
	background-position: -20px top;
}

#pageContent {
	position: relative;
	left: 0;
	top: 0;
	margin: 0;
	padding: 0;
}

#inner {
	padding: 40px 20px;
	max-width: 500px;
	min-height: 400px;
	margin: 0 auto;
}

#cboxInner {
	max-width: 500px;
}

* html #inner, * html cboxInner {
	width: 500px;
}

#inner.fullWidth, #cboxInner.fullWidth {
	max-width: none;
	padding: 40px 30px;
}

* html #inner.fullWidth, * html #cboxInner.fullWidth {
	width: auto;
}

#thumbs {
	background: #FFFFFF;
	width: 100%;
}

#thumbs ul {
	padding: 2px 12px 0 12px;
	margin: 0;
	border-top: 1px solid #E9E9E9;
	list-style-type: none;
	line-height: 0;
	height: 30px;
	overflow: hidden;
}

#thumbs li {
	float: left;
	margin: 1px 1px 0 1px;
}

#thumbs li a {
	display: block;
	width: 27px;
	height: 29px;
	background-image: url(../images/template_thumbs_27px.png);
	background-repeat: no-repeat;
	outline: 0;
}

#thumbs .clear {
	float: none;
	margin: 0;
}

#nav {
	width: 100%;
	line-height: 1;
	background: #000000 url(../images/nav_back.png) left top repeat-x;
}

#nav, #nav * {
	margin: 0;
	padding: 0;
	list-style: none;
}

#nav li {
	width: 19.8%;
	text-align: center;
	float: left;
	position: relative;
}

#nav li:hover {
	visibility: inherit; /* fixes IE7 'sticky bug' */
}

#nav li a {
	font-family: FontinSmallCaps, Tahoma, sans-serif;
	font-weight: normal;
	color: #FFFFFF;
	height: 24px;
	font-size: 18px;
	line-height: 24px;
	text-transform: lowercase;
	letter-spacing: 1px;
	display: block;
	text-decoration: none;
	padding-top: 2px 0;
	position: relative;
}

#nav ul {
	position: absolute;
	top: -999em;
	width: 100%;
}

#nav ul li {
	width: 100%;
}

#nav li:hover ul, #nav li.sfHover ul {
	left: 0;
	top: 24px; /* match top ul list item height */
	z-index: 99;
}

#nav li li a {
	border-top: 1px solid #777777;
	font-family: MyndraineRegular, 'Century Gothic', Geneva, Verdana, sans-serif;
	font-size: 12px;
	text-transform: none;
}

#nav a:visited  { /* visited pseudo selector so IE6 applies text colour*/
	color: #FFFFFF;
}

#nav li li {
	background: #999999;
}

#nav li li:hover, #nav li li.sfHover, #nav li li a:focus, #nav li li a:hover, #nav li li a:active {
	background: #888888;
	outline: 0;
}

#nav .sf-sub-indicator {
	display: none;
}

#nav.sf-shadow ul {
	background:	url(../images/shadow.png) no-repeat bottom right;
	padding: 0 8px 9px 0;
	-moz-border-radius-bottomleft: 17px;
	-moz-border-radius-topright: 17px;
	-webkit-border-top-right-radius: 17px;
	-webkit-border-bottom-left-radius: 17px;
}

#nav.sf-shadow ul.sf-shadow-off {
	background: transparent;
}

#nav .clear {
	float: none;
}

#startButton {
	position: absolute;
	right: 0;
	top: 0;
	margin: 0 8px 0 0;
}

.actionButton a {
	display: block;
  height: 20px;
  padding: 5px 18px 0 18px;
  text-decoration: none;
  text-align: center;
	font-style: oblique;
  outline: none;
  border: 1px solid #92BD30;
  border-top: 0;
  -webkit-border-bottom-right-radius: 8px;
	-webkit-border-bottom-left-radius: 8px;
	-moz-border-radius-bottomright: 8px;
	-moz-border-radius-bottomleft: 8px;
	border-bottom-right-radius: 8px;
	border-bottom-left-radius: 8px;
	background-color: #CCFF99;
	color: #3F7206;
	background-image: linear-gradient(bottom, rgb(153,204,51) 0%, rgb(204,255,153) 50%, rgb(204,255,153) 90%, rgb(168,185,152) 100%);
	background-image: -o-linear-gradient(bottom, rgb(153,204,51) 0%, rgb(204,255,153) 50%, rgb(204,255,153) 90%, rgb(168,185,152) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(153,204,51) 0%, rgb(204,255,153) 50%, rgb(204,255,153) 90%, rgb(168,185,152) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(153,204,51) 0%, rgb(204,255,153) 50%, rgb(204,255,153) 90%, rgb(168,185,152) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(153,204,51) 0%, rgb(204,255,153) 50%, rgb(204,255,153) 90%, rgb(168,185,152) 100%);
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, rgb(153,204,51)),
		color-stop(0.5, rgb(204,255,153)),
		color-stop(0.9, rgb(204,255,153)),
		color-stop(1, rgb(168,185,152))
	);
	text-shadow: 1px 1px 0px #EDFFDA;
}

.actionButton a:hover {
  background-color: #B6E96D;
  background-image: linear-gradient(bottom, rgb(123,174,27) 0%, rgb(181,233,109) 50%, rgb(204,255,153) 90%, rgb(168,185,152) 100%);
	background-image: -o-linear-gradient(bottom, rgb(123,174,27) 0%, rgb(181,233,109) 50%, rgb(204,255,153) 90%, rgb(168,185,152) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(123,174,27) 0%, rgb(181,233,109) 50%, rgb(204,255,153) 90%, rgb(168,185,152) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(123,174,27) 0%, rgb(181,233,109) 50%, rgb(204,255,153) 90%, rgb(168,185,152) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(123,174,27) 0%, rgb(181,233,109) 50%, rgb(204,255,153) 90%, rgb(168,185,152) 100%);
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, rgb(123,174,27)),
		color-stop(0.5, rgb(181,233,109)),
		color-stop(0.9, rgb(204,255,153)),
		color-stop(1, rgb(168,185,152))
	);
	text-shadow: 1px 1px 0px #E3FFC0;
}

.actionButton a:active {
	height: 19px;
	padding-top: 6px;
	background-color: #ACDF39;
}

#footer {
	clear: both;
	background: #000000 url(../images/nav_back.png) left top repeat-x;
	color: #FFFFFF;
	height: 45px;
	-moz-border-radius: 0 0 10px 10px;
	border-radius: 0 0 10px 10px;
}

#footer ul {
  padding: 6px 8px 2px 10px;
  margin: 0;
  display: inline;
  float: right;
}

#footer li {
  display: inline;
  line-height: 18px;
  border-left: 1px solid #FFFFFF;
  padding: 1px 8px;
}

#footer .first {
  border-left: 0;
}

#footer a, #footer a:hover, #footer a:visited {
	color: #FFFFFF;
}

#footer a {
	text-decoration: none;
}

#footer span {
  display: block;
  float: left;
  margin: 0;
  padding: 6px 8px 2px 10px;
  line-height: 1.5em;
  color: #FFFFFF;
}

#signsOfLife {
	font-size: 10px;
	text-align: center;
	color: #999999;
}

#signsOfLife a {
	color: #999999;
}


h1 {
	padding: 6px 0  10px;
	text-align: center;
}

h2 {
	position: relative;
	left: 0;
	top: 0;
	font-family: DISCORegular, Tahoma, sans-serif;
	font-size: 32px;
	font-weight: normal;
  color: #000000;
	line-height: 1.2em;
	margin-bottom: 20px;
}

h2 span {
	background: url(../images/h2_gradient.png) left top repeat;
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
}

h3 {
	font-size: 14px;
	font-weight: bold;
	margin: 20px auto 0 auto;
}

p, dl {
  margin: 0;
  padding: 8px 0 10px 0;
  line-height: 1.5em;
}

input, select, textarea {
  font-size: 12px;
  font-family: Geneva, Verdana, sans-serif;
}

th {
  font-size: 12px;
  font-weight: bold;
}

dt {
  padding-top: 12px;
  color: #7A68A4;
}

dd {
  margin: 0;
}

dt.toggler {
  cursor: pointer;
}

.toolboxButton {
	display: block;
	border: 1px solid #DDDDDD;
	padding: 4px 8px 1px 8px;
	margin: 6px;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	background-image: url(../images/button_back.png);
	background-position: left top;
	background-repeat: repeat-x;
	cursor: pointer;
}

.toolboxButton:hover {
	background-position: left -30px;
	text-decoration: none;
}

.linkButton, .linkButton:hover {
	text-decoration: none;
}

.minitext {
	font-size: 10px;
  font-style: oblique;
  line-height: 16px;
}

.errorBox, .successBox, .infoBox {
	width: 70%;
	min-height: 24px;
	padding: 10px;
	padding-left: 50px;
	margin: 10px 0 20px 0;
	background: #F7ECF0 url(../images/error_red.png) 6px 6px no-repeat;
	color: #777777;
	text-align: left;
	font-style: oblique;
	border: 1px solid #EDD1D2;
}

* html .errorBox, * html .successBox, * html .infoBox {
	height: 24px;
}

.fullWidth .errorBox, .fullWidth .successBox, .fullWidth .infoBox {
	margin: 10px auto 20px auto;
}

.errorBox a {
	color: #C4595D;
}

.successBox {
	background: #EDF0EC url(../images/success_green.png) 6px 6px no-repeat;
	border: 1px solid #DAE4C9;
}

.successBox a {
	color: #6E9268;
}

.infoBox {
	background: #E4E7F0  url(../images/info_blue.png) 6px 6px no-repeat;
	border: 1px solid #D1D4DD;
}

.infoBox a {
	color: #839CCF;
}

.catchField, .hideMe {
	display: none;
}

.inlineImage {
	vertical-align: middle;
}

.cboxContainer {
	width: 600px;
}

.toolboxForm .tableWrapper {
  background-color: #F9F9F9;
  border: 1px solid #DDDDDD;
  margin: 20px 0 50px 0;
  padding: 10px;
  display: inline-block;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

#cboxInner .toolboxForm .tableWrapper {
	margin: 20px 0;
}

.toolboxForm table {
	background-color: #F9F9F9;
	border: 0;
	margin: 0;
}

#cboxInner .toolboxForm table {
	min-width: 460px;
}

.toolboxForm td {
  padding: 4px;
  vertical-align: top;
}

.toolboxForm .iePadding {
	padding: 10px;
	vertical-align: middle;
}

.toolboxForm .label {
  padding-top: 8px;
  text-align: right;
  white-space: nowrap;
}

.toolboxForm .display {
  padding-top: 8px;
}

.toolboxForm .detail input, .toolboxForm .detail select, .toolboxForm .detail textarea {
  width: 200px;
}

.toolboxForm .detail .checkbox, .toolboxForm .detail .radio {
	width: auto;
}

.toolboxForm .detail ul, .toolboxForm .detail li {
	width: 240px;
	list-style-type: none;
}

.toolboxForm .detail label.error {
	display: block;
	width: 198px;
	padding: 2px 0 0 2px;
	color: #C4595D;
	font-size: 10px;
}

.toolboxForm p {
  text-align: center;
  line-height: 2em;
  padding: 0;
}

.toolboxForm .fullWidth {
  text-align: center;
}

.toolboxForm .fullWidth input, .toolboxForm .fullWidth textarea {
  width: 100%;
}

.toolboxForm #newsletterLabel {
	font-size: 11px;
}

.toolboxForm #chooseSubdomain {
	text-align: center;
}

.purchase .continue {
  text-align: right;
}

.cookieImage {
  margin: 20px;
}

.newsletterSignup {
	margin-bottom: 50px;
}

.newsletterSignup .tableWrapper {
  background-color: #F9F9F9;
  border: 1px solid #DDDDDD;
  margin: 10px 0 20px 0;
  padding: 8px 10px;
  display: inline-block;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

.newsletterSignup table {
  background-color: #F9F9F9;
}

.newsletterSignup input {
	margin: 0 4px;
}

.newsletterSignup label.error {
	color: #C4595D;
	font-size: 10px;
}

.fbLikeBox {
	margin: 20px 0;
}



/* home page */

#homePage #inner {
	padding: 0;
	margin: 0;
}

#homePage #thumbs ul {
  border-bottom: 14px solid #000000;
  margin-top: 0;
  padding-top: 0;
  margin-bottom: 2px;
}

#stationerySplash {
	width: 259px;
	float: left;
	background-image: url(../images/stationery.png);
	background-position: center top;
	background-repeat: no-repeat;
	padding: 240px 30px 20px 70px;
	margin: 20px 0 10px 0;
	border-right: 1px solid #FFFFFF;
}

#stationerySplash ul {
 width: 208px;
 padding-left: 7px;
 list-style-type: none;
}

#websitesSplash {
	width: 259px;
	float: right;
	background-image: url(../images/website_couple.png);
	background-position: center 30px;
	background-repeat: no-repeat;
	padding: 240px 50px 20px 50px;
	margin: 20px 0 10px 0;
	border-left: 1px solid #DDDDDD;
}

#websitesSplash ul {
 width: 208px;
 padding-right: 7px;
 list-style-type: none;
 text-align: right;
}

#stationerySplash li, #websitesSplash li {
	margin-bottom: 8px;
}

#startButtonHome {
	width: 250px;
	clear: both;
	margin: 0 auto;
	position: relative;
	left: 0;
	top: -20px;
}

#startButtonHome a {
  -webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
  padding: 2px 18px 0 18px;
}

#getStarted {
	font-family: FontinSmallCaps, Tahoma, sans-serif;
	font-size: 20px;
	font-weight: normal;
	background: #000000 url(../images/nav_back.png) left top repeat-x;
	color: #FFFFFF;
	height: 24px;
	padding: 2px 0;
	font-size: 18px;
	font-weight: normal;
	line-height: 24px;
	text-align: center;
	text-transform: lowercase;
	letter-spacing: 1px;
	line-height: 1.2em;
	border: none;
	clear: both;
}

#slideshowWrapper {
	width: 100%;
	height: 200px;
	position: relative;
	left: 0;
	top: 0;
	background: #FFFFFF url(../images/background_flax.jpg) right top no-repeat;
	margin-bottom: 2px;
}

#slideshow {
	width: 100%;
	height: 200px;
	background: url(../images/slideshow.jpg) right top no-repeat;
}

#slideshowText {
	width: 100%;
	height: 200px;
	position: absolute;
	left: 0;
	top: 0;
	background: url(../images/slideshow_text.png) left top no-repeat;
}



/* stationery & website home pages */

#stationeryMenu, #websitesMenu {
	width: 100%;
	background: url(../images/menu_back.png) left center no-repeat;
	padding: 16px 12px;
}

#stationeryMenu img, #websitesMenu img {
	margin-bottom: 4px;
}

#stationeryMenu ul, #websitesMenu ul {
	list-style-type: none;
}
	
#stationeryMenu li a, #websitesMenu li a {
	font-family: FontinSmallCaps, Tahoma, sans-serif;
	font-weight: normal;
	font-size: 18px;
	line-height: 30px;
	text-decoration: none;
	margin-left: 30px;
}

#stationeryMenu li a:hover, #websitesMenu li a:hover {
	color: #999999;
}


/* template display page */

#templatePreview {
	padding: 10px;
	width: 240px;
	float: left;
	text-align: center;
}

#templatePreview img {
	display: block;
	width: 240px;
	height: 479px;
}

#templatePreview ul {
	margin-top: 20px;
	padding: 2px 12px;
	border-top: 1px solid #E9E9E9;
	border-bottom: 1px solid #E9E9E9;
	list-style-type: none;
	line-height: 18px;
	height: 20px;
	overflow: hidden;
	clear: both;
}

#templatePreview li {
	float: left;
	margin: 1px;
}

#templatePreview li span {
	margin: 0 10px;
}

#templatePreview li div {
	display: block;	
	width: 16px;
	height: 16px;
	background: url(../images/preview_color.png) left -16px no-repeat;
}

#templatePreview li .activeColor {
	background-position: left top;
}

* html #templatePreview li div {
	background-image: none;
}

#templatePreview .clear {
	margin: 0;
	float: none;
}

#templateInfo {
	width: 360px;
	padding: 10px;
	float: left;
}

#templateInfo h2 {
	width: 200px;
	height: 60px;
	margin-bottom: 4px;
}

#templateInfo h2 span {
	display: none;
}

#templateInfo blockquote {
	font-style: oblique;
	letter-spacing: 1px;
}

#templateInfo blockquote cite {
	letter-spacing: normal;
	font-style: normal;
	color: #999999;
	float: right;
	padding: 4px 20px 0 0;
}

#templateInfo blockquote cite i {
	font-style: oblique;
	color: #999999;
}

#templateInfo #templateSelect {
	margin: 100px auto 0;
	width: 80%;
	padding: 16px;
	background-color: #F9F9F9;
	border: 1px solid #DDDDDD;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

* html #templateInfo #templateSelect {
	background-color: #FFFFFF;
}

#templateInfo #templateSelect h3 {
	margin-top: 0;
}

#templateInfo #templateSelect img {
	float: right;
	position: relative;
	left: 0;
	top: 9px;
}


/* personalise page */

#preview {
	padding: 20px 20px 20px 0;
	width: 240px;
	height: 500px;
	float: left;
	text-align: center;
	/*background: url(../images/loading.gif) center 200px no-repeat;*/
}

#preview .personalPreview {
	-webkit-transform: rotate(-2deg);
	-moz-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
	-o-transform: rotate(-2deg);
	transform: rotate(-2deg);
	-moz-box-shadow: 2px 2px 5px #888;
	-webkit-box-shadow: 2px 2px 5px #888;
	box-shadow: 2px 2px 5px #888;
}

#preview a {
	width: 85%;
	margin: 20px auto;
}

#personalise {
	padding: 20px 20px 20px 0;
	float: left;
}

#personalise #settings {
	width: 535px;
	background-color: #F9F9F9;
	border: 1px solid #E0E0E0;
	padding: 0 12px 6px 12px;
	padding-top: 10px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

.selectTable {
	margin-top: 12px;
	border: 1px solid #CCCCCC;
	background-color: #FFFFFF;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

.selectTable th {
	padding: 5px 0;
	background-color: #DDDDDD;
}

.selectTable td {
	text-align: center;
	padding: 5px 10px 10px;
	width: 120px;
	background-color: #FFFFFF;
}

.selectTable td p {
	padding: 0;
}

.displaySelector {
	position: relative;
	left: 0;
	top: 0;
	text-align: left;
	margin-top: 8px;
}

.displaySelector select {
	position: relative;
	left: 0;
	top: 0;
	width: 172px;
	margin: 0;
	z-index: 0;
}

.selectorLayer {
	height: 20px;
	width: 172px;
	position: absolute;
	left: 0;
	top: 0;
}
	
.selectorList {
	background: #FFFFFF;
	border: 1px solid #999999;
	width: 170px;
	height: 220px;
	overflow: auto;
	overflow-y: auto;
	overflow-x: hidden;
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 100;
}

.selectorList a {
	display: block;
	text-align: left;
	text-indent: 4px;
	padding: 1px 0;
	text-decoration: none;
	line-height: 100%;
}

.selectorList a:hover {
	background: #CCCCCC;
	text-decoration: none;
}

#templateSelectWrapper {
	position: relative;
	left: 28px;
	top: -14px;
}

#templateSelectWrapper select {
	width: 1px;
	height: 1px;
	overflow: hidden;
	margin-left: 5px;
}

#templateLayer {
	width: 60px;
	height: 42px;
	overflow: hidden;
	padding: 2px;
	border: 1px solid #CCCCCC;
	text-align: left;
	background: url(../images/dropdown_back.png) right top no-repeat;
	cursor: pointer;
}

#templateLayer:hover {
	border: 1px solid #DDDDDD;
	background: url(../images/dropdown_back.png) right -46px no-repeat;
}

#templateList {
	left: -48px;
	width: 169px;
}

#templateList a {
	width: 42px;
	height: 42px;
	overflow: hidden;
	border: 1px solid #CCCCCC;
	padding: 1px;
	margin: 2px;
	float: left;
	text-indent: 0;
}

#names input, #names label {
	margin: 6px 2px;
}

#names .nameLabel {
	display: inline-block;
	width: 100px;
}

#names {
	width: 300px;
	margin-top: 12px;
	float: left;
}

#update {
	width: 160px;
	float: left;
	padding: 20px 0 0 0;
	text-align: center;
}

.previewInfo {
	font-size: 9px;
	line-height: 24px;
	cursor: pointer;
}

#next {
	clear: both;
	padding: 20px;
	text-align: right;
}



/* save design page */

#stationeryOptions {
	width: 400px;
	height: 650px;
	margin: 10px;
	padding: 10px;
	float: left;
	text-align: center;
	border: 1px solid #CCCCCC;
	background-color: #FFFFFF;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

#stationeryOptions ul {
	list-style-type: none;
}

#stationeryOptions li {
	display: block;
	width: 120px;
	margin: 6px;
	float: left;
	text-align: center;
}

.stationeryTitle {
	font-weight: bold;
}

#stationeryOptions a {
	clear: both;
	margin-top: 20px;
}

#stationeryOptions #priceChart img {
	padding-top: 23px;
}

#otherOptions {
	float: left;
	width: 250px;
	text-align: center;
}

#requestSamples, #startWebsite {
	margin: 10px 0;
	border: 1px solid #CCCCCC;
	background-color: #FFFFFF;
	-moz-border-radius: 4px;
	border-radius: 4px;
	padding: 12px;
}

#requestSamples {
	height: 330px;
}

#startWebsite {
	height: 280px;
}


/* activation page */

#activation td {
	vertical-align: middle;
}

#activation td img {
	vertical-align: text-bottom;
}

#copyButton.active {
	position: relative;
	top: 1px;
	left: 1px;
}


/* checkout pages */

.purchase form {
	margin-bottom: 20px;
}

.purchaseSelect {
  margin: 20px 0;
}

.purchaseSelect th {
  padding: 8px 8px 4px 8px;
  vertical-align: top;
}

.purchaseSelect td {
  padding: 8px;
  vertical-align: middle;
	border-top: 1px solid #F0F0F0;
}

.purchaseSelect .selection {
  text-align: center;
}

.purchaseSelect .details {
  text-align: left;
  font-size: 12px;
  padding-right: 20px;
  width: 250px;
  white-space: nowrap;
}

.purchaseSelect .activeDate {
  font-size: 9px;
  color: #999999;
}

.purchaseSelect .price {
  text-align: right;
  font-size: 12px;
  width: 60px;
}

.purchaseSelect .total {
  text-align: right;
  font-size: 12px;
}

.purchaseSelect .separator {
  height: 0;
  line-height: 0;
  padding: 0;
  overflow: hidden;
  border-top: 1px solid #CCCCCC;
}

.purchaseDetail .setWidthInput {
  width: 190px;
}

#domainHead {
  line-height: 1.5em;
  padding: 0;
  margin: 0 0 6px 0;
}

#processing {
  display: none;
  font-size: 11px;
  font-style: oblique;
  line-height: 1.5em;
  padding: 10px 0 0 0;
  text-align: center;
}

#domainResponse {
  display: none;
  line-height: 1.5em;
  padding: 10px 0 0 0;
  text-align: center;
}

#addressLoader td {
  text-align: center;
  vertical-align: middle;
  height: 60px;
}

#receipt {
  width: 400px;
}

#receipt th {
  text-align: left;
}

#didyouknow {
  padding-top: 12px;
}

#receipt td {
  line-height: 1.5em;
  white-space: nowrap;
}

#receipt .price {
  width: 200px;
  text-align: right;
  padding-right: 100px;
}

#receipt .totalPrice {
  font-weight: bold;
}

#receipt #receiptInfo {
  text-align: left;
  font-size: 10px;
  font-style: oblique;
  white-space: normal;
}



/* websites page */

.stationeryVoucher {
	float: right;
}

#featureList {
  margin: 20px 0;
  width: 520px;
}

#featureList dt {
  padding: 6px 10px;
  margin: 0;
  text-align: left;
}

#featureList dd p {
	padding: 6px 10px;
	text-align: left;
	font-size: 10px;
	min-height: 5em;
}

#featureList dd p b {
	font-size: 10px;
}

#featureList dd {
	font-size: 10px;
	padding: 0;
	margin: 0;
}

#featureList .featureHead, #featureList .featureCheckHead {
	font-weight: bold;
}

#featureList .featureHead, #featureList .feature {
	width: 260px;
	display: inline-block;
}

#featureList .featureCheck, #featureList .featureCheckHead {
	width: 120px;
	display: inline-block;
	text-align: center;
}

#featureList .feature_y {
	background-color: #F3F3F3;
}

#featureList .featureCheck {
	color: #505050;
}

#smsDisplay form {
	padding-top: 4px;
	line-height: 300%;
}

#smsDisplay #unavailable {
	font-style: oblique;
}


/* pricing page */

#priceInfo h2 {
	margin: 20px 0 10px 0;
}

#priceMenu {
	list-style-type: none;
	margin: 20px 0;
}

.productsTable {
	margin: 20px 0;
	border-collapse: collapse;
	width: 500px;
}

.productsTable h3 {
	margin: 20px 0 0 0;
	white-space: nowrap;
}

.productsTable th, .productsTable td {
	text-align: left;
	padding: 4px;
	vertical-align: top;
	border-top: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
}

.productsTable .productImage {
	width: 70px;
}

.productsTable .productDetails, .productsTable .productDetails i {
	font-size: 10px;
	line-height: 180%;
}

.productsTable .productUse {
	font-size: 10px;
	width: 100px;
}

.productsTable .productPrice {
	width: 50px;
	text-align: right;
}

.ribbons {
	float: right;
	margin: -20px 0 0 20px;
}

.domainCheck {
  background-color: #F9F9F9;
  border: 1px solid #DDDDDD;
  margin: 10px 0 20px 0;
  padding: 8px 10px;
}

.domainCheck td {
  padding: 4px;
}


/* ebook page */

#eBook {
	margin-top: 30px;
}

#eBook #bookCover {
	float: right;
	margin-right: 10px;
}

#eBook h3 {
	text-align: center;
	font-family: 'Bookman Old Style';
	font-size: 40px;
	font-weight: normal;
	color: #66523A;
}

#eBook h4 {
 text-align: center;
 font-family: FontinSmallCaps, Tahoma, sans-serif;
 font-size:18px;
 font-weight: normal;
 line-height: 22px;
 text-transform: lowercase;
 color: #998677;
}

#eBook ul {
	margin: 20px;
}

#eBookPurchase {
	width: 400px;
  background-color: #F9F9F9;
  border: 1px solid #DDDDDD;
  margin: 20px;
  padding: 16px;
  font-size: 13px;
  font-style: oblique;
}

#eBookPurchase img {
	float: left; 
	margin: 0 16px 20px 0;
}

#eBookPurchase .instantDownload {
	font-size: 18px;
	font-weight: bold;
	font-style: normal;
}

#buyButton {
	width: 150px;
	float: right;
}

#buyButton a {
  -webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
  padding: 4px 18px 0 18px;
}

#eBookPurchaseDetails .tableWrapper {
	margin: 10px 0;
}


/* envelopes page */

#envelopeColors div {
	margin-top: 20px;
}

#envelopeColors li {
	float: left;
	list-style-type: none;
	margin: 10px 8px 0 0;
	text-align: center;
}

#envelopeColors img {
	width: 118px;
	height: 84px;
}


/* sample pack request page */

#samplePack {
	float: right;
}

#samplesForm .label {
	padding-left: 20px;
}

#samplesForm .detail ul, #samplesForm .detail li {
	width: 260px;
}

#activateSubscription {
	background-image: url(../images/mail_blue.png);
}


/* wedding tips page */

#tipDisplay {
	line-height: 200%;
	position: relative;
	left: 0;
	top: 0;
}

#tip {
  width: 295px;
  height: 200px;
  border: 1px solid #CCCCCC;
  padding: 3px;
  margin-bottom: 10px;
  background: url(../images/processing_large.gif) center center no-repeat;
}

#shareTips {
	display: block;
	cursor: pointer;
	position: absolute;
	left: 285px;
	top: 40px;
	width: 150px;
	height: 150px;
}

* html #shareTips img {
	display: none;
}

* html #shareTips {
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/share_tip.png", sizingMethod="scale");
}

#addTips {
  margin-top: 40px;
}

#tipOptions {
  margin-top: 0;
  padding-left: 10px;
  list-style-type: none;
}

#tipOptions li {
  margin-left: 0;
  padding-left: 0;
}

#tipOptions img {
  vertical-align: middle;
  padding: 4px;
}

.widgetDownload a {
  font-size: 18px;
}

.widgetDownload img {
  margin: 20px 20px 200px 0;
  float: left;
}


/* submit tip page */

#recentTipsWrapper {
	float: left;
	padding: 10px 0 0 20px;
}

#recentTips {
	width: 200px;
	height: 260px;
}

#scroller {
	cursor: pointer;
}


/* feedback page */

.feedbackBox {  
  background-color: #F9F9F9;
  border: 1px solid #DDDDDD;
  margin: 20px 0 30px 0;
  padding: 10px;
  width: 90%;
}

.feedbackBox ul {
	margin-left: 0;
	padding-left: 0;
}

.feedbackBox li {
	list-style-type: none;
	padding: 2px;
	margin-left: 0;
	padding-left: 0;
}

.feedbackBox table {
	margin: 10px 0;
}

.feedbackBox .darkRow th, .feedbackBox .darkRow td {
	background-color: #DDDDDD;
}

.feedbackBox th, .feedbackBox td {
	width: 130px;
	padding: 2px 4px;
}

.matrix th, .matrix td {
	font-weight: normal;
	text-align: center;
	width: 60px;
}

.matrix .item {
	text-align: left;
	width: 100px;
}

.feedbackBox .question {
	display: block;
	font-weight: bold;
}

.feedbackBox textarea {
	margin: 10px 0;
}

.feedbackBox .setWidthInput {
	width: 380px;
}

#fTOther {
	width: 160px;
}

#girl_book {
	width: 229px;
	position: absolute;
	bottom: 70px;
	right: 20px;
}


/* testimonials page */

.testimonial {
	margin: 20px 0;
	background: #F9F9F9 url(../images/testimonial_left.png) left top no-repeat;
}

.testimonial blockquote {
	padding: 10px 50px;
	text-align: justify;
	background: url(../images/testimonial_right.png) right bottom no-repeat;
}

.testimonial cite {
	font-style: oblique;
	font-size: 10px;
	text-align: left;
}



/* inspiration gallery */

#inspirationThumbs {
	margin: 20px 0;
}

#inspirationThumbs li {
	list-style-type: none;
	display: inline;
	margin: 2px;
}

#inspirationThumbs img {
	padding: 1px;
	border: 1px solid #DDDDDD;
}

#inspirationThumbs img:hover {
	border: 1px solid #999999;
}

#inspiration img {
	padding-bottom: 6px;
	border-bottom: 1px solid #DDDDDD;
}


/* designs and colors page */

#designsColors {
	max-width: 700px;
	margin: 20px auto;
}

#designsColors ul {
	margin-bottom: 30px;
}

#designIcons li {
	list-style-type: none;
	width: 100px;
	margin: 0;
	padding: 6px;
	float: left;
	text-align: center;
	text-indent: 0;
}

#colorSwatches li {
	list-style-type: none;
	width: 60px;
	margin: 0;
	padding: 6px;
	float: left;
	text-align: center;
	text-indent: 0;
}

#colorSwatches .swatch {
	position: relative;
	left: 0;
	top: 0;
	width: 50px;
	height: 50px;
	margin: 2px auto; 
}

#colorSwatches .swatch span {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(../images/swatch_gradient.png) left top repeat-x;
}

#designsColors ul .clear {
	float: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

#designsColors li a {
	text-decoration: none;
}



/* thumbnail rollovers */

#flax a { background-position: -0px 0; }
#flax .activeTemplate { background-position: -0px -29px; }
#hearts a { background-position: -27px 0; }
#hearts .activeTemplate { background-position: -27px -29px; }
#kites a { background-position: -54px 0; }
#kites .activeTemplate { background-position: -54px -29px; }
#gerbera a { background-position: -81px 0; }
#gerbera .activeTemplate { background-position: -81px -29px; }
#together a { background-position: -108px 0; }
#together .activeTemplate { background-position: -108px -29px; }
#petals a { background-position: -135px 0; }
#petals .activeTemplate { background-position: -135px -29px; }
#birds a { background-position: -162px 0; }
#birds .activeTemplate { background-position: -162px -29px; }
#celtic a { background-position: -189px 0; }
#celtic .activeTemplate { background-position: -189px -29px; }
#lilies a { background-position: -216px 0; }
#lilies .activeTemplate { background-position: -216px -29px; }
#bamboo a { background-position: -243px 0; }
#bamboo .activeTemplate { background-position: -243px -29px; }
#koru a { background-position: -270px 0; }
#koru .activeTemplate { background-position: -270px -29px; }
#forever a { background-position: -297px 0; }
#forever .activeTemplate { background-position: -297px -29px; }
#ampersand a { background-position: -324px 0; }
#ampersand .activeTemplate { background-position: -324px -29px; }
#cherryblossom a { background-position: -351px 0; }
#cherryblossom .activeTemplate { background-position: -351px -29px; }
#ornamental a { background-position: -378px 0; }
#ornamental .activeTemplate { background-position: -378px -29px; }
#beads a { background-position: -405px 0; }
#beads .activeTemplate { background-position: -405px -29px; }
#cake a { background-position: -432px 0; }
#cake .activeTemplate { background-position: -432px -29px; }
#truelove a { background-position: -459px 0; }
#truelove .activeTemplate { background-position: -459px -29px; }
#feather a { background-position: -486px 0; }
#feather .activeTemplate { background-position: -486px -29px; }
#leaves a { background-position: -513px 0; }
#leaves .activeTemplate { background-position: -513px -29px; }
#wedding a { background-position: -540px 0; }
#wedding .activeTemplate { background-position: -540px -29px; }
#lanterns a { background-position: -567px 0; }
#lanterns .activeTemplate { background-position: -567px -29px; }
#grass a { background-position: -594px 0; }
#grass .activeTemplate { background-position: -594px -29px; }
#damask a { background-position: -621px 0; }
#damask .activeTemplate { background-position: -621px -29px; }



/* tipsy plugin */

.tipsy { padding: 5px; font-size: 10px; opacity: 0.8; filter: alpha(opacity=80); background-repeat: no-repeat;  background-image: url(../images/tipsy.gif); }
.tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; max-width: 200px; text-align: center; }
.tipsy-inner { -moz-border-radius:3px; border-radius:3px; }
.tipsy-north { background-position: top center; }
.tipsy-south { background-position: bottom center; }
.tipsy-east { background-position: right center; }
.tipsy-west { background-position: left center; }



/* dateinput plugin */


/* For the details, see: http://flowplayer.org/tools/dateinput/index.html#skinning */

/* the input field */

.date {
/*
	border:1px solid #ccc;
	font-size:18px;
	padding:4px;
	text-align:center;
	-moz-box-shadow:0 0 10px #eee inset;
	-webkit-box-shadow:0 0 10px #eee inset;
*/
	width:198px;
}

/* calendar root element */
#calroot {
	/* place on top of other elements. set a higher value if necessary */
	z-index:10000;
	margin-top:-1px;
	width:198px;
	padding:2px;
	background-color:#fff;
	font-size:10px;
	border:1px solid #ccc;
	-moz-box-shadow: 0 0 6px #999;
	-webkit-box-shadow: 0 0 6px #999;
	box-shadow: 0 0 6px #999;
}

/* head. contains title, prev/next month controls and possible month/year selectors */
#calhead {	
	padding:2px 0;
	height:22px;
} 

#caltitle {
	font-size:14px;
	color:#7A68A4;	
	float:left;
	text-align:center;
	width:155px;
	line-height:20px;
	text-shadow:0 1px 0 #ddd;
}

#calnext, #calprev {
	display:block;
	width:20px;
	height:20px;
	background:transparent url(../images/prev.png) no-repeat scroll center center;
	float:left;
	cursor:pointer;
}

#calnext {
	background-image:url(../images/next.png);
	float:right;
}

#calprev.caldisabled, #calnext.caldisabled {
	visibility:hidden;	
}

/* year/month selector */
#caltitle select {
	font-size:10px;	
}

/* names of the days */
#caldays {
	height:14px;
	border-bottom:1px solid #ddd;
}

#caldays span {
	display:block;
	float:left;
	width:28px;
	text-align:center;
}

/* container for weeks */
#calweeks {
	background-color:#fff;
	margin-top:4px;
}

/* single week */
.calweek {
	clear:left;
	height:22px;
}

/* single day */
.calweek a {
	display:block;
	float:left;
	width:27px;
	height:20px;
	text-decoration:none;
	font-size:10px;
	margin-left:1px;
	text-align:center;
	line-height:20px;
	color:#666;
	-moz-border-radius:3px;
	border-radius:3px; 		
} 

/* different states */
.calweek a:hover, .calfocus {
	background-color:#ddd;
}

/* sunday */
a.calsun {
	color:red;		
}

/* offmonth day */
a.caloff {
	color:#ccc;		
}

a.caloff:hover {
	background-color:rgb(245, 245, 250);		
}


/* unselecteble day */
a.caldisabled {
	background-color:#efefef !important;
	color:#ccc	!important;
	cursor:default;
}

/* current day */
#calcurrent {
	background-color:#7A68A4;
	color:#fff;
}

/* today */
#caltoday {
	background-color:#333;
	color:#fff;
}



/*
    ColorBox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative; overflow:visible;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}

/* 
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#fff;}
#colorbox{}
    #cboxTopLeft{width:25px; height:25px; background:url(../images/border1.png) no-repeat 0 0;}
    #cboxTopCenter{height:25px; background:url(../images/border1.png) repeat-x 0 -70px;}
    #cboxTopRight{width:25px; height:25px; background:url(../images/border1.png) no-repeat -25px 0;}
    #cboxBottomLeft{width:25px; height:43px; background:url(../images/border1.png) no-repeat 0 -25px;}
    #cboxBottomCenter{height:43px; background:url(../images/border1.png) repeat-x bottom left;}
    #cboxBottomRight{width:25px; height:43px; background:url(../images/border1.png) no-repeat -25px -25px;}
    #cboxMiddleLeft{width:25px; background:url(../images/border2.png) repeat-y 0 0;}
    #cboxMiddleRight{width:25px; background:url(../images/border2.png) repeat-y -25px 0;}
    #cboxContent{background:#fff;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin:10px 10px 20px 10px;}
        #cboxTitle{position:absolute; bottom:0px; left:0; text-align:center; width:100%; color:#999;}        
        #cboxCurrent,#cboxSlideshow{display:none !important;}
        #cboxPrevious{position:absolute; left:0; bottom:-29px; background:url(../images/controls.png) left -25px no-repeat; width:23px; height:23px; text-indent:-9999px;}
        #cboxPrevious.hover{background-position:left 0px;}
        #cboxNext{position:absolute; left: 30px; bottom:-29px; background:url(../images/controls.png) -25px -25px no-repeat; width:23px; height:23px; text-indent:-9999px;}
        #cboxNext.hover{background-position:-25px 0px;}
        #cboxClose{position:absolute; right:0; bottom:-29px; background:url(../images/controls.png) -50px -25px no-repeat; width:23px; height:23px; text-indent:-9999px;}
        #cboxClose.hover{background-position:-50px 0px;}
        #cboxLoadingOverlay{background:#fff url(../images/loading.gif) no-repeat 50% 50%;}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}

/*
  The following provides PNG transparency support for IE6
  Feel free to remove this and the /ie6/ directory if you have dropped IE6 support.
*/
.cboxIE6 #cboxTopLeft{background:url(../images/ie6/borderTopLeft.png);}
.cboxIE6 #cboxTopCenter{background:url(../images/ie6/borderTopCenter.png);}
.cboxIE6 #cboxTopRight{background:url(../images/ie6/borderTopRight.png);}
.cboxIE6 #cboxBottomLeft{background:url(../images/ie6/borderBottomLeft.png);}
.cboxIE6 #cboxBottomCenter{background:url(../images/ie6/borderBottomCenter.png);}
.cboxIE6 #cboxBottomRight{background:url(../images/ie6/borderBottomRight.png);}
.cboxIE6 #cboxMiddleLeft{background:url(../images/ie6/borderMiddleLeft.png);}
.cboxIE6 #cboxMiddleRight{background:url(../images/ie6/borderMiddleRight.png);}

.cboxIE6 #cboxTopLeft,
.cboxIE6 #cboxTopCenter,
.cboxIE6 #cboxTopRight,
.cboxIE6 #cboxBottomLeft,
.cboxIE6 #cboxBottomCenter,
.cboxIE6 #cboxBottomRight,
.cboxIE6 #cboxMiddleLeft,
.cboxIE6 #cboxMiddleRight {
    _behavior: expression(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')");
}