#greetingsProcess {
	width: 733px;
	float: left;
	padding-top: 20px;
	position: relative;
}

#greetingsProcessFront {
	float: left;
	padding-top: 20px;
}

#compositionContainer {
	
}

#smallPictures {
	width: 426px;
	float: left;
	position: relative;
}

#smallPicturesNav {
	padding-left: 20px;
}

#smallPicturesNav a.navOpen {
	background: url(greetings/picturesNavOpen.gif) no-repeat center top;
}

#smallPicturesNav a {
	background: url(greetings/picturesNav.gif) no-repeat center bottom;
}

.smallPicturesTop {
	clear: left;
	width: 426px;
	background: url(greetings/smallPicturesTop.gif) no-repeat center top;
	margin-bottom: 5px;
	padding-top: 18px;
}

#smallPictures p {
	height: 50px;
	padding: 0px 0px 0px 20px;
	margin: 0px;
}

a.smallPicturesheader {
	display: block;
	float: left;
	padding: 9px 0 5px;
	color: #fff;
	font-size: 1.1em;
	font-weight: bold;
	width: 113px;
	text-align: center;
}


.smallPicturesBg {
	width: 406px;
	padding: 0px 10px;
	background: url(greetings/smallPicturesBg.gif) repeat-y center;
	position: relative;
	height: 400px;
	overflow: hidden;
}

.scrollbar-vert{
	background: url(greetings/scrollBar.gif) repeat-y top left;
	/*height: 400px;*/
	width: 17px;
	padding-left: 2px;
	position: absolute;
	top: 46px;
	left: 400px;
	z-index: 700;
}

.handle-vert {
	background: url(greetings/handleBg.gif) repeat-y top left;
	width: 14px;
}

.smallPicturesBottom {
	width: 426px;
	height: 25px;
	background: url(greetings/smallPicturesBottom.gif) no-repeat center bottom;
}

/* kiinni */
.smallPicturesLink {
	width: 426px;
	height: 40px;
	background: url(greetings/smallPicturesLink.gif) no-repeat center top;
}

.smallPicturesLink .smallPicturesBg, .smallPicturesLink .smallPicturesBottom {
	display: none;
}


#composition {
	width: 260px;
	float: right;
	height: 525px;
	padding-right: 25px;
}

.compositionTop {
	width: 240px;
	padding-left: 20px;
	height: 50px;
	font-weight: bold;
	line-height: 32px;
	background: url(greetings/compositionTop.gif) no-repeat center top;
}

.compositionTop a {
	color: #fff;
}

.compositionTop a:hover {
	text-decoration: none;
}

.compositionBg {
	width: 260px;
	height: 450px;
	background: url(greetings/compositionBg.gif) repeat-y center;
	position: relative;
}

.compositionBottom {
	width: 260px;
    height: 25px;
	background: url(greetings/compositionBottom.gif) no-repeat center bottom;
}


#composition .compositionBg img {
	position: absolute;
	left: 0px;
	top: 0px;
}



/* @author Timo Partti */

#stateName {
	position: relative;
	top: -40px;
	margin-bottom: -40px;
	margin-left: -20px;
	left: 0px;
	float: left;
	width: 600px;
	z-index: 1000;
}

#stateName img {
	float: left;
	display: inline;
}

#stateName input {
	margin: 10px 0 0 30px;
	float: left;
}

.wideBoxContainer {
	width: 296px;
	float: left;
	padding: 0 20px 30px 0;
}

.wideBoxTop {
	width: 281px;
	background: url(greetings/wideBoxTop.gif) no-repeat left top;
	padding: 10px 0 20px 15px;
}

.fbTopThick {
	background: url(greetings/426wideBoxTop.gif) no-repeat left top;
	height: 19px;
	width: 411px;
	padding: 10px 0 20px 15px;	
}

.wideBoxBg {
	width: 266px;
	padding: 0 15px 0 15px;
	background: url(greetings/wideBoxBg.gif) repeat-y left bottom;
}

.wideBoxBottom {
	width: 296px;
	background: url(greetings/wideBoxBottom.gif) no-repeat left bottom;
	height: 21px;
}

label {
	padding: 3px 10px 3px 3px;
	padding-left: 20px;
	background-position: 8px center;
	background-repeat: no-repeat;
	clear: both;
	cursor: pointer;
}

#accept {
	padding: 3px 3px 3px 3px;
	padding-left: 25px;
	background-position: 0px center;
	background-repeat: no-repeat;
	cursor: pointer;
}

.selected {
	background: url(greetings/radioOn.jpg) no-repeat left top;
}

.unselected {
	background: url(greetings/radioOff.jpg) no-repeat left top;
}

.checked{
	background: url(greetings/checkOn.jpg) no-repeat left top;
}
.unchecked{
	background: url(greetings/checkOff.jpg) no-repeat left top;
}

