/*By Nick*/
/*Standard colour: 
bg = 488DE3
Orange = FFAD00*/
* {margin:0px; padding:0; position: relative;font-family: 'Trebuchet MS', Helvetica, sans-serif;}
html, body {height: 100%; font-size: 100%;}
body {background: url("/images/bg2.png") #488DE3 50% 50% repeat-y; height: 100%; margin: 0; padding: 0;}
table {border-collapse: collapse;}
a {text-decoration: none; color: blue;}
a:hover {color: #A50000;}
#container {width: 900px; margin: 0 auto; background: #FFFFFF;}/* Fixes 900px width */

/*head styles and boxes*/
#header {width: 100%; background: url("/images/bg-header.png") repeat-y #FFFFFF; margin-top: 0.5em; height: 110px;}
#header img {padding: 1em 1em 0em 1em; border: 0; float: left;} /*Orange Ore logo*/
#header p {float: right; clear: right; text-align: right; font-family: "Trebuchet MS", Helvetica, sans-serif;
color: #004693; font-size: 1.2em; padding: 1em 1em 0em 0em;}
#header p a {text-decoration: none; font-family: "Trebuchet MS", Helvetica, sans-serif;}
#log_in_widget {float: right;}
#log_in_widget p {font-size: 0.78em; padding: 0; margin: 0.5em 0.9em;}

/*Menu*/
#menu {height: 28px; width: 100%; padding: 0em; background: url("/images/bg-menu.png") repeat-x;}
#menu ul {height: 100%;}
#menu li {float: left; list-style: none; display: block; min-width: 1em; height:  100%;}
#menu li a {color:  #FFFFFF; font-weight: lighter; font-variant: small-caps; letter-spacing: .2em;
text-decoration: none; padding: 3px .7em 0 .7em; background: url("/images/bg-menu.png"); display: block;
font-family: 'Times New Roman',serif; height:  25px;}
#menu li a:hover {color:  #002E6F; background: url("/images/bg-menu-hover.png")}
#menu li a img {border: 0;}
#submenu {position:  absolute; z-index:  100; height:  300px; width:  450px;
background: #E7F5FF url("/images/websites.jpg") repeat-x; border: 1px solid #2B77E1; margin-top: 0.1em;}
#submenu a {display: inline !important; background: none !important;
letter-spacing: normal!important; color:  #002E6F!important; padding: 0!important}
#submenu a:hover {color: maroon!important;}


/*Content*/
#content {background: #E7F5FF url("/images/bg-content.png") repeat-x; padding: 1em;}
#content h1, h1 {margin: 0; font-size: 1.6em; padding: 0.5em 0em; color: #000040;
font-weight: lighter; letter-spacing: 0.1em; text-align: center; font-family: Georgia, Serif;}
#content p {font-family: 'Trebuchet MS', Helvetica, sans-serif;; line-height: 1.5em; padding: 0.2em 0em; color: #323334; font-size: 0.9em;}
#content li {font-family: 'Trebuchet MS', Helvetica, sans-serif;; line-height: 2em; font-size: 0.85em; color: #323334;
list-style-position: inside; padding-left: 1em;}

/*Footer*/
#footer {width: 100%; background: #FFFFFF url("/images/bg-footer.png") repeat-y bottom; margin: 0 0 1em 0;}
#footer p {font-family: "Trebuchet MS", Helvetica, sans-serif; padding: 1em; font-size: 0.8em;}

