/*----------------------------------------------------------------------------
Name: ecards.css
Date: April 1, 2010
Function: Provides styles for Porktastic E-cards 
Author: Phil Birnie
-----------------------------------------------------------------------------*/

* {
margin: 0;
padding: 0;
}

/*Universals*/

body {
background-color: #333;
font-family: 'Verdana','Arial',sans-serif;
color: #fff;
font-size: 62.5%;
}

h2 {
padding-left: 1.8em;
text-indent: -1.0em;
font-size: 2.4em;
}

ul {
list-style: none;
padding-left: 2.0em;
}

li {
margin: 1.2em 0;
font-size: 1.2em;
}

textarea, input {
background-color: #fbf8c5;
}

a, a:visited, a:hover {
color: #fff;
}

p {
font-size: 1.6em;
}



/*Layout */

#main {
margin: 0 auto;
width: 650px;
}

#internal {
background: #fff;
}

#internal-send {
background: #555;
width: 500px; 
margin: 30px auto;
z-index: 0;
border: 3px solid black;
position: relative;
}

#dork {
width: 100px;
height: 89px;
background: transparent url('../img/dork.gif') top right no-repeat;
z-index: 2;
position: absolute; left: 420px; top: -34px;
}


#cardimg {
width: 433px;
height: 288px;
float: left;
border-left: 4px solid #000;
}

#cardinput {
position: relative;
width: 650px;
background: #06234f url('../img/2.gif') no-repeat top left;
border-top: 4px solid #000;
padding: 30px 0;
}

#card {
float: left;
width: 213px;
background: #fff url('../img/1.gif') no-repeat top left;
color: #333;
padding-top: 65px;
}

.clear {
clear: both;
}


/*Form Styles*/

#mailit input {
background-color: transparent;
position: absolute; right: 12px; bottom: 30px;
border: none;
width: 195px;
height: 93px; 
}


#cardinput ul {
width: 400px;
text-align: right;
}

#card input {
background-color: transparent;
}

#card li {
font-size: 1.2em;
}



/*Specialized Styles*/

#cardinput h2 {
padding-left: 110px;
}

#internal-send p {
padding: 1.0em 1.5em 0.5em 1.5em;
}

#internal-send h2 {
margin-top: 1.0em;
}

.error {
color: #900;
}

.error_list {
list-style-type: circle;
padding-left: 4.5em;
}


.javascript {
padding-bottom: 1.0em;
}

.javascript a, .javascript a:link {
color: #900;
text-decoration: underline;
font-weight: bolder;
}

.javascript a:hover {
color: #fff;
}

.good {
color: #090;
}

div#tipDiv {
    padding:4px;
    color:#000; font-size:11px; line-height:1.2;
    background-color:#fbf8c5; border:1px solid #667295; 
    width:250px; 
}

div#tipDiv p {
	font-size: 11px;
	padding-bottom: 4px;
	}
	
.preview {
width: 441px;
margin: 20px auto;
}

#internal-send form {
width: 50%;
float: left;
}

textarea[disabled] {
	color: #333;
	background-color: #ffd;
}