.textInput {
	background-color: #00265b !important;
	border: 1px #003271 solid !important;
	color: #fff;
	font: normal 1em Tahoma, Arial, sans-serif;
}

.wideBoxBg textarea {
	background-color: #00265b;
	border: 1px #003271 solid;
	width: 265px;
	color: #fff;
	font: normal 1em Tahoma, Arial, sans-serif;
}

#errorBg {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 502;
}

#errorBlack {
	position: absolute;
	top: 0;
	left: 0;
	height: 1600px;
	width: 100%;
	z-index: 501;
  background-color: #000;
  -moz-opacity: 0.50;
  opacity: 0.50;
}

html>body #errorBlack {
	position: fixed;
}

#error {
	padding: 10px 20px 20px 70px;
	width: 200px;
	height: 130px;
	margin: 0 auto;
	background: url(greetings/errorBox.gif) no-repeat left top;
	color: #000;
	z-index: 600;
}



/*
Greetings Small Cart
==================================================*/
#greetingsSmallCart {
	width: 226px;
	float: right;
}

#greetingsSmallCart h1 {
	font-size: 17px;
	background: url(greetings/scHeader.gif) no-repeat left bottom;
	font-weight: bold;
	padding: 10px 20px	
}

#greetingsSmallCart div {
	padding: 10px 15px;
}

#greetingsSmallCart h2 {
	font-weight: normal;
	font-family: Tahoma, Arial, Serif;
	font-size: 1em;
	background: url(greetings/scHeader2.gif) no-repeat left bottom;
	width: 165px;
	padding: 5px 15px;
}

#greetingsSmallCart p {
	padding: 6px 18px;
}

#greetingsSmallCart img {
	vertical-align: middle;
	padding-right: 5px;
}



/*
Valitse toimitustapa
==================================================*/
#deliveryContent {
	width: 630px;
	padding-right: 30px;
	float: left;
	font: bold 1.4em Arial, Helvetica, Tahoma, Serif;
	font-style: italic;
}

#greetingsProcessFront .wideBoxContainer {
	clear: right;
	float: right;
	padding-right: 0;
}


/*
Valitse teema
==================================================*/
.themeContainer {
	width: 170px;
	text-align: center;
	float: left;
	height: 150px;
	padding: 12px 9px 0 0;
}

.themeContainer a:hover {
	text-decoration: none;
}

.themeContainer a {
	color: #fff;
}

.themeContainer a img {
	border: 0;
	padding-bottom: 5px;
}

#greetingsProcess .open {
	color: #fff;
	background-color: #F56703;
}


/*
Valitse ilmapallotervehdys
==================================================*/
.compositionContainer {
	float: left;
	height: 460px;
	width: 152px;
	background: url(greetings/ccBackground.gif) no-repeat left top;
	padding-right: 15px;
	position: relative;
}

.compositionContainer a:hover {
	text-decoration: none;
}

.ccName {
	padding: 8px 0 5px 20px;
	font-size: 1.1em;
}

.ccImage a {
	display: block;
	height: 390px;
	overflow: hidden;
	margin: 20px 1px 0 1px;
	background-repeat: no-repeat;
	background-position: top left;
}

.compositionContainer a img {
	border: 0;	
	vertical-align: bottom;
}

.ccSelect {
	margin: 0 0 0 22px;
	height: 51px;
}

.ccPrice {
	display: block;
	position: absolute;
	z-index: 50;
	top: 280px;
	text-align: center;
	right: 30px;
	width: 72px;
	height: 46px;
	padding-top: 26px;
	color: #fff;
	font: normal 1.6em Arial, Tahoma, Helvetica, Serif;
	background: url(greetings/ccPriceBg.png) no-repeat left top;
}


/*
Tervehdyksen muokkaaminen
==================================================*/
.btnContinue {
	background: url(greetings/btnContinue.jpg) transparent no-repeat left top;
	width: 104px;
	height: 41px;
	border: 0;
	cursor: pointer;
	float: right;
	margin-right: 20px;
}

.btnContinuePNG {
	/*background: url(greetings/btnContinue.jpg) transparent no-repeat left top;*/
	width: 104px;
	height: 41px;
	border: 0;
	cursor: pointer;
}

.btnConfirm {
	float: right;
	width: 126px;
	height: 41px;
	border: 0;
	cursor: pointer;
}

.btnBack {
	/*background: url(greetings/btnBack.png) no-repeat left top;*/
	width: 104px;
	height: 41px;
	border: 0;
	cursor: pointer;
	position: relative;
	z-index: 300;
}

.thumbBg {
	float: left;
	width: 125px;
	height: 109px;
	background: url(greetings/thumbBg.jpg) no-repeat left top;
	text-align: center;
	margin: 3px 2px;
}

.thumbBg a img {
  position: relative;
  top: 4px;
	overflow: hidden;
	text-align: center;
	width: 113px;
	height: 100px;
	outline: none;
}

#mainBalloon {
	z-index: 201;
}

