@charset "UTF-8";
/* CSS Document */

@import "forms.css";
@import "imageEditor.css";

* { margin: 0; padding: 0; }

html { background: url(../images/interface/htmlBG.jpg) top right no-repeat #6f0044; }

body {
	position: relative;
	width: 995px;

	margin: 0 auto 20px auto;
	padding: 0 10px;

	color: #313131;
	font-size: 11px;
	font-family: "Lucida Grande", "Tahoma", Verdana, Arial, Helvetica, sans-serif;

	background: url(../images/interface/bodyBG.png) top left repeat-y;
}

div#page {
	width: 100%;
	padding-top: 140px;
	margin: 0 auto;
}

div.column {
	position: relative;
	float: left;
	width: 670px;

	margin-left: 20px;
	margin-bottom: 10px;
	padding: 10px 20px;
}

div.column.wide { width: 915px; }
div.column.bordered { border: 1px solid #b1d9e6; }

/* Columns with background images */
div.column.wider { width: 928px; margin-bottom: 0; }
div.column#column_contact { background: url(../images/interface/phone.jpg) bottom right no-repeat; }

div.corner {
	position: absolute;
	top: -1px;
	left: -1px;

	width: 4px;
	height: 4px;

	background: url(../images/interface/corner.gif) top left no-repeat;
}

div.corner.right { left: auto; right: -1px; background-position: top right; }
div.corner.bottom { top: auto; bottom: -1px; background-position: bottom left; }
div.corner.bottom.right { background-position: bottom right; }

/* Side Column */
div.column.side {
	float: right;
	width: 222px;

	margin: 0 20px 10px 0;
	padding: 10px;
	border: 1px solid #b1d9e6;
}

div.column.side ul {
	float: left;
	clear: both;
	margin: 0 10px 20px 10px;

	text-align: center;
	list-style-type: none;
}

div.column.side ul li { float: left; clear: both; margin-bottom: 5px; }
div.column.side ul li.heading { margin-bottom: 10px; }

div.column.side ul li a {
	float: left;
	display: block;
}

div.column.side h3, form#login h3 {
	font-size: 12px;
	color: #313131;
	clear: left;
}

div.column.side h3 { margin-bottom: 10px; }

/* Small table */
div.column.side li table {
	float: right;
	clear: both;
	width: 212px;
	margin: 10px auto 5px auto;
}

div.column.side li table th, div.column.side li table td { text-align: right; padding: 2px; font-size: 11px; }

div.column.side li table td img.homepic {
	width: 100px;
}

/* List columns */
ul.column {
	float: left;
	width: 702px;

	margin: 10px 0 10px 15px;
	list-style-type: none;
}

ul.column li {
	position: relative;
	float: left;

	margin: 0 5px;
	padding: 10px;

	border: 1px solid #b1d9e6;
}
ul.column li.end { float: right; margin: 0; }

ul.column.three li { width: 204px; }
ul.column.four li { width: 145px; }

ul.column li.heading {
	width: 99%;
	margin: 0 0 5px 5px;
	padding: 0;
	border: 0;
}

ul.column li a.button {
	float: none;
	margin: 10px auto 10px auto;
}

