/* ---[ everybody needs a body ]--- */

body {
   margin: 0;
   padding: 0;
   font-size: small;
   font-family: verdana;
   background: #ccf;
}

/* ---[ layout ]--- */

#wrap {
   margin: 0 auto;
   width: 90%;
   max-width: 1200px;
   min-width: 700px;
   text-align: left;
   background: #fff;
   border: 1px solid #99c;
   border-bottom: none;
   border-top: none;
}

#header {
   font-family: georgia;
   font-size: 120%;
   width: 100%;
   height: 60px;
   margin: 0;
   padding: 0;
   border: 0;
}

#header h1 {
   text-indent: -9999px;
   margin: 0;
   padding: 0;
   border: 0;
}

#header h1 a:link, h1 a:visited	{
   display: block;	
   height: 60px;
   background: #fff url(http://www.freston.net/zpix/logo-234x60.gif) top left no-repeat; 
   margin: 0 0 0 12px;
   padding: 0;
   border: 0;
}

#content {
   float: left;
   width: 75%;
   margin-right: 1%;
   padding: 0 1%;
}

#sidebar {
   float: right;
   width: 20%;
}

#footer {
   clear: both;
   border-top: 1px dotted #333;
   background: #69f;
   margin-top: 5px;
   text-align: center;
}

/* ---[ dead common bits ]--- */

img {
   display: inline;
   border: 0;
}

.access {
   display: none;
}

/* ---[ EDitorial look and feel ]--- */

#content .entrytext {
   font-size: 100%;
   line-height: 18px;
   color: #111;
   padding: 0;
   margin: 0 0 15px 0;
}

#content .entrytext blockquote {
   padding: 5px;
   margin-left: 25px;
   border-left: 5px solid #36c;
   color: #333;
}

h2, h3, h4, h5 {
   font-family: georgia;
   padding: 2px 3px;
}

h2, h3, h4, h5 {
   padding: 2px 3px;
}

h2, h3 {
   font-size: 150%;
}

h4 {
   font-size: 130%;
}

h5 {
   font-size: 120%;
}

h2 {
   font-weight: bold;
   color: #fff;
   background: #36c;
   margin: 5px 0 0 0;
}

h3 {
   font-weight: normal;
   color: #000;
   background: #fff;
   margin: 0 0 0.5em 0;
   border: 2px solid #36c;
   border-top: 0;
}

h4 {
   font-weight: bold;
   color: #fff;
   background: #039;
   margin: 5px 0 0 0;
}

img.terminator {
  margin: 0px 0px 0px 5px;
  float: none;
}

img.fright {
   float: right;
   border: 1px solid #333;
   margin: 0 0 10px 10px;
}

img.fleft {
   float: left;
   border: 1px solid #333;
   margin: 0 10px 10px 0;
}

/* ---[ colours: EDitorials ]--- */

#edit h2 { background: #36c; }
#edit h3 { border-color: #36c; }
#edit h4 { background: #039; }

/* ---[ colours: table tennis ]--- */

#tt h2 { background: #c33; }
#tt h3 { border-color: #c33; }
#tt h4 { background: #900; }

/* ---[ colours: about ]--- */

#about h2 { background: #939; }
#about h3 { border-color: #939; }
#about h4 { background: #606; }

/* ---[ colours: design ]--- */

#design h2 { background: #8FB3B3; }
#design h3 { border-color: #8FB3B3; }
#design h4 { background: #8FB3B3; }
#design h5 {
   border-left: 10px solid #8FB3B3;
   padding-left: 10px;
}

/* ---[ sidebar nav ]--- */

#sidebar a:link, #sidebar a:visited, #sidebar a:active {
   text-decoration: none;
   color: #000;
}

#sidebar a:hover {
   text-decoration: none;
   background: #666;
   color: #fff;
}

/* ---[ design portfolio ]--- */

#portfolio {
   margin: 0;
   margin-top: 10px;
   padding: 0;
   list-style: none;
}

#portfolio li {
   float: left;
   margin: 0;
   padding: 0;
   background: none;
}

#portfolio li a {
   float: left;
   display: block;
   margin: 0 10px 10px 0;
   padding: 4px;
   border-bottom: 1px solid #D1DCB9;
   border-right: 1px solid #D1DCB9;
   background: #fff;
}

#portfolio li a:hover, #portfolio li.active a {
   border-color: #EBF4D9;
   background: #8FB3B3;
}

#portfolio li.active a {
   border-color: #EBF4D9;
   background: #2D405B;
}

/* ---[ Star News ]--- */

p.starnews {
   float: left;
   margin: 0 20px 20px 0;
   font-family: Tahoma,Optima,verdana;
   font-size: 180%;
   line-height: 1.3;
   text-align: center;
   padding: 5px;
   border: 5px solid #f33;
   border-bottom: 15px solid #f33;
}

/* ---[ TT card popup ]--- */

.popnail {
   position: relative;
   z-index: 0;
}

.popnail:hover {
   background-color: transparent;
   z-index: 50;
}

.popnail span { /*CSS for enlarged image*/
   position: absolute;
   background-color: lightyellow;
   padding: 5px;
   left: -1000px;
   border: 1px dashed gray;
   visibility: hidden;
   color: black;
   text-decoration: none;
}

.popnail span img { /*CSS for enlarged image*/
   border-width: 0;
   padding: 2px;
}

.popnail:hover span { /*CSS for enlarged image on hover*/
   visibility: visible;
   top: 0;
   left: 60px; /*position where enlarged image should offset horizontally */
}