/*
 * Cascading Style Sheet (CSS 467) for CityEmail.ca
 * Author: Evgueni Naverniouk, evgueni@linuxmagic.com, http://www.linuxmagic.com/
 * COPYRIGHT INFORMATION - DO NOT REMOVE
 * Copyright (c) 2007 LinuxMagic Inc. All Rights Reserved.
 *
 * All style attributes in alpha-numeric order starting from 0
 */ 

  /* 
 * ========================================
 * Global Elements and General Styles
 * ========================================
 */
 
html, body{ 
	background: #FFF;
	color: #4B4B4B;
	font-family: Arial, Verdana, "Trebuchet MS", sans-serif;
	font-size: 12px;
	height: 100%;
	margin: 0px;
	padding: 0px;	
}
 
a:link,
a:visited,
a:active {
	border-bottom: 1px dotted #444;
	color: #111;
	text-decoration: none;
}

a:hover {
	color: #666;
}

a:focus {
	outline: none;
}

p.address {
	margin-left: 40px;
}

p.address strong {
	color: #C62021 !important;
	font-size: 12px !important;
}

a.arrow {
	background: transparent url('../img/arrow.gif') no-repeat center left;
	color: #055A83;
	font-size: 10px;
	height: 10px;
	padding: 0px 0px 0px 14px;
	margin: 0px;
	text-transform: uppercase;
}

a:hover.arrow {
	color: #222;
}

#error_box {
	color: #B41110;
}

h2 {
 	font-size: 14px;
	font-weight: bold;
	padding: 0px 20px;
}

img {
	border: 0;
}

.nopad {
	border: 0 !important;
	border-spacing: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

p.quote {
	background: #F7F7F7;
	border: 1px solid #999;
	margin: 20px auto;
	padding: 20px !important;
	width: 500px;
}

p.quote em{
	color: #B41110;
	float: right;
}

ul {
    list-style: square;
    margin-left: 20px;
}

address {
    margin-left: 20px;
}

address strong {
        color: #C62021 !important;
        font-size: 12px !important;    
}

#About h1,
#LoginBox2 h1,
#Welcome h1,
#FeatureOverview h1,
#Tour h1,
#Services h1,
#Pricing h1,
#Partners h1 ,
#Features h1,
#Isps h1,
#Enterprises h1,
#Demo h1,
#Contact h1 {
 	height: 24px;
	margin: 0px;
	text-indent: -5000px;
}

#About h1 {background: transparent url('../img/title-about.gif') no-repeat top left;}
#LoginBox2 h1 {background: transparent url('../img/title-login.png') no-repeat top left;}
#Welcome h1 {background: transparent url('..//img/title-welcome.gif') no-repeat top left;}
#FeatureOverview h1 {background: transparent url('../img/title-featureoverview.gif') no-repeat top left;}
#Tour h1 {background: transparent url('../img/title-tour.gif') no-repeat top left;}
#Services h1 {background: transparent url('../img/title-services.gif') no-repeat top left;}
#Pricing h1 {background: transparent url('../img/title-pricing.gif') no-repeat top left;}
#Partners h1 {background: transparent url('../img/title-partners.gif') no-repeat top left;}
#Features h1 {background: transparent url('../img/title-features.gif') no-repeat top left;}
#Isps h1 {background: transparent url('../img/title-isps.gif') no-repeat top left;}
#Enterprises h1 {background: transparent url('../img/title-enterprises.gif') no-repeat top left;}
#Demo h1 {background: transparent url('../img/title-demo.gif') no-repeat top left;}
#Contact h1 {background: transparent url('../img/title-contact.gif') no-repeat top left;}

  /* 
 * ========================================
 * Page Setup
 * ========================================
 */

#Wrapper {
	margin: 0 auto;
	padding-top: 40px;
	width: 800px;
}

#Header{
	background: #EEE;
	height: 108px;
	width: 800px;
}

#Header #Logo{
	float: left;
	height: 108px;
	width: 201px;
}

#Header #Slogan{
	background: transparent url('../img/header-slogan.gif') no-repeat top left;
	float: left;
	height: 108px;
	width: 269px;
}