/* Misc */
div.clear { clear: both; }
h1, h2, h3 { font-weight: normal; }
h3.success { color: #393; }
h3.fail { color: #d00; }
span.fail { color: #d00; }

p { margin-bottom: 10px; }

a { color: #008bb3; }
a:hover { color: #009ecb; }
a.button {
	display: block;
	float: left;
	width: 100px;
	height: 28px;
	margin-right: 5px;

	color: #111;
	line-height: 28px;
	text-align: center;
	text-decoration: none;

	background: url(../images/interface/buttonBG.gif) top left repeat-x;
}
a.button.right { float: right; margin-right: 0; margin-left: 5px; }
a.button.small { width: 28px; padding-left: 1px; font-weight: bold; font-size: 13px; }
a.button.small.edit { color: #fff; }
a.button.small.delete { color: #d00; }

a.button:hover { background-position: bottom left; }

a.button#publish {
	color: #fff;
	font-weight: bold;
	background: url(../images/interface/flashButton.gif) top left no-repeat;
}

a.button#publish:hover { background-position: bottom left; }

h1 { color: #950062; font-size: 25px; margin-bottom: 0; }
h1 span { color: #003195; font-size: 18px; }
h2 { color: #85bc00; font-size: 20px; margin-bottom: 10px; }
h3 { color: #003195; font-size: 15px; }

/* Column Images */
img.left, img.right { margin-bottom: 10px; }
img.left { float: left; margin-right: 10px; }
img.right { float: right; margin-left: 10px; }

/* Status Bar */
p.statusBar {
	float: left;
	width: 98%;
	height: 20px;

	padding: 0 1%;
	line-height: 20px;

	border: 1px solid #b1d9e6;
	background-color: #dbf1ff;
}
/* Icon List */
ul.iconList {
	float: left;
	clear: both;
	width: 100%;
	list-style-type: none;
}

ul.iconList li {
	float: left;
	width: 106px;
	height: 106px;
	margin: 1% 1% 3% 1%;
}

ul.iconList li a {
	display: block;
	width: 100%;
	height: 20%;

	padding-top: 80%;
	text-align: center;
	background: url(../images/interface/account_icons.jpg) top left no-repeat;
}

ul.iconList li a.ftp { background-position: 0 0; }
ul.iconList li a.reciprocals { background-position: 0 -106px; }
ul.iconList li a.template { background-position: 0 -212px; }
ul.iconList li a.builder { background-position: 0 -318px; }
ul.iconList li a.config { background-position: 0 -424px; }
ul.iconList li a.users { background-position: 0 -530px; }
ul.iconList li a.editinfo { background-position: 0 -636px; }
ul.iconList li a.preview { background-position: 0 -742px; }
ul.iconList li a.gallery { background-position: 0 -848px; }
ul.iconList li a.homeText { background-position: 0 -954px; }
ul.iconList li a.rates { background-position: 0 -1060px; }
ul.iconList li a.links { background-position: 0 -1166px; }
ul.iconList li a.meta { background-position: 0 -424px; }
ul.iconList li a.messages { background-position: 0 -1272px; }
ul.iconList li a.rota { background-position: 0 -1378px; }
ul.iconList li a.domain { background-position: 0 -1484px; }

/* Home page picture hover link in side menu */
div#homeImageHoverLinkTD { position: relative; }

a#homeImageHoverLink {
	position: absolute;
	display: none;

	bottom: 3px;
	right: 0;

	height: 15px;
	line-height: 15px;

	font-size: 12px;
	text-align: right;
	text-decoration: none;
	padding: 2px;

	background-color: #fff;
}

div#homeImageHoverLinkTD:hover a#homeImageHoverLink { display: block; }
a#homeImageHoverLink:hover { text-decoration: underline; }

/* UPGRADE NOW! Promotional box aside the comments box on account panel */
div#upgradeNow {
	float: right;
	width: 280px;
	height: 180px;

	padding: 10px;

	border: 1px solid #b1d9e6;
	background: url(../images/interface/upgradeNow.gif) bottom right repeat-x #dbf1ff;
}

div#upgradeNow p {
	margin: 15px 0 35px 0;
	font-size: 15px;
}

/* Reciprocal directory banners (these are on our generated client sites as well) */
div.reciprocal {
	float: left;
	width: 120px;
	height: 15px;

	padding: 1px;

	background-color: #fff;
	border: 1px solid #111;
}

div.reciprocal a {
	float: left;
	display: block;

	width: 100%;
	height: 100%;

	color: #000;
	background-color: #fff;
	background: url(../images/interface/reciprocalBG.png) bottom left repeat-x;

	font-size: 11px;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	text-decoration: none;
	line-height: 15px;
}

/* Gallery */
ul.gallery {
	float: left;
	clear: both;

	width: 100%;
	list-style-type: none;
}

ul.gallery li {
	float: left;

	width: 150px;
	height: 275px;

	margin: 2px;
	text-align: center;
	background-color: #b5d5ff;
}

ul.gallery li div {
	width: 150px;
	height: 225px;

	overflow: hidden;
	background-color: #ccc;
}

ul.gallery li div img {
	width: 150px;
}

/* Rota / Calendar */
div#rota {
	float: left;
	clear: left;
	width: 100%;
}

/* Days list */
div#rota ul.days {
	float: left;
	width: 120px;

	list-style-type: none;
	border: 1px solid #b1d9e6;
	background: url(../images/interface/fieldset.gif) bottom right repeat-x #dbf1ff;
}

div#rota ul.days li {
	position: relative;
	float: left;

	width: 100%;
	height: 80px;

	font-size: 12px;
	font-weight: bold;

	border-bottom: 1px solid #b1d9e6;
	
}

div#rota ul.days li span {
	display: block;
	float: left;
	line-height: 80px;
	margin-left: 6%;
}

div#rota ul.days li a.button { margin: 26px 4% 0 0; font-size: 19px; }

/* The chart */
div#rota ul.chart {
	float: left;
	width: 540px;

	list-style-type: none;
	border: 1px solid #b1d9e6;
	border-left: 0;
	overflow: auto;
}

div#rota ul.chart li {
	float: left;
	clear: left;

	width: 1000%;
	height: 80px;

	border-bottom: 1px solid #b1d9e6;
}

div#rota ul.chart li div {
	float: left;
	width: 200px;
	height: 80px;
	border-right: 1px solid #b1d9e6;
}