#subBalloon {
	z-index: 200;
}

#base {
	z-index: 202;
}



/*
Kortin muokkaaminen
==================================================*/
#greetingsCard {
	padding: 60px 70px 60px 60px;
	width: 266px;
	height: 162px;
	position: absolute;
	left: 5px;
	top: 17px;
	background: url(greetings/card.png) no-repeat left top;
}

.wideBoxCard {
	float: right;
}

.cardTextInput {
	margin: 5px 0;
	text-align: center;
	font-family: Sans Serif, Serif;
	border: 1px #e5e5e5 solid !important;
	background: #fff !important;
	font-size: 14px;
	color: #d0d0d0;
}

.titleText {
	font-size: 21px;
}

.senderText {
	font-size: 18px;
}

/*
Lähetyksen tiedot
==================================================*/
.calDay {
	float: left;
	width: 102px;
	height: 80px;
	background: url(greetings/calDayBg.gif) no-repeat left top;
	margin: 2px 8px 2px -6px;
}

.calHeader {
	font-weight: bold;
	padding: 2px 10px 3px 10px;
}

.calDay a {
	display: block;
	width: 80px;
	padding: 2px 10px 2px 10px;
	margin: 0 1px;
	border-top: 1px #02316f solid;
}

.calText {
	padding: 20px 10px;
}

.whiteLink {
	color: #fff;
}



/*
Kirjautuminen
==================================================*/
#registerDiv {
	position: absolute;
	width: 426px;
	top: 20px; /* 70 */
	left: 300px; /* 140 */
}
.error {
	color: #f00;
}
#passwordDiv {
	position: absolute;
	width: 426px;
	top: 170px;
	left: 140px;
}

.fbTop {
	background: url(greetings/fbTop.gif) no-repeat left top;
	height: 22px;
	width: 426px;
}

.fbBottom {
	clear: both;
	background: url(greetings/fbBottom.gif) no-repeat left top;
	height: 22px;
	width: 426px;
}

.fbBg {
	background: url(greetings/fbBg.gif) repeat-y left top;
	width: 386px;
	padding: 0 20px;
}

#registerDiv .textInput {
	width: 150px;
}

#homeFields {
	display: none;
}
#officeFields {
	display: none;
}
#hospitalFields {
	display: none;
}

/*
Maksaminen
===================================================*/
#greetingsProcessPayment {
	float: left;
	padding: 20px 0 30px 0;
	position: relative;
}

.extraWideBoxContainer {
	width: 539px;
	float: left;
	padding: 0 20px 0px 0;
}

.extraWideBoxTop {
	width: 524px;
	background: url(greetings/extraWideBoxTop.gif) no-repeat left top;
	padding: 10px 0 20px 15px;
}

.extraWideBoxBg {
	width: 509px;
	padding: 0 15px 0 15px;
	background: url(greetings/extraWideBoxBg.gif) repeat-y left bottom;
}

.extraWideBoxBottom {
	width: 539px;
	background: url(greetings/extraWideBoxBottom.gif) no-repeat left bottom;
	height: 21px;
}

#detailsComposition {
	width: 260px;
	float: right;
}

#deliveryDetails {
	width: 240px;
	float: left;
	padding-bottom: 10px;
	background: url(greetings/detailsValueBottom.gif) no-repeat left bottom;
}

#detailsComposition #composition {
	float: none;
}

#detailsComposition .compositionTop,
#detailsComposition .compositionBg,
#detailsComposition .compositionBottom {
	background: none;
}

#detailsComposition .compositionTop a {
	color: #00194D
}

#greetingsCardPayment {
	padding: 60px 70px 60px 60px;
	width: 266px;
	height: 162px;
	/*position: absolute;
	left: 5px;
	top: 17px;*/
	float: left;
	background: url(greetings/card.png) no-repeat left top;
}

#greetingsCardPayment DIV {
	margin: 5px 0;
	text-align: center;
	font-family: Sans Serif, Serif;
	font-size: 14px;
	color: #000;
}

#greetingsCardPayment #cardText {
	height: 90px;
}

#greetingsCardPayment #cardTitle {
	font-size: 21px;
}

#greetingsCardPayment #cardSender {
	font-size: 18px;
}

.detailsPayment {

}

.detailsTitle {
	padding: 5px 13px 5px 13px;
	font-size: 12px;
	font-weight: bold;
	width: 205px;
	background: url(greetings/detailsTitle.gif) no-repeat left top;
}

.topTitle {
	background: url(greetings/detailsTitleTop.gif) no-repeat left top;
}

.detailsValue {
	padding: 4px 13px 9px 23px;
	width: 195px;
	background: url(greetings/detailsValue.gif) no-repeat left top;
}

.bottomValue {
	background: url(greetings/detailsValueBottom.gif) no-repeat left bottom;
}

#comingSoon {
	position: absolute;
	top: 558px;
	left: 160px;
}