/* jcooper.net - xhtml/css website layout by Jonathan Cooper

+-----------+
| CHANGELOG |
+-----------+

Version: 1.0	(23 September, 2005)
+ Initial release version

Version: 1.1	(29 September, 2005)
+ Modified blogentrydate to move it under the blog entry title
+ Changed margin beneath h3 to 5 from 10
+ Added form and transbox elements
+ Added alpha-shadow elements for the polaroid display

Version: 1.2   (2 October, 2005)
+ Added gallery thumb layout styles

*/

#mContainer {
	position:static;
	display: block;
	margin-bottom: 10px;
	clear: both;
}

.mPhoto {
	position:absolute;
	display: block;
	-moz-opacity:0.0;
	filter:Alpha(opacity=0);
}

#test_statement {
	display: none;
}

#progress_container {
	position: relative;
	margin-top: 10px;
	margin-bottom: 10px;
	width:450px;
	height:88px;
	margin-left: 4em;
}

#progress_bg_layer {
	position: absolute;
	left: 75px;
	top: 20px;
	width:300px;
	background-color:#eaeaea;/*#8e8462;*/
	font-size:10;
}

#progress_bar {
	position: absolute;
	left: 75px;
	top: 20px;
	width:0px;
	background-color:#808080;/*#c9bda9;*/
	z-index:2;
	font-size:10;
}

#progress_info {
	color: #808080;
	position: relative;
	left: 165px;
	top: 50px;
	
}

#photoholder {
  display: none;	/* hide the photo display until the images are preloaded */
  position:relative;
  width:450px;
  height:338px;
  background:#fff;
  border: 1px #e0e0e0 solid;
  margin-left: 5em;
  margin-bottom: 2em;
  /* the following lines added to support images of any size inside the div */
  text-align: center;
  /*float: left;*/
  line-height: 336px;
  clear: both;
}

#photoholder img {
  /* the following added to support an image of any size inside the photoholder */
  margin-top: expression(( 338 - this.height ) / 2);
}

html>body #photoholder img {    /*hidden from IE 5-6 */
	margin-top: 0; /* to clean up, just in case IE later supports valign! 
	vertical-align: middle;*/
	}

#motioncontainer a img{ /*image border color*/
border: 1px solid #ccc;
}

#motioncontainer a:hover img{ /*image border hover color*/
border: 1px solid navy;
}

#motioncontainer a:hover{
color: red; /* Dummy definition to overcome IE bug */
}

#statusdiv{
position: absolute;
padding: 2px;
left: -200px;
background-color: lightyellow;
border: 1px solid gray;
visibility: hidden;
}

body {
padding: 0;
margin: 0;
font: 76% tahoma, verdana, sans-serif;
background: #e0e0e0;
color: #303030;
}

a {
text-decoration: none;
color: #286ea0;
}

.entrylistlink {
line-height: 1.5;
}

a:hover {
text-decoration: underline;
}

#toptabs {
margin: 10px auto -13px auto;
font-size: 0.8em;
width: 760px;
}

#toptabs p {
text-align: right;
color: #808080;
}

.toptab {
padding: 3px 5px 3px 5px;
margin: 0 0 0 4px;
text-decoration: none;
background: #f0f0f0 url(corner2.gif) top right no-repeat;
color: #808080;
border-bottom: 1px solid #e0e0e0;
}

.toptab:hover {
background: #fafafa url(corner2.gif) top right no-repeat;
border-bottom: 1px solid #eaeaea;
color: #505050;
text-decoration: none;
}

.activetoptab {
padding: 3px 5px 3px 5px;
margin: 0 0 0 4px;
color: #505050;
text-decoration: none;
background: #ffffff url(corner2.gif) top right no-repeat;
border-bottom: 1px solid #ffffff;
}

.activetoptab:hover {
text-decoration: none;
}

#container {
margin: 0 auto 15px auto;
width: 760px;
padding: 5px 20px 20px 20px;
background: #ffffff;
}