div#rota ul.chart li div div {
	float: left;

	width: 51px;
	height: 76px;

	margin: 2px 5px 0 2px;
	overflow: hidden;
}

div#rota ul.chart li div div img {
	display: block;
	float: left;

	height: 76px;
}

div#rota ul.chart li div h3 { margin-bottom: 10px; }
div#rota ul.chart li div p { float: left; width: 65%; }

div#rota ul.chart li div form {
	float: right;
	clear: right;
	width: auto;
	margin-right: 5px;
}

/* Entry edit form */
div#rota ul.days li form#calendarEntry {
	position: absolute;
	display: none;

	top: 42px;
	left: 102px;

	width: 225px;
	z-index: 2;

	padding: 10px 10px 0 10px;

	border: 1px solid #b1d9e6;
	background-color: #fff;
}

div#rota ul.days li form#calendarEntry ol { margin-bottom: 5px; }
div#rota ul.days li form#calendarEntry ol li { border: 0; height: auto; }
div#rota ul.days li form#calendarEntry label { width: 30%; font-weight: normal; text-align: right; }
div#rota ul.days li form#calendarEntry label span { line-height: normal; margin: 0; float: none; }

div#rota ul.days li form#calendarEntry input.text, div#rota ul.days li form#calendarEntry select {
	float: right;
	clear: right;
	width: 62%;
}
div#rota ul.days li form#calendarEntry select { width: 64%; }

/* FTP Test Connection Status List */
ul.ftpConnector {
	float: left;
	clear: both;
	margin-bottom: 10px;
}

ul.ftpConnector li {
	float: left;
	clear: both;
	margin-left: 20px;
}