#Header #City {
	background: transparent url('../img/header-city.gif') no-repeat top left;
	float: left;
	height: 108px;
	width: 330px;
}

#NavigationWrapper {
	background: transparent url('../img/maintable-bg.gif') repeat-y top left;
	height: 31px;
	margin: 0px 0px 0px -10px;
	padding: 0;
	width: 820px;
}

#Navigation {
	background: transparent url('../img/navigation-bg.gif') repeat-x top left;
	height: 31px;
	margin: 0px 0px 0px 10px;
	padding: 0;
	width: 800px;
}

#Navigation #Boat{
	background: transparent url('../img/navigation-boat.gif') no-repeat top left;
	float: right;
	height: 31px;
	margin: 0px;
	padding: 0;
	width: 330px;
}

#SubNavigation {
	background: transparent url('../img/maintable-bg.gif') repeat-y top left;
	height: 42px;
	margin: 0px 0px 0px -10px;
	padding: 0;
	width: 820px;
}

#SubNavigation #Boat2{
	background: transparent url('../img/subnavigation-boat.gif') no-repeat top left;
	float: right;
	height: 42px;
	margin: 0px 10px 0px 0px;
	padding: 0;
	width: 330px;
}

#MainTable{
	background: transparent url('../img/maintable-bg.gif') repeat-y top left;
	margin: 0px 0px 0px -10px;
	min-height: 320px;
	padding: 0px 30px 20px 30px;
	width: 760px;
}

#Copyright {
	background: transparent url('../img/wrapper-bg.gif') no-repeat top left;
	color: #7A7A7A;
	font-size: 9px;
	height: 30px;
	margin: 0px -0px 0px -10px;
	padding: 60px 0px 0px 0px;
	text-align: center;
	width: 820px;
}

#Copyright p {
	margin: 0;
	padding: 0;
}

#Copyright a{
	border: 0px;
	color: #055A83;
}

#Copyright a:hover {
	text-decoration: underline;
}

/* 
 * ========================================
 * Navigation
 * ========================================
 */
 
ul.MainNav,
.MainNav ul {
	float: left;
	font-size: 12px;
	font-weight: bold;
	list-style-type: none;
	margin: 0;
	padding: 0;
	
 }

ul.MainNav li{
	border-bottom: 1px solid #CDCDCD;
	display: block;
	float: left;
	position: relative;
	text-align: center;
	width: 94px;
}

ul.MainNav li:hover{
	cursor: pointer;
}

ul.MainNav li a {
	border: 0;
	color: #4B4B4B;
	display: block;
	height: 12px;
	padding: 9px 0px;
}

ul.MainNav li a:hover {
	color: #B41110;
	text-decoration: none;
}

ul.SubNav,
.SubNav ul {
	float: left;
	font-size: 11px;
	list-style-type: none;
	margin: 0px 0px 0px 10px;
	padding: 0;
	
 }

ul.SubNav li{
	border-bottom: 1px solid #CDCDCD;
	display: block;
	float: left;
	position: relative;
	text-align: center;
}

ul.SubNav li:hover{
	background: #EDEDED;
	cursor: pointer;
}

ul.SubNav li a {
	border: 0;
	color: #6D6D6D;
	display: block;
	height: 13px;
	padding: 1px;
	width: 115px;
}

ul.SubNav li a:hover {
	color: #3D3D3D;
	text-decoration: none;
}

/* 
 * ========================================
 * Home Page
 * ========================================
 */
 
#Welcome {
	float: left;
 	padding-top: 10px;
	width: 450px;
}

#Welcome p{
	line-height: 170%;
	margin: 0;
	padding: 15px 0px 0px 30px;
	text-align: justify;
	width: 400px;
}

#Welcome p.WelcomeLink{
	margin: 0;
	padding: 0;
	text-align: right;
	width: 430px;
}

#LoginBox {
 	border: 1px solid #B6B6B6;
	float: right;
	height: 152px;
	width: 240px;
}

div:hover#LoginBox,
div:active#LoginBox {
 	border: 1px solid #888;
}

