html {
font-size:62.5%;
}

body {
font-family:verdana,arial,helvetica,sans-serif;
font-size:1.4em;
line-height:1.3;
margin:0;
padding:0;
background-color:#fff;
overflow-y:scroll;	/* Force vertical scrollbar on all pages */
}


h1, .w3c {
font-family:Georgia,"Times New Roman",serif;
}

h1 {
margin-bottom:5px;
font-weight:normal;
}
h2 {
margin-top:1.6em;
font-weight:normal;
}
h3 {
margin-top:2em;
}

p.intro {
margin-top:0;
}

#header, #content, #footer, #custlinks {
width:700px;
margin:0 auto;
}

#header p {
margin:0;
}

#header-wrapper {
padding-top:25px;
}
#header-container {
background:#eef url(/img/banner_bkgrd.gif) 0 0 no-repeat;
border:5px solid #66a;
border-width:5px 0 5px 0;
border-top-color:#66a;
padding:20px 0 45px 0;
font-size:larger;
}

/**
 * Content
 */

#content-container {
border-top:3px solid #ccc;
padding:30px 0 0 0;
/*background-color:#fff;*/
overflow:hidden;	/* Clear floats */
}
#content {
overflow:visible;
}
#content-info {
float:left;
width:300px;
}
span.obfuscate {
color:#999;
}

/**
 * Contact
 */
#contact {
background:transparent url(/img/planet-earth-bkgrd.jpg) right bottom no-repeat;
}
#address {
/*float:right;*/
/*width:300px;*/
color:#666;
}
#address h3 {
margin-bottom:0.2em;
/*background-color:#ccc;*/
}
#address h3+p {
margin-top:0;
}
.social-icons img {
width:32px;
height:32px;
}

/**
 * Specific content elements
 */
#content code {
font-size:larger;
background-color:#eee;
padding:0 0.3em;
border-radius:0.5em;
}

/**
 * Background decorative image since not part of content
 */
#content-container #content .page-image {
float:right;
}
#hosting #content-container #content .page-image {
width:240px;
height:270px;
background:transparent url(/img/server-rack.png) right 0 no-repeat;
}
#domains #content-container #content .page-image {
width:240px;
height:60px;
}
#domains #content-container #content .page-image img {
float:right;
box-shadow:0 0 15px #99c;
}


/**
 * Default tag styles in content
 */
#content small {
color:#666;
}

#content abbr[title], #content acronym[title], #content span.info {
  /*border-bottom:1px dotted #aaa;*/
  text-decoration: underline dotted #060;
}

#content del {
color:#999;
font-size:smaller;
font-weight:normal;
}

/**
 * Other Anchors / links
 */
a.external {
background:transparent url(/img/link_external.gif) right center no-repeat;
padding-right:12px;	/* Image is 10px wide */
}
p a[rel^="lightbox"], a.internal {
color:#060;
text-decoration:none;
border-bottom:1px dotted #060;
}
a.top {
font-size:x-small;
color:#999;
text-decoration:none;
border-bottom:1px dotted #999;
}


/**
 * Navigation...
 */
#custlinks-container {
position:absolute;
top:0;
left:0;
width:100%;
height:23px;	/* margin-top of #header-container */
border-bottom:2px solid #ddd;
background-color:#fff;
}
#custlinks {
font-size:smaller;
color:#999;
text-align:right;
line-height:23px;
}
#custlinks a {
color:#666;
text-decoration:none;
padding:0 5px 2px 5px;
/*border:1px solid #ccc;
background-color:#ffe;*/
}
#custlinks a:hover {
color:#333;
text-decoration:underline;
/*border:1px solid #999;
background-color:#ffb;*/
}

/*	Highlight the link for the page we are currently on
		The ID indicates the id for the body element */
#home .link-home, #hosting .link-hosting, #domains .link-domains, #portfolio .link-portfolio, #contact .link-contact, #login .link-login {
/*font-weight:bold;*/
color:#000;
text-shadow:0 0 0.3em #ccc;
/*border:1px solid #ccc;*/
}

/* KEEP IN FOOTER!
#stdcompliant {
position:absolute;
bottom:10px;
right:10px;
width:200px;
height:45px;
}
*/

.three {
color:#339;
position:relative;
top:0.2em;
font-weight:bold;
}


/* KEEP IN FOOTER!
#registered {
position:absolute;
bottom:10px;
left:10px;
width:60em;
height:45px;
}
*/

/**
 * Common Footer
 */

#footer-container {
clear:both;
font-size:smaller;
color:#999;
font-style:normal;
border-top:1px solid #ccc;
background-color:#eee;
box-shadow:0 0 5px #ccc;
}

#footer-container #footer {
margin-top:1em;
}

#footer-container #footer #registered address {
font-size:smaller;
font-style:normal;
padding-bottom:1em;
}

#footer-container #footer .copyright-notice {
font-size:smaller;
}

#footer-container #footer a {
color:#999;
}
#footer-container #footer a:hover {
color:#666;
}

a img {
border:0;
}

/**
 * Sticky Footer
 */
 
html, body {
height:100%;
} 
/* excludes footer */
#page-wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -140px;    /* the bottom margin is the negative value of the footer's height */
}
#stickyfooterpush {
height:140px;
}
#footer-container {
height:139px;	/* +1px border */
}


/**
 * FORM Ctrls
 */

div.frmctrl {
clear:left;
margin:4px 0;
}

#content label {
float:left;
font-weight:bold;
width:12em;
}

#content input[type=submit] {
margin-top:10px;
}