ul.ftpConnector li.success { color: #070; }
ul.ftpConnector li.fail { color: #d00; }

/* Statistics List */
ul.statistics {
	float: left;
	clear: both;
	width: 100%;
	margin-top: 5px;
	list-style-type: none;
}

ul.statistics li {
	float: left;
	width: 46%;
	padding: 0 2%;
	margin-bottom: 2px;
}

ul.statistics li strong, ul.statistics li span { display: block; }
ul.statistics li strong { float: left; }
ul.statistics li span { float: right; }

/* Tabs */
ul.tabs {
	float: left;
	clear: both;
	width: 100%;
	height: 25px;

	line-height: 25px;
	list-style-type: none;

	margin-top: 10px;
	border-bottom: 1px solid #b1d9e6;
}

ul.tabs li {
	float: left;
	clear: none;
	width: 100px;
	height: 24px;

	text-align: center;
	margin: 0 5px;

	border: 1px solid #b1d9e6;
	background-color: #fff;
}

ul.tabs li.active { border-bottom: 1px solid #fff; }

div.tabbox {
	float: left;
	clear: both;

	width: 96%;
	padding: 2%;
	margin-bottom: 10px;

	border: 1px solid #b1d9e6;
	border-top: 0;
}

/* Tabs in form OL */
form ol li ul.tabs {
	width: 82%;
}

form ol li div.tabbox { width: 78%; }
form ol li div.tabbox textarea { width: 100%; }

/* Tables */
table {
	float: left;
	clear: both;
	width: 100%;

	margin-top: 5px;
	margin-bottom: 20px;
	border-collapse: collapse;
	border: 1px solid #b1d9e6;
}

table th, table td {
	text-align: left;
	padding: 4px;
}

table th { padding: 8px 4px; font-size: 12px; background-color: #dbf1ff; }
table tr.odd td { background-color: #eaf7ff; }

table td.error { color: #d00; }
table td a img { border: 0; }

/* Small Icons */
a.back {
	display: block;
	float: left;

	height: 18px;
	margin-bottom: 10px;
	text-indent: 20px;
	background: url(../images/interface/small_icons.gif) top left no-repeat;
}

/* File icons */
table span.icon {
	display: block;
	width: 18px;
	height: 18px;

	float: left;
	margin-right: 2px;
	background: url(../images/interface/file_icons.gif) top left no-repeat;
}

table span.icon.file { background-position: 0 0; }
table span.icon.html { background-position: 0 -18px; }
table span.icon.image { background-position: 0 -36px; }
table span.icon.folder { background-position: 0 -54px; }

/* Preview Iframe */
iframe#preview {
	width: 925px;
	height: 525px;

	padding: 1px;
	border: 1px solid #b1d9e6;
}

iframe#preview.small { width: 640px; }

/* Image Library Frame */
div#imageLibrary {
	display: none;
	width: 650px;
	height: 300px;

	margin-bottom: 5px;
}

iframe#imglib { width: 100%; height: 100%; border: 0; }

/* Randomize Home Text IFrame */
iframe#randomizeHomeText {
	display: block;
	float: left;

	width: 222px;
	height: 275px;

	border: 0;
	overflow: hidden;
}

textarea#content { width: 100%; }

/* Directory Susbmission / Reciprocal IFrame */
iframe#reciprocalPage {
	display: block;
	float: left;

	width: 925px;
	height: 475px;

	border: 0;
}

/* Site banner ads */
div.banner#header {
	position: absolute;
	z-index: 99;
	top: 17px;
	right: 272px;

	width: 234px;
	height: 60px;
}

div.banner#header img { border: 0; }
	
/* Slideshow */
ul#slideshow {
	position: absolute;
	top: 140px;
	left: 30px;

	width: 953px;
	height: 200px;

	overflow: hidden;
	list-style-type: none;
}

ul#slideshow li {
	position: absolute;
	top: 0;
	left: 0;

	width: 953px;
	height: 200px;
	display: none;
	/*opacity: 0;

	filter: alpha(opacity='100');*/

	background-color: #fff;
}

ul#slideshow li h3, ul#slideshow li a.button { position: absolute; }
ul#slideshow li h3.invert { color: #313131; }
ul#slideshow li h3 {
	bottom: 10px;
	left: 20px;

	color: #111;
	font-size: 25px;
}

ul#slideshow li a.button {
	top: 160px;
	right: 20px;
}

ul#slideshow li#ss_one { background: url(../images/slideshow/one.jpg) top left no-repeat #fff; }
ul#slideshow li#ss_two { background: url(../images/slideshow/two.jpg) top left no-repeat #fff; }
ul#slideshow li#ss_three { background: url(../images/slideshow/three.jpg) top left no-repeat #fff; }
ul#slideshow li#ss_four { background: url(../images/slideshow/four.jpg) top left no-repeat #fff; }