#LoginBox2 {
 	background: transparent url('../img/loginbox-bg.gif') repeat-x top left;
	border: 1px solid #FFF;
	height: 130px;
	padding: 10px 30px;
	width: 178px;
}

#LoginForm,
#LoginForm p{
	margin: 0;
	padding: 0;
}

#LoginForm .InputBox input{
	background: transparent url('../img/loginbox-input-bg.gif') repeat-x top left;
	border: 1px solid #A3A3A3;
	color: #444244;
	height: 16px;
	padding: 2px 2px;
	width: 176px;
}

#LoginForm .InputBox input:hover,
#LoginForm .InputBox input:active{
	background: transparent url('../img/loginbox-button-bg.gif') repeat-x top left;
}

#LoginForm .SubmitButton {
	margin-top: 3px;
	width: 182px;
}

#LoginForm .SubmitButton a.Forgot{
	border: 0px;
	color: #B41110;
	float: left;
	font-size: 9px;
}

#LoginForm .SubmitButton a:hover.Forgot{
	border-bottom: 1px dotted #444;
	color: #444;
	cursor: help;
}

#LoginForm .SubmitButton input{
	background: transparent url('../img/loginbox-button-bg.gif') repeat-x top left;
	border: 1px solid #A3A3A3;
	color: #525152;
	height: 22px;
	float: right;
	font-size: 12px;
	font-weight: bold;
	padding: 2px 8px;
}

#LoginForm .SubmitButton input:hover{
	background: transparent url('../img/loginbox-input-bg.gif') repeat-x top left;
	border: 1px solid #939393;
	color: #323132;
}

#FeatureOverview {
	float: left;
	height: 157px;
 	padding-top: 10px;
	width: 450px;
}

#FeatureOverview h1 {
	margin-bottom: -10px; /*Temporary Solution*/
}

#FeatureOverview h2 {
	font-size: 12px;
 	font-weight: bold;
	margin: 0;
	padding: 10px 0px 0px 20px;
}

#FeatureOverview #FeatureOne {
	border-right: 1px dotted #919191;
	float: left;
	height: 119px;
	width: 218px;
}

#FeatureOverview #FeatureOne img,
#FeatureOverview #FeatureTwo img{
	float: left;
	padding: 15px 0px 0px 20px;
}

#FeatureOverview #FeatureOne ul,
#FeatureOverview #FeatureTwo ul {
	float: right;
	font-size: 11px;
	list-style: square;
	margin: 0;
	padding: 10px 5px 0px 0px;
}

#FeatureOverview #FeatureTwo {
	float: right;
	height: 119px;
	padding: 0px 10px 0px 0px;
	width: 218px;
}

#FeatureOverview .FeatureLink{
	border-top: 1px dotted #919191;
	clear: both;
	height: 20px;
	margin: 0;
	padding: 0;
	text-align: right;
	width: 450px;
}

#Tour {
	float: right;
	height: 152px;
	text-align: center;
	width: 240px;
}

#Tour p {
	text-align: left;
}

/* 
 * ========================================
 * Specific Pages Styles
 * ========================================
 */
 
 #About,
 #Services,
 #Pricing,
 #Partners,
 #Features,
 #Isps,
 #Enterprises,
 #Demo,
 #Contact {
 	text-align: justify;
 	width: 740px;
 }
 
#About p,
#Services p,
#Pricing p,
#Pricing form,
#Partners p,
#Features p,
#Isps p,
#Enterprises p,
#Demo p,
#Contact p {
 	padding: 0px 20px;
 }
 
#PriceTable {
	background: #F7F3F7;
	border: 1px solid #999;
	font-size: 11px;
	margin: 0px auto;
	padding: 10px;
}

#PriceTable input {
	background: #FFF;
	border: 1px solid #999;
}

#Features img {
	border: 1px solid #999;
	float: right;
	margin: 10px;
}

#Features ul {
	list-style: square;
	margin-left: 10px;
}

#Features ul ul {
	list-style: circle;
}

p.links {
	margin: 0 auto;
	text-align: center;
}

p.links a {
	border: 0;
}