#logo {
margin: 15px 0 0 0;
display: none;
}

#logo h1 a {
font-size: 0.6em;
color: #e1e1e1;
font-family: georgia, tahoma,Verdana,sans-serif;
}

#logo h1 a:hover {
text-decoration: none;
}

#navitabs {
clear: both;
margin-top: 25px;
}

.navitab {
padding: 4px 8px 4px 8px;
margin: 0 4px 0 0;
text-decoration: none;
letter-spacing: 1px;
background: #e0e0e0 url(corner.gif) top right no-repeat;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
}

.navitab:hover {
text-decoration: none;
background: #d0d0d0 url(corner.gif) top right no-repeat;
}

.activenavitab {
padding: 4px 8px 5px 8px;
color: #ffffff;
margin: 0 4px 0 0;
text-decoration: none;
background: #505050 url(corner.gif) top right no-repeat;
}

.activenavitab:hover {
text-decoration: none;
}

#desc {
height: 170px;
color: #ffffff;
padding: 0 0 0 15px;
background: #505050 url(front.jpg) top right no-repeat;
clear: both;
margin: 5px 0 0 0;
}

#desc p {
width: 290px;
font-size: 1em;
line-height: 1.3em;
}

#desc input {
font-size: 1em;
line-height: 1.2em;
margin: 0px 5px 0px 0px;
}

#desc h2 {
padding: 15px 15px 0 0px;
color: #ffffff;
font: 150% georgia;
}

#desc a {
color: #ffffff;
text-decoration: underline;
}

#main {
width: 590px;
float: left;
padding: 0 15px 0 0;
border-right: 1px solid #d0d0d0;
}

.block {
background: #f0f0f0;
padding: 15px;
width: 530px;
}

#sidebar {
width:140px;
float:right;
display: block;
}

#sidebar p {
font-size: 0.9em;
line-height: 1.3em;
margin: 0 0 12px 0;
}

.sidelink {
text-align: left;
display: block;
width: 120px;
background: #f0f0f0 url(corner.gif) top right no-repeat;
padding: 3px 4px 3px 8px;
margin: 5px 10px 5px 0;
font-size: 0.88em;
}

.sidelink:hover {
background: #e0e0e0 url(corner.gif) top right no-repeat;
text-decoration: none;
}

.blogentrydate {
text-align: left;
font-size: 0.8em;
line-height: 1em;
display: block;
padding: 0px 5px 5px 0px;
margin-bottom: 8px;
}

#footer {
display: block;
clear: both;
background: #fafafa;
color: #808080;
font-size: 0.9em;
padding: 8px 0 8px 0;
border-top: 1px solid #d0d0d0;
border-bottom: 1px solid #d0d0d0;
text-align: center;
}

#footer a {
color: #808080;
}

h1 {
margin: 0 0 20px 0;
font-size: 2.2em;
font-weight: normal;
}

h2 {
margin: 0 0 20px 0;
font-size: 1.6em;
font-weight: normal;
}

h3 {
margin: 20px 0 3px 0;
font-size: 1.4em;
font-weight: normal;
}

h4 {
margin: 20px 0 10px 0;
font-size: 1em;
font-weight: bold;
}

p {
margin: 0 0 15px 0;
line-height: 1.5em;
text-align: left;
}

#main li {
margin-top: 3px;
}

.right {
text-align: right;
}

a img {
border: 0;
}

.photo {
padding: 5px;
display: block;
margin: 0 auto 15px auto;
background-color: #f0f0f0;
}

#thumbnailcontainer{
display: none;
padding: 10px 15px 5px 15px;
margin-left: 1em;
margin-bottom: 3em;
float: left;
}

img.thumbnail, img.thumbnail_current
{
float: left;
width: 60px;
border: 1px solid #fafafa;
background-color: #eaeaea;
margin: 0 2px 2px 0;
padding: 6px;
}

img.thumbnail:hover {
border: 1px solid orange;
background-color: #fff;
}