/* Signup Now Box */
div#signupNow {
	position: absolute;
	top: 150px;
	right: 40px;

	width: 200px;
	height: 160px;

	padding: 5px 10px 15px 10px;
	border: 1px solid #b1d9e6;

	z-index: 99999;
	background: url(../images/interface/signupNow.gif) top left no-repeat #fff;
}

div#signupNow p, div#signupNow ul {
	float: left;
	clear: left;
}

div#signupNow ul { width: 52%; margin-left: 6%; }
div#signupNow ul li { margin: 0 0 3px 0; }

div#signupNow a.arrow {
	position: absolute;
	bottom: 10px;
	right: 14px;

	width: 81px;
	height: 70px;

	background: url(../images/interface/signupArrow.gif) top left no-repeat;
}
div#signupNow a.arrow:hover { background-position: bottom left; }

/* Signup random template box */
img.randomTemplate {
	width: 220px;
}

/* Feature menu bar at top */
ul#featureMenu {
	float: left;
	clear: both;

	width: 954px;
	height: 140px;

	margin: 210px 0 10px 20px;

	background: url(../images/interface/featureBG.gif) top left repeat-x;
	list-style-type: none;
}

ul#featureMenu li {
	position: relative;
	float: left;
	width: 217px;
	height: 119px;

	margin-top: 1px;
	padding: 10px;

	border-right: 1px solid #b1dae6;
	border-left: 1px solid #fff;
}

ul#featureMenu li.nbs { border-left: 0; }
ul#featureMenu li.nbe { border-right: 0; }

ul#featureMenu li h3, ul#featureMenu li p {
	display: block;
	float: left;
}

ul#featureMenu li h3 { margin-bottom: 10px; }
ul#featureMenu li a.button {
	position: absolute;
	bottom: 7px;
	right: 10px;
}

/* Template Chooser */
div#chooseTemplate {
	float: left;
	width: 650px;
	padding: 10px;

	position: relative;
	margin-bottom: 10px;
	padding: 10px;

	border: 1px solid #b1d9e6;
	
}

div#chooseTemplate img {
	float: left;
	display: block;

	width: 650px;
	border: 0;
}

div#chooseTemplate form {
	position: absolute;
	right: 10px;
	bottom: 10px;

	width: 160px;
	height: 50px;

	padding: 5px;
	margin: 0;
	background: url(../images/interface/alpha050.png) top left repeat;
}

div#chooseTemplate form a {
	display: block;
	float: right;
	clear: right;
}

/* Templates / Portfolio page img previewer */
ul.previewList {
	float: left;
	clear: both;

	width: 97.5%;
	height: 310px;

	margin: 0 auto;
	padding: 10px;

	border: 1px solid #b1d9e6;
	list-style-type: none;
	overflow: auto;
}

ul.previewList li {
	float: left;
	width: 150px;
	height: 150px;

	text-align: center;
	margin: 12px;
}

ul.previewList li img {
	width: 146px;

	padding: 1px;
	border: 1px solid #b1d9e6;
	cursor: pointer;
}

ul.previewList li p {
	width: 120px;
	font-size: 11px;
	text-align: center;
}

/* Portfolio Banners */
ul.portfolio {
	list-style-type: none;
	float: left;
	clear: both;
}

ul.portfolio li {
	float: left;
	clear: both;
	margin-bottom: 10px;
}

ul.portfolio li h3 { margin-bottom: 5px; }
ul.portfolio li img {
	padding: 1px;
	border: 1px solid #b1d9e6;
}

/* FAQ / Support List */
ul.faq {
	margin: 5px 0 20px 20px;
}

ul.faq li {
	margin-bottom: 5px;
}

/* Template Builder */
form.templateBuilder fieldset {
	width: 650px;
	height: 525px;
}

form.templateBuilder fieldset#toolbar {
	float: right;
	clear: none;

	width: 211px;
	height: 505px;

	border: 1px solid #dfdfdf;
	border-right-color: #aaa;
	border-bottom-color: #aaa;

	padding: 10px 2px;
	background-color: #ddd;
}

