/*

"It's 106 miles to Chicago, we got a full tank of gas, half a pack of cigarettes, it's dark, and we're wearing sunglasses."

filename: main.css
author: Matthew Lodge
email: matt@palmiero-design.co.uk
company: Palmiero Design
copyright: 2009 Palmiero Design Ltd
date: Thursday 5th March

*/

@import url(reset.css);
@import url(mediabox.css);
@import url(formcheck.css);

/*-- general --*/
html, body {
height:100%;
}

body {
color:#333333;
font-family:Arial, Helvetica, sans-serif;
font-size:1em;

background:#bcbdc0 url(../imgs/bck_body.png) top repeat-x;
}

p, table {
font-size:0.75em;
line-height:1.125em;
margin:0em 0em 1em 0em;
}

ul, dd {
font-size:0.75em;
line-height:1.125em;
}

ul ul {
font-size:1em;
}

em {
font-style:italic;
}

strong {
font-weight:bold;
}

hr {
border-top:none;
border-left:none;
border-right:none;
border-bottom:1px dotted #333333;
height:1px;
padding:0px;
}

img, a img {
color:#333333;
font-size:0.75em;
}

/*-- links --*/
a:link {
border-bottom:1px dotted;
color:#003F9A;
text-decoration:none;
}

a:visited {
border-bottom:1px dotted;
color:#EC884B;
text-decoration:none;
}

a:hover {
border-bottom:1px dotted;
color:#FF0000;
}

.package a:link, .package a:visited {
border:none;
color:#ffffff;
}

#footer a:link {
color:#82CDF1;
}

#footer a:hover {
color:#FF0000;
}

#bannerspace a, #header a {
border:none;
}

h4 a:link, h4 a:visited {
border:none;
color:#ffffff;
}

#three-examples a:link, #three-examples a:visited {
border:none;
}

/*-- navigation --*/
#nav-main {
background:#333333; 
height:32px;
list-style:none; 
margin:0px 0px 29px 0px;
position:relative; 
z-index:100;
width:800px;
}

#nav-main li {
float:left;
width:135px;
position:relative;
}

#nav-main a:link, #nav-main a:visited {
border-bottom:none;
border-right:1px dotted #ffffff;
color:#ffffff; 
font-size:1.167em;
 
display:block;
height:15px;
padding:8px 0px 9px 10px;
width:125px;  
}

#nav-main #n_contact {
border-right:none;
}

#nav-main a:hover,
#home #n_home,
#signingup #n_signup,
#templates #n_emailtemp,
#pricing #n_pricing,
#contact #n_contact {
color:#7FD8FF;
text-decoration:none;
}


/*-- h1 --*/
h1 {
bottom:25px;
position:absolute;
}

h1 span {
display:none;
}

h1 a {
background:url(../imgs/h1_logo.gif) no-repeat;
display:block;
height:65px;
width:265px;
}

h1 a:hover {
border-bottom:none;
}

/*-- h2 --*/
h2 {
color:#003F9A;
font-size:1.313em;

margin:0em 0em .75em 0em;
}

.h2 {
color:#003F9A;
font-size:1.313em;
clear:left;

margin:1em 0em;
}

.rightside h2 {
color:#003F9A;
font-size:1.313em;

margin:0em 0em .75em 0em;
}

#main-content h2, #main-packages h2, .portfolio #three-examples h2 {
border-bottom:1px dotted #333333;
margin:0em 0em .50em 0em;
padding:0em 0em .25em 0em;
}

#form h2, .h2 {
font-weight:bold;
}

.packages .rightside h2 {
border-bottom:none;
color:#D51920;
font-size:1.313em;
font-weight:bold;

margin:0em;
padding:0em;
}

/*-- h3 --*/
h3 {
font-size:2.813em;
font-weight:bold;
margin-bottom:0.25em;
}

h3 span {
display:block;
font-size:0.5em;
margin-top:-45px;
}

#custom h3, #bespoke h3 {
font-size:1.563em;
}

#pay h3 span {
margin-left:89px;
}

#fiver h3 span, #temp h3 span {
margin-left:58px;
}

/*-- h4 --*/
h4 {
color:#00ABEC;
font-size:1.313em;
margin-bottom:0.5em;
}

