/*

----- Domino's Valentine's Viral screen stylesheet -----
----- Fuse Digital 2008 -----

----- enjoy. -----

----- Background Colours -----

	Main pink: #fcdfeb

----- Text Colours -----

	Main text magenta: #c6183e
	Main buttons magenta: #ed1846

----- Site Dimensions -----

	Width: 744px
	
	Main column: 550px
	Secondary column: 194px
	
	Main column usable: 530px
	Secondary column usable: 175px

*/

* {
	margin: 0; /* global reset of margin and padding */
	padding: 0;
	outline: none;
}

/* ----- tags ----- */
body {
	background: #fff;
	text-align: center; /* centre in IE */
	font: small Arial, Helvetica, sans-serif;
	color: #c6183e;
	padding: 30px 0 20px 0;
}
body#message {
	background: #fcdfeb;
}
ul {
	list-style: none; /* no bullets on lists by default */
}
a {
	color: #c6183e;
}
a:hover {
	color: #f00;
}
a img {
	border: none;
}

/* ----- universal styles ----- */
.hide {
	display: none;
}

/* ----- containers ----- */
#frame {
	width: 744px;
	margin: 0 auto; /* centre in real browsers */
}
#message #frame {
	width: 900px;
}

/* ------ columns ------ */
#col-main {
	width: 550px;
	float: left;
}
#col-secondary {
	width: 169px;
	height: 494px;
	padding: 14px 15px 0 10px;
	float: right;
	background: url(../images/secondary_bg.gif) 0 0 no-repeat;
}
#preview #col-main {
	width: 744px;
}

/* ------ masthead ------ */
#masthead {
	width: 550px;
	height: 130px;
	background: url(../images/masthead_bg.gif) 0 0 no-repeat;
	position: relative;
}
h1 {
	position: absolute;
	left: 205px;
	top: -14px;
	z-index: 10;
	width: 144px;
	height: 144px;
}
h1 a {
	display: block;
	width: 144px;
	height: 144px;
	text-indent: -1000em;
	background: url(../images/dominos_logo.gif) 0 0 no-repeat;
}

/* ------ footer ------ */
#footer {
	width: 504px;
	clear: both;
	float: left;
	padding: 124px 23px 20px 23px;
	background: url(../images/footer_bg.jpg) 0 0 no-repeat;
	text-align: left;
}
#footer li {
	float: left;
	margin-right: 4px;
}
#footer li a {
	font-weight: bold;
	font-size: 0.85em;
	text-decoration: none;
}
#footer li a:hover {
	color: #003d7a;
}
#preview #footer {
	padding-top: 0;
	background: none;
}

/* ------ main content ------ */
#content {
	width: 490px;
	min-height: 214px;
	height: auto !important;
	height: 214px;
	float: left;
	padding: 20px 28px 20px 32px !important;
	padding-bottom: 0;
	background: url(../images/main_bg_content.gif) 0 0 repeat-y;
	text-align: left;
}
#home.dominos #content {
	height: 235px;
}
#confirmation.tell-friend #content {
	height: 380px;
}
#preview #content {
	width: 714px;
	height: 470px !important;
	padding: 15px !important;
	background: url(../images/main_bg_preview.gif) 0 0 no-repeat;	
}
#confirmation #content {
	padding-bottom: 0 !important;
	padding-bottom: 10px;
}
#content.copy h3, #content.copy p {
	margin-bottom: 15px;
}
.col-row, .col-row-2 {
	clear: both;
	float: left;
	width: 490px;
	background: url(../images/v_div.gif) 50% 0 repeat-y;
	margin-bottom: 20px;
}
#home .col-row {
	margin-bottom: 0;
}
#options .col-row {
	width: 680px;
	margin-bottom: 0;
	background-position: 245px 0;
}
.demo #options .col-row {
	background-position: 50% 0;
}
.col-row-2 {
	background-image: none;
}
.sub-left {
	width: 235px;
	float: left;
	padding-right: 10px;
}
.sub-right {
	width: 235px;
	float: right;
	padding-left: 10px;
}
#options-top {
	clear: both;
	float: left;
	width: 744px;
	height: 10px;
	background: url(../images/top_bg_options.gif) 0 0 no-repeat;
}
#options {
	float: left;
	width: 680px;
	padding: 19px 32px 29px 32px;
	background: url(../images/bottom_bg_options.gif) 0 100% no-repeat;
	text-align: left;
}
#options .sub-right {
	width: 424px;
}
.demo #options .sub-left {
	width: 330px;
}
.demo #options .sub-right {
	width: 330px;
}