/**************************************/
/*generic classes for use anywhere*/
.clear {clear: both;}
.right {text-align: right;}
.left {text-align: left;}
.fl-right {float: right;}
.fl-left {float: left;}
.td_top {vertical-align: top;}
.p-left {padding-left: 1em}
.p-right {padding-right: 1em;}
.p-top {padding-top: 1em;}
.p-bottom {padding-bottom:  1em;}
.no-bdr {border: 0;}
.img-fl-left {float: left; background: #FFAD00; padding: 0em 0.5em 00em 0em; margin: 0.5em 1em 0.5em 0em;}
.img-fl-right {float: right; background: #FFAD00; padding: 0em 0em 00em 0.5em; margin: 0.5em 0em 0.5em 1em;}
ul.ticks li {background: url("/images/tick.png") no-repeat; list-style-type: none; padding-left: 3em !important;
background-position: 0.5em 0.2em; padding-bottom: 0.3em;}
.footnote {font-size: 0.7em!important;}
.blue {color: #3C75BC;}
a.arrow-link {background: url("/images/arrow-e.png") no-repeat; height: 24px; display: block; padding-left: 2.2em; margin-top: 0.1em;}
a.arrow-link-right {float: right;}
p.arrow-link-right {height: 24px;}
a.arrow-link:hover {background-position:  0 -24px;}
.error {background: #FDCB95; padding: 0.2em; color: maroon; font-size: 0.8em; border: 1px solid red;
font-family: "Trebuchet MS", Helvetica, sans-serif;}
.small {font-size: 0.8em;}
.top {vertical-align: top;}
.gray-border {border: 2px solid gray; margin: 0 auto; padding: 1em;}
.center {text-align:  center;}

/*************************************/
/* Page specific styles*/
#front_webpage {padding-right:  2em;}

.front_tile a {width: 100px; height: 180px; float: right; padding: 0em; margin-top: 2em; margin-right: 2em;
background: url("/images/tiles.png") no-repeat;}

#front_tile_design a {background-position: 0 0;}
#front_tile_design a:hover {background-position: 0 -200px;}

#front_tile_hosting a {background-position: -100px 0;}
#front_tile_hosting a:hover {background-position: -100px -200px;}

#front_tile_photos a {background-position: -200px 0;}
#front_tile_photos a:hover {background-position: -200px -200px;}

#front_tile_promotion a {background-position: -300px 0; margin-right: 2em;}
#front_tile_promotion a:hover {background-position: -300px -200px;}

#ws_table {margin: 1em 0 0 15em;}
#ws_table td {vertical-align: top; padding: 0 0.5em;}
#ws_table td h1 img {vertical-align: middle;}
#ws_table td p {padding: 0;}
#ws_table td:first-child {border-left: 0!important;}
#ws_table td {border-left: 2px solid #488DE3;}
#feature_table td img.tick {margin-left: -0.3em; margin-top: 0.5em;}
#feature_table th {font-family: "Trebuchet MS", Helvetica, sans-serif; line-height: 1.5em; padding: 0.2em 0em; color: #323334;
text-align: left; padding-left: 1em;}
#feature_table td {font-family: "Trebuchet MS", Helvetica, sans-serif; color: #323334; font-size: 0.8em;
text-align: left;}
#feature_table td img {vertical-align: middle; border: 0;}
#feature_table td a img {padding: .5em 0 0.5em 1em;}
#feature_table {margin-bottom:  1em; border-top: 2px solid #488DE3; border-bottom: 2px solid #488DE3; width: 100%;}
a.demo {background: url("/images/buttons.png") no-repeat; display: inline-block;
 width: 36px; height: 36px; margin: 0.2em; background-position: -72px 0;}
a.demo:hover {background-position:  -72px -36px;}
a.buy {background: url("/images/buttons.png") no-repeat; display: inline-block;
width: 36px; height: 36px; margin: 0.2em; background-position: -36px 0;}
a.buy:hover {background-position: -36px -36px;}
a.get {background: url("/images/buttons.png") no-repeat; display: inline-block; width: 36px; height: 36px; margin: 0.2em;
background-position:  0 0;}
a.get:hover {background-position:  0 -36px;}

span.label {display: inline-block; width: 200px;}
#progress_bar {text-align: center; font-weight: bold;}
#progress_bar span.inactive {color: gray;}

form table {/*border:  2px solid gray;*/ margin: 0 auto; padding: 2em; margin-top: 2em;}
form table td {padding: 0.5em; vertical-align: top;}

#terms {width: 80%; height: 20em; overflow: scroll; background: white; margin: 1em auto; border: 1px solid navy;}
#templates {text-align: center; margin: 0 auto;}
#templates td {vertical-align: top; border-left: 3px solid gray; padding:  1em; text-align: left;}
#templates td:first-child {border-left: 0;}
#templates th {font-family: "Trebuchet MS", Helvetica, sans-serif; line-height: 1.5em; padding: 0.2em 0em; color: #323334;}
#templates td.center {text-align: center;}

.example {font-size: 0.8em; font-style: italic; color: gray; margin-bottom: 0.8em; display: inline-block;}
#text_edit_form p {line-height: 0.8em!important; padding-bottom: 0.5em;}
#text_edit_form table tr td {vertical-align: top;}
.length-comment {font-size: 0.8em; color: gray;}
.sites {border:  2px solid gray; padding: 1em; margin:  1em;}
.sites table {width:  100%; font-size: 0.8em;}
.sites table th {text-align: left;}

#bespoke {margin-left:  20em;}
#bespoke h1 {color: #0080FF;}
#bespoke p {color: silver;}
#bespoke p a {color: aqua;}

#hosting {margin-left:  18em;}
#promotion {margin-left:  15em;}
#contact {margin-left:  23em;}
#home {margin-left:  20em;}

#portfolio img {padding:  1em 3em 1em 0;}
#portfolio th {text-align: left; border-bottom: 3px solid #5094EA; padding-right: 0.5em; padding-bottom:  1em;}
#portfolio td {border-bottom: 3px solid #5094EA; padding-right: 1em;}

#upload_photo_table {width: 100%;}
#upload_photo_table td {border-bottom: 2px solid #5094EA;}

input {font-family: verdana, sans-serif;}