/*-- h5 --*/
h5 {
color:#00ABEC;
font-size:1.25em;

margin:0em 0em 0.25em 0em;
}

#three-examples h5 {
clear:both;
display:block;
margin-bottom:2px;
width:800px;
}

/*-- typo --*/
.intro {
font-size:1em;
}

.fourteen {
font-size:0.875em;
}

.twentyone {
font-size:1.313em;
}

.alignleft {
float:left;
}

.alignright {
float:right;
}

.blue {
color:#003F9A;
}

.lblue {
color:#00ABEC;
}

/*--- tables ---*/
.column-01 table, .column-02 table {
width:100%;
}

.column-01 th, .column-02 th {
font-weight:bold;
padding:5px 10px 5px 0px;
vertical-align:top;
}

.column-01 th {
width:140px;
}

.column-02 th {
width:75px;
}

.column-01 td, .column-02 td {
vertical-align:top;
background:#f1f1f1;
border-bottom:2px solid #ffffff;
padding:5px;
width:auto;
}

/*-- layout --*/
#wrap {
background:#ffffff;
height:auto;
margin:0px auto;
overflow:auto;
padding:0px 25px 0px;
position:relative;
width:800px;
}

#header {
background:#FFFFFF url(../imgs/bck_header.png) repeat-x;
height:152px;
left:0px;
margin:0px 0px 10px -25px;
position:relative;
top:0px;
width:850px;
}

.article {
background:#ffffff;
float:left;
display:block;
height:auto;
margin:0px 0px 15px 0px;
position:relative;
width:800px;
}

#footer {
border-top:2px solid #4D4D4D;
color:#ffffff;
font-size:0.785em;

background:#262626;
bottom:0px;
clear:both;
display:block;
height:auto;
margin:0px 0px 0px -25px;
padding:25px;
position:relative;
width:800px;
}

/*-- header --*/
#subtitle {
color:#ffffff;
font-size:0.938em;

bottom:22px;
position:absolute;
right:190px;
text-align:right;
width:200px;
}

#signup {
background:url(../imgs/sign-up.gif) no-repeat;
display:block;
float:right;
height:125px;
margin-top:31px;
width:185px;
}

/*-- main-content --*/
#main-content {
overflow:hidden;
}

#main-content a:link, #main-content a:visited {
border:none;
}

#main-content .worth-star {
border:none;
}

#main-content .leftside {
border-right:1px dotted #333333;
float:left;
margin:0px 0px -10000px 0px;
padding:0px 11px 10015px 0px;
width:528px;
}

#main-content .rightside {
float:left;
margin:0px 0px -10000px 0px;
padding:0px 0px 10015px 12px; 
width:248px;
}

#pricing #nomargin {
margin-bottom:0em;
}

#pricing #main-content .leftside, #templates #main-content .leftside, #signingup #main-content .leftside {
border:none;
float:left;
margin:0px 0px -10000px 0px;
padding:0px 12px 10015px 0px;
width:528px;
}

#pricing #main-content .rightside, #templates #main-content .rightside, #signingup #main-content .rightside {
float:left;
margin:0px 0px -10000px 0px;
padding:0px 0px 10015px 0px; 
width:260px;
}

#cards {
margin-right:10px;
margin-top:-3px;
}

/*-- main-welcome --*/
.column {
border-top:1px dotted #333333;
float:left;
margin:0px 10px 0px 0px;
padding:10px 0px 0px 0px;
width:260px;
}

/*-- main-packages --*/
.package {
background:url(../imgs/block-grad.png) repeat-x;
color:#ffffff;
display:block;
float:left;
height:132px;
margin:0px 10px 10px 0px;
padding:20px;
position:relative;
width:220px;
}

.last {
margin-right:0px;
}

.block {
display:block;
height:172px;
margin:-20px 0px 0px -20px;
position:absolute;
width:260px;
}

/*-- three examples --*/
#three-examples ul {
border-top:1px dotted #333333;
overflow:visible;
margin-top:-12px;
padding:10px 0px 0px;
}

#templates #three-examples ul {
border:none;
}

#three-examples li {
float:left;
margin:0px 10px 20px 0px;
}

#home #three-examples li {
margin-bottom:0px;
}