.alert {
color:#f00;
font-weight:bold;
padding:0.4em 1em 0.4em 1em;
border:2px solid #f00;
border-radius: 5px;
box-shadow: 0 0 5px red;
margin:1em 0;
text-align:center;
background-color: #ffe;
}

.stats {
position:absolute;
top:0;
right:0;
/*width:20em;*/
/*height:18px;*/
text-align:right;
padding:0 5px 2px 5px;
font-size:smaller;
background-color:#fff;
color:#00f;
border:1px solid #00f;
}

/**
 * Portfolio
 */

.portfolio {
margin:2em 0;
padding:1em 0;
border-top:1px solid #eee;
overflow:hidden;
}

.portfolio h2 {
float:left;
margin:0;
}
.portfolio p {
clear:left;
}

/* Thumbnails */
.portfolio .thumbnail {
float:right;
padding:0.5em;
}
.portfolio .thumbnail span {
display:inline-block;
/*font-size:0.8em;*/
background-color:#66a;	/* 66a */
padding:0 1em;
font-size:0.8em;
line-height:1.8;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;  
}
.portfolio .thumbnail img {
display:block;
width:180px;
height:120px;
padding:2px;
background-color:#fff;
border:2px solid #66a;
-moz-box-shadow:0 0 10px #999;
-webkit-box-shadow:0 0 10px #999;
box-shadow:0 0 10px #999;
}
.portfolio .thumbnail a {
display:block;
width:100%;
color:#fff;
text-decoration:none;
}
.portfolio .thumbnail a:hover {
/*color:#900;*/
text-decoration:underline;
}
.portfolio .thumbnail a:hover span {
background-color:#900;
}
.portfolio .thumbnail a:hover img {
border-color:#900;
}

/**
 * Hosting
 */
#content .hosting-package {
background-color: #eee;
padding:1em 1.2em;
border-radius: 20px;
margin:1em 0;
box-shadow:0 0 5px #999;
}
#content .hosting-package .banner {
border-radius: 20px 20px 5px 5px;
background-color: #ddd;
padding:0.6em 1em;
overflow:hidden;
}
#content .hosting-package .banner h3 {
margin:0;
float:left;
font-size:larger;
text-shadow:0 0 5px #fff;
}
#content .hosting-package .banner p {
float:right;
margin:0 1em 0 0;
font-weight:bold;
/*color:#fff;
text-shadow:0 0 10px #000;*/
}

/* Bronze */
#content .hosting-package.bronze {
background-color:#ebcaad;
}
#content .hosting-package.bronze .banner {
background-color:#fff;	/* #d9bcaa */
background-color:rgba(255,255,255,0.6);
}

/* Silver */
#content .hosting-package.silver {
background-color:#eaeaea;
}
#content .hosting-package.silver .banner {
background-color:#fff;	/* #d6d6d6 */
background-color:rgba(255,255,255,0.6);
}

/* Gold */
#content .hosting-package.gold {
background-color:#ffdc66;
/*box-shadow:0 0 5px #cc0;*/
}
#content .hosting-package.gold .banner {
background-color:#fff;	/* #ffd07f */
background-color:rgba(255,255,255,0.6);
}

#content .hosting-package li span a.moredetails {
display:inline-block;
margin-left:3em;
color:#666;
text-decoration:none;
font-size:x-small;
border:0;
border-bottom:1px dotted #666;
}
#content .hosting-package li span a.moredetails:hover {
/*color:#030;
border-bottom:1px solid #030;*/
border-style:solid;
}

/**
 * Domains
 */
#content dl.domain-price {
background-color:#8BC4F9;
padding:1em 1.2em;
border-radius: 20px;
margin:1em 0;
box-shadow:0 0 5px #999;
font-size:larger;
font-weight:bold;
overflow:hidden;
}
#content dl.domain-price dt {
float:left;
margin-right:0.5em;
padding:0 0.5em 0.2em 0.5em;
background-color:#C5E0F7;
border-radius:0.5em;
}
#content dl.domain-price dd {
float:right;
}


/**
 * Footnotes
 */
#content .footnotes {
margin-top:4em;
}
#content p.footnote {
font-size:smaller;
color:#333;
}
/*
#content p.footnote:before {
content:"* ";
color:#a00;
font-weight:bold;
}
*/
#content a.footstone, #content span.footstone {
color:#a00;
font-weight:normal;
text-decoration:none;
font-size:smaller;
}
#content a.footstone:hover {
color:#f33;
}

/* More generic - multiple footnotes */
#content p.footnote {
font-size:smaller;
color:#333;
}


/**
 * Side Panel
 */
.sidepanel {
position:fixed;
width:12em;
background-color:#eee;
padding:1em;
margin-left:1em;
border:4px solid #ddd;
-moz-box-shadow:0 0 5px #000;
-webkit-box-shadow:0 0 5px #000;
box-shadow:0 0 5px #000;
opacity:0.2;
}
.sidepanel:hover {
opacity:1;
}

/**
 * Columns
 */
ul.columns {
overflow:hidden;
}
ul.columns li {
width:20em;
float:left;
/*display:inline-block;*/	/* Still want list-item for bullets */
}


/**
 * Special: Code Window
 */
.code-window {
width:26em;
height:40em;
margin-left:2em;
padding:0 0 0 0.5em;
float:left;
background:#fff url(/img/ruled-lines.gif);
overflow:scroll;
/*border:1px solid #000;*/
white-space:nowrap;
box-shadow:0 0 5px #000;
}
/* Undo normal CODE style */
#content .code-window code {
background-color:transparent;	/* Increased specificity, so !important is not required. */
}