/* ------ headings ------ */
h2 {
	height: 21px;
	margin-bottom: 20px;
	text-indent: -1000em;
	background-position: 0 0;
	background-repeat: no-repeat;
}
#home h2 {
	width: 490px;
	height: 123px;
	background-image: url(../images/home_title.gif);
}
#home.dominos h2 {
	background-image: url(../images/dominos_title.gif);
}
#options h2 {
	height: 16px;
	margin-bottom: 11px !important;
	margin-bottom: 0;
}
h2.personalise-your-message {
	width: 393px;
	background-image: url(../images/headings/personalise_your_message.gif);
}
h2.send-your-message {
	width: 325px;
	background-image: url(../images/headings/send_your_message.gif);
}
h2.preview-your-message {
	width: 184px;
	background-image: url(../images/headings/preview_your_message.gif);
}
h2.seen-enough {
	width: 109px;
	background-image: url(../images/headings/seen_enough.gif);
}
h2.there-she-goes {
	width: 202px;
	margin-bottom: 10px;
	background-image: url(../images/headings/there_she_goes.gif);
}
h2.terms-and-conditions {
	width: 201px;
	margin-bottom: 10px;
	background-image: url(../images/headings/terms_and_conditions.gif);
}
h2.privacy {
	width: 76px;
	margin-bottom: 10px;
	background-image: url(../images/headings/privacy.gif);
}
h2.tell-a-friend {
	width: 120px;
	margin-bottom: 10px;
	background-image: url(../images/headings/tell_a_friend.gif);
}
#home h3 {
	float: left;
	height: 16px;
	margin-bottom: 12px;
	text-indent: -1000em;
	background-position: 0 0;
	background-repeat: no-repeat;
}
h3.create-your-message {
	width: 175px;
	background-image: url(../images/headings/create_your_message.gif);
}
h3.what-is-this, h2.what-is-this {
	width: 107px;
	background-image: url(../images/headings/what_is_this.gif);
}

/* ------ buttons ------ */
.button {
	float: left;
	height: 40px;
}
.button-2, .button-3 {
	clear: both;
	float: left;
	height: 40px;
	margin-left: 110px;
	display: inline;
}
.button-3 {
	margin-top: 10px;
}
.button a, .button-2 a, .button-3 a {
	display: block;
	height: 40px;
	text-indent: -1000em;
	background-position: 0 0;
	background-repeat: no-repeat;
}
.button a:hover, .button-2 a:hover, .button-3 a:hover {
	background-position: 0 -200px;
}
.lets-get-started {
	width: 215px;
	background-image: url(../images/buttons/lets_get_started.gif);
}
.show-me {
	width: 215px;
	background-image: url(../images/buttons/show_me.gif);
}
.lets-continue {
	width: 270px;
	background-image: url(../images/buttons/lets_continue.gif);
}
.send-my-message {
	width: 270px;
	background-image: url(../images/buttons/send_my_message.gif);
}
.make-changes {
	width: 160px;
	margin-left: 15px;
	background-image: url(../images/buttons/make_changes.gif);
}
#options .make-changes {
	margin-left: 10px;
}
.play-now {
	width: 215px;
	background-image: url(../images/buttons/play_now.gif);
}
.replay-message {
	width: 215px;
	background-image: url(../images/buttons/replay_message.gif);
}
.lets-send-it {
	width: 254px;
	background-image: url(../images/buttons/lets_send_it.gif);
}
.send-another-message {
	width: 304px;
	margin-top: 15px;
	background-image: url(../images/buttons/send_another_message.gif);
}
.start-my-message {
	width: 304px;
	background-image: url(../images/buttons/start_my_message.gif);
}
.order-online {
	width: 270px;
	background-image: url(../images/buttons/order_online.gif);
}
.get-pizza-in {
	width: 270px;
	background-image: url(../images/buttons/get_pizza_in.gif);
}
.tell-a-friend {
	width: 270px;
	background-image: url(../images/buttons/tell_a_friend.gif);
}
.back-to-previous {
	width: 270px;
	background-image: url(../images/buttons/back_to_previous.gif);
}

/* ------ form items ------ */
label.title {
	font-weight: bold;
}
input {
	margin-top: 6px;
	color: #a4a4a4;
}
input.field {
	width: 230px;
}
input.field-2 {
	width: 150px;
}
.submit span.hover {
	background-position: 0 -200px;
}
.submit {
	width: 270px;
	height: 40px;
	line-height: 1em;
	margin: 0;
	position: relative;
}
.submit input {
	width: 270px;
	height: 40px;
	border: none;
	margin: 0;
	padding: 0;
	cursor: pointer;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	filter:alpha(opacity: 0);
	opacity: 0;
}
.submit span {
	display: block;
	width: 270px;
	height: 40px;
	background: url(../images/buttons/lets_continue.gif) 0 0 no-repeat;
	position: absolute;
	top: 0;
	left: 0;
}
#confirmation .submit, #tell-a-friend .submit {
	width: 117px;
	height: 22px;
}
#confirmation .submit input, #tell-a-friend .submit input {
	width: 117px;
	height: 22px;
}
#confirmation .submit span, #tell-a-friend .submit span {
	width: 117px;
	height: 22px;
	background-image: url(../images/buttons/let_them_know.gif);
}
.send {
	float: left;
	width: 270px;
}
.send .submit span {
	background-image: url(../images/buttons/send_my_message.gif);
}

/* ------ table items ------ */
table {
	clear: both;
	width: 490px;
	margin-bottom: 15px;
}
#confirmation table, #tell-a-friend table {
	margin-top: 30px;
}
td {
	width: 245px;
	vertical-align: top;
	padding-bottom: 5px;
}
td.full {
	width: 490px;
}
#confirmation td, #tell-a-friend td {
	vertical-align: bottom;
}

/* ------ context messages & errors ------ */
.contexterror {
	margin-top: 23px !important;
	margin-top: 25px;
	padding-left: 8px;
	background: url(../images/error_tip.gif) 0 50% no-repeat;
}
.contexterror span {
	display: block;
	padding: 1px 5px !important;
	padding: 0 5px;
	background: #ed1846;
	color: #fff;
	font-size: 0.95em;
	font-weight: bold;
}
#error {
	background: #ed1846 url(../images/warning_icon.gif) 5px 50% no-repeat;
	margin-bottom: 15px;
	padding: 4px 15px 4px 27px;
	color: #fff;
	font-weight: bold;
}