#three-examples li img {
border:4px solid #CCCCCC;
}

#three-examples li.last {
float:none;
margin-right:0px;
}

/*-- bannerspace --*/
#bannerspace {
border-top:1px dotted #333333;
padding:5px 0px 0px 0px;
}

#bannerspace a:hover {
border-bottom:none;
}

#bannerspace .terms {
bottom:5px;
cursor:pointer;
display:block;
height:21px;
position:absolute;
right:5px;
width:121px;
}

#bannerspace .terms:hover {
border:2px solid #003F9A;
background:rgba(241, 93, 34, 0.2);
}

/*-- portfolio --*/
#main-folio img {
border:1px solid #cccccc;
margin:0em 0em 1em 0em;
}

#folio-selection {
margin:0em 0em 2em 0em;
}

#folio-selection li {
border-bottom:1px dotted #333333;

padding:3px 0px;
}

/*-- contact --*/
#map {
border:1px solid #cccccc;
display:block;
float:left;
height:248px;
margin:0px 15px 0px 0px;
width:518px;
}

#contactform, #contactform ul {
margin:0px;
padding:0px;
width:528px;
}

#contactform li {
clear:none;
display:block;
float:left;
margin:0px 15px 0px 0px;
width:254px;
}

#contactform .last {
margin:0px 0px 0px 0px;
}

#contactform textarea {
width:518px;
}

/*-- faq --*/
#main-content ul.column-01 {
float:left;
margin:0px 8px 0px 0px;
padding:0px;
position:relative;
width:260px;
}

#main-content ul.column-02 {
float:left;
margin:0px;
padding:0px;
position:relative;
width:260px;
}

/*-- sign up form --*/
form#register {
clear:both;
display:block;
height:auto;
overflow:auto;
padding:0px 0px 20px 0px;
position:relative;
}

form#register li {
float:left;
margin-right:10px;
width:254px;
}

form#register li.checkbox {
margin-left:-5px;
margin-top:10px;
width:300px;
}

form#register li.checkbox label {
display:block;
margin-left:25px;
margin-top:-17px;
position:relative;
}

form#register li.submit {
float:right;
margin-top:10px;
text-align:right;
width:200px;
}

#fname, #sname, #email, #phone, #business {
background:#E6E6E6;
border:none;
margin:2px 0px 10px 0px;
padding:3px 2px;
width:250px;
}

#message {
background:#E6E6E6;
border:none;
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
height:200px;
margin:2px 0px 10px 0px;
padding:3px 2px;
}

#template {
margin:2px 0px 10px 0px;
width:254px;
}

#submit, #signuplink {
background:url(../imgs/btn-signup.gif) -96px 0px no-repeat;
border:none;
cursor:pointer;
display: inline-block;
height:24px;
width:87px;
}

#pricing #signuplink {
}

#submit:hover, #signuplink:hover {
background:url(../imgs/btn-signup.gif) 0px 0px no-repeat;
}

form#contactform li.send {
text-align:right;
width:520px;
}

#send {
background:url(../imgs/btn-send.gif) -96px 0px no-repeat;
border:none;
cursor:pointer;
display:inline-block;
height:24px;
position:relative;
width:87px;
}

#send:hover{
background:url(../imgs/btn-send.gif) 0px 0px no-repeat;
}

#log {
clear:both;
display:block;
height:auto;
padding-top:20px;
text-align:center;
}

p.success {
background:#CCFFCC;
border:2px solid #00CC00;
padding:5px 10px;
}

p.error {
background:#FFCCCC;
border:2px solid #990000;
padding:5px 10px;
}

/*-- login --*/
#login {
bottom:65px;
position:absolute;
right:180px;
}

.legend {
color:#ffffff;
font-size:0.75em;
margin:1em 0em 0em 0em;
width:auto;
}

form#login li {
float:left;
margin-right:5px;
}

#username, #password {
background:#E6E6E6;
border:none;
margin:2px 0px 10px 0px;
padding:3px 2px;
width:116px;
}

#go {
background:none;
border:none;
color:#ffffff;
cursor:pointer;
font-weight:bold;
font-size:1em;
padding:4px 0px 0px; 
}

#go:hover {
color:#FF0000;
}

/* "Hit it! */