img.thumbnail_current {
border: 1px solid #505050;/*#286ea0;*/
}

.hide {
display: none;
}

#photoholder #navprev, #photoholder #navnext {
  position:absolute;
  width:40px;
  height:40px;
  border: none;
  line-height: 20px;
  z-index:5;
}

#photoholder #navprev { 
left: 0px;
float: left;
}

#photoholder #navnext { 
right: 0px; 
float: right;
}

#photoholder #navprev img,
#photoholder #navnext img {
	background: none;
	border: none;
	padding-top: 8px;
}


/* This is the transparent box */
#transbox {
	width: 350px;
	margin: -150px 50px 0 350px;
	background-color: #fff;
	border: 1.5px solid #505050;
	filter:alpha(opacity=65);
	opacity: 0.65;
	-moz-opacity:0.65;
	}

#transbox:hover {
	filter:alpha(opacity=85);
	opacity: 0.85;
	-moz-opacity:0.85;
}
	
/* This is the container which set text to solid color.
position: relative used for IE */	
#transbox div {
	padding: 20px;
	font-weight: bold;
	color: #505050;
	filter:alpha(opacity=100);
	opacity: 1;
	-moz-opacity:1;
	position: relative;
	}

#loginform{
margin-top: 0.9em;
color: #fff;
/*border: 1px solid #eaeaea;*/
width: 270px;
height: 70px;
}

#loginform p{
font-size: 9px;
}

.textbox {
background: #fff;
padding: 3px;
border: 1px solid #333;
width: 12em;
color: #333333;
}

.loginformlabel {
padding-top: 3px;
width: 9em;
float: left;
}

.submitbutton {
background: #fff;
border: 1px solid #eaeaea;
color: #333;
}

.alpha-shadow {
	position: relative;
	float:left;
	background: url(shadow.gif) no-repeat bottom right;
	margin: 18px 0 0px 17px !important;
	margin: 18px 0 0px 8px;
	}

.alpha-shadow div {
  background: url(shadow2.png) no-repeat left top !important;
  background: url(shadow2.gif) no-repeat left top;
  float: left;
  padding: 0px 6px 6px 0px;
  clear: both;
  }

.alpha-shadow img {
  background-color: #fff;
  border: 1px solid #a9a9a9;
  padding: 4px;
  padding-bottom: 30px;
  margin: 0;
  float: left;
  }

.alpha-shadow img.new {
  /* #286ea0 is the href colour but isn't too obvious */
  border: 1px solid orange;
  }

.alpha-shadow div span{
/* hide the message in the span by default */
/* lets hope we never have HUGE width monitors! */
	position:absolute;
	left:-9999px;
}

.alpha-shadow div:hover span{	
	top:96px;
	left:5px;
	width:110px;
	font-weight:bold;
	text-align:center;
	background:#FFF;
	color:#383838;
	padding:0px;
	text-transform:uppercase;
	font-size:80%;
	/* set up the various opacities, even though we dont need them with a white bg */
	/* but if we ever have a HUGE caption, it'll look nicer */
	filter: alpha(opacity=85);
	-moz-opacity:.85;
	opacity:.85;
} 

/* supposed fix for IE 6 upwards, but it doesn't work :( */
.alpha-shadow div:hover { 
        white-space: normal;
}

.post-alpha-shadow {
padding-top: 1em;
clear:left;
}

/* added 28/03/06 to accomodate images in blog entries */

img.blogimgleft
{
float: left;
border: 1px solid #fafafa;
background-color: #eaeaea;
margin: 2px 6px 2px 0;
padding: 4px;
}

img.blogimgright
{
float: right;
border: 1px solid #fafafa;
background-color: #eaeaea;
margin: 2px 8px 2px 4px;
padding: 4px;
}

img.blogimgleft:hover, img.blogimgright:hover
{
border: 1px solid orange;
background-color: #fff;
}

img.clustermap
{
   height: 10px;
   width: 15px;
   display: none;
}