/*-------------------------- Reset  ---------------------------------------------------------------- */

@import "reset.css";
@import "fonts-min.css";

* {
margin: 0;
padding: 0;
}


body {
	background-color: #eee;
	font-family: Lucida Grande, Verdana, Sans-serif;
	font-size: 14px;
color: #4F5155;
}

a {
color: #003399;
       background-color: transparent;
       font-weight: normal;
}

h1 { color: #444;  font-weight: bold; margin: 24px 0 2px 0; padding: 5px 0 6px 0; }

h2 { color: #444; margin: 30px 0 50px 0!important; border-bottom: 1px solid #999; font-size: 121%; padding-bottom: 20px; }
h3 { color: #444; margin: 10px 0 5px 0!important; border-bottom: 1px solid #999; font-size: 112%; padding-bottom: 10px; }

code {
	font-family: Monaco, Verdana, Sans-serif;
	font-size: 12px;
	background-color: #f9f9f9;
border: 1px solid #D0D0D0;
color: #002166;
display: block;
margin: 14px 0 14px 0;
padding: 12px 10px 12px 10px;
}



label { display: block; font-weight: bold; margin: 10px 0 2px 0;}


.colorwell { border: 1px solid #ccc; width: 6em; text-align: center; cursor: pointer; }
body .colorwell-selected { border: 1px solid #000; font-weight: bold; } 

p { margin: 10px 0; }


/* main layout */
.container { width: 924px; margin: 0 auto;  }


#header { padding-top: 20px; border-bottom: 4px solid #006699; background: #fff; }
#logo h1 {height: 86px; width: 200px; background: url(/images/site/artweet.gif) no-repeat; font-size: 0!important; }
#header #menu li a { color: #444; display: block; float: right; padding: 6px 10px; font-size: 121%; border: 1px solid #006699; border-bottom: 0px; margin: 0 6px; text-decoration: none; }
#header #menu li a:hover { background: #006699; color #fff; border-color: #fff; }

#strapline { text-align: right; margin: 20px 0; font-family: georgia, times, serif; font-style: italic; }

#footer { border-top: 1px solid #ccc; clear: both; margin-top: 40px; }

/* welcome pge */
#templates li { float: left; margin: 20px; display: block;}

/* Form */
#form { width: 924px; }
#form h3 { margin-top: 30px!important; }
#data { margin-left: 500px; border: 1px solid #fff; }
#previewBox { width: 400px; float: left; padding-right: 24px; border: 1px solid #fff;}

/* Preview  */
#PREVIEW { text-align: center;  border: 1px solid #ccc; }
#twitterImage { float: right;}
#PREVIEW_BODY { padding: 10px 0 10px 10px; height: 200px; }
#PREVIEW_IMAGE img { margin: 0 0 10px 0; border: 1px solid #000; }
#PREVIEW_BOX { border: 1px solid #000; width: 150px; padding: 10px; } 

/* Colors */
.colorBox { width: 200px; float: left; }
.colorBox input { padding: 4px 10px; }

/* output */
#backgroundPreview { overflow: hidden; }

/* general styles */
.error, .warning { background: #ffd; border: 1px solid #c66; padding: 10px; margin: 10px 0; }
.clear { clear: both; }
input.submit { text-transform: capitalize; overflow: visible; font-size: 1.4em; font-weight: bold; text-align: center; border: 1px outset #ddd; padding: 10px 18px; margin: 8px 0; background-color: #FCFCFC; background: url(http://aw2.artwebdata.com/img/site/40-fade.gif); background-repeat: repeat-x; color: #333; }