form.templateBuilder fieldset#toolbar ol.toolbox {
	display: none;
	width: 208px;
	height: 80%;

	padding: 0;
	margin: 10px 0;

	border: 1px solid #dfdfdf;
	border-left-color: #aaa;
	border-top-color: #aaa;
	background-color: #fff;
}

form.templateBuilder fieldset#toolbar ol.toolbox li {
	position: relative;
	width: 187px;
	margin: 2px;
	padding: 2px;
	background-color: #fff;
	border-bottom: 1px solid #dfdfdf;
}

form.templateBuilder fieldset#toolbar ol.toolbox li label { width: 40%; font-size: 11px; }

form.templateBuilder fieldset#toolbar ol.toolbox li input, form.templateBuilder fieldset#toolbar ol.toolbox li select, form.templateBuilder fieldset#toolbar ol.toolbox li iframe {
	float: right;
	clear: none;
	width: 57%;
}

form.templateBuilder fieldset#toolbar select#elementChooser { width: 200px; }

form.templateBuilder fieldset#toolbar ol.toolbox li iframe {
	width: 110px;
	height: 20px;
	overflow: hidden;
	border: 1px solid #b1d9e6;
}

form.templateBuilder fieldset#toolbar ol.toolbox li div.colorChooser {
	position: absolute;
	display: none;

	top: 20px;
	left: 100px;

	width: 180px;
	height: 216px;

	border: 1px solid #000;
	background-color: #fff;

	padding: 1px;
	z-index: 2;
}

form.templateBuilder fieldset#toolbar ol.toolbox li div.colorChooser a {
	display: none;
	float: left;
	width: 15px;
	height: 12px;
}

form.templateBuilder fieldset#toolbar ol.toolbox li:hover div.colorChooser { display: block; }
form.templateBuilder fieldset#toolbar ol.toolbox li:hover div.colorChooser a { display: block; }

/* Image uploader box */
form.templateBuilder fieldset#toolbar ol.toolbox li iframe.imageUploader {
	height: 70px;
	background-color: #fff;
}

/* Masthead */
ul#masthead {
	position: absolute;
	top: 0;
	left: 10px;

	width: 995px;
	height: 35px;

	z-index: 1;
	list-style-type: none;

	padding: 98px 0 12px 0;
	background: url(../images/interface/masthead.gif) top left no-repeat;
}

ul#masthead li, ul#masthead li a {
	float: right;
	height: 32px;
	line-height: 30px;

	color: #222;
	font-size: 13px;
}

ul#masthead li {
	position: relative;
	border-right: 1px solid #aaa;
	border-left: 1px solid #fff;
}

ul#masthead li a {
	display: block;
	padding: 0 20px;
	text-decoration: none;
}

ul#masthead li a:hover, ul#masthead li a.active { background: url(../images/interface/mastheadHover.gif) top left repeat; }

/* Footer */
div#footer {
	position: relative;
	left: -8px;

	clear: both;
	width: 1010px;
	height: 70px;

	color: #fff;
	text-align: center;
	background: url(../images/interface/footerBG.gif) bottom left repeat-x #fff;
}

div#footer div {
	float: left;
	clear: both;
	width: 100%;
	height: 25px;

	line-height: 32px;
}

div#footer ul {
	position: absolute;
	bottom: 16px;
	left: 15px;

	width: 982px;
	height: 25px;

	z-index: 1;
	list-style-type: none;
}

div#footer ul li, div#footer ul li a {
	float: right;
	height: 25px;
	line-height: 25px;

	color: #222;
}

div#footer ul li {
	position: relative;
	border-right: 1px solid #aaa;
	border-left: 1px solid #fff;
}

div#footer ul li a {
	display: block;
	padding: 0 20px;
	text-decoration: none;
}

div#footer div p {
	float: left;
	margin: 0 10px 0 370px;
}

/* W3C */
div#footer div a.w3c {
	display: block;
	float: left;

	width: 58px;
	height: 16px;

	margin: 8px 2px 0 0;
	background: url(../images/interface/w3c.gif) top left no-repeat;
}

div#footer div a.w3c.css { background-position: top right; }