/*

Structure is:
div#container
	div#content
		div#outer_content
			div#inner_content
				div#content_header
				div#content_body
		div#content_footer
			div#content_footer_left
			div#content_footer_right

div#content sets the width of the page.
div#outer_content draws the right border.
div#inner_content draws the left border.
div#footer draws the bottom borders.

*/


/** MAIN STRUCTURE STARTS HERE **/

html {
	margin: 0px;
	padding: 0px;
}

body {
	background-color: #dbdbdb;
	font: 12px verdana, helvetica, arial, sans-serif;
	color:#666;
	margin:0px;
	padding:0px;
	height:100%;

}

a img {
	border: 0px;
}

a:link {
	color: #3F83A2;
	text-decoration: none;
}

a:visited {
	text-decoration: none;
	color: #3F83A2;
}

a:hover {
	color: #333333;
	text-decoration: none;
}

a:active {
	text-decoration: none;
	color: #3F83A2;
}


#container {
        margin: 0px;
        padding: 0px;
}

#content {
	width: 840px;                 /* 800px from the image + 20px * 2 from the images in the two borders */
	margin: 0 auto 0 auto;
}

#outer_content {
	padding-right: 20px;          /* To left enough space for the background-image */
	background-color: white;    
	background-image: url('images/middle_right.png');
	background-repeat: repeat-y;
	background-position: right top;
	background-color: #dbdbdb;    
}

#inner_content {
	padding-left: 20px;           /* To left enough space for the background-image */
	background-image: url('images/middle_left.png');
	background-repeat: repeat-y;
	background-position: left top;
	background-color: #dbdbdb;
}

#content_header {
	padding: 20px 20px 10px 20px;
	position: relative;
	background-color: white;
}

#navigation {
	position: absolute;
	right: 25px;
        top: 40px;
}

#title {
	padding-left: 20px;
}

#content_body {
	background-color: white;
}

#content_footer {
	position: relative;
	z-index: 0;
	height: 70px;
	background-image: url('images/bottom.png');
	background-repeat: repeat;
	background-position: center top;
	background-color: #dbdbdb;
}

#content_footer_left {
	z-index: 10;
	position: absolute;
	left: 0px;	
	bottom: 0px;
	height: 70px;
	width: 40px;
	background-image: url('images/bottom_left2.png');
	background-repeat: no-repeat;
	background-position: right bottom;
	background-color: #dbdbdb;
}

#content_footer_right {
	z-index: 10;
	position: absolute;
	right: 0px;	
	bottom: 0px;
	height: 70px;
	width: 40px;
	background-image: url('images/bottom_right2.png');
	background-repeat: repeat;
	background-position: right bottom;
	background-color: #dbdbdb;
}

/** MAIN STRUCTURE ENDS HERE **/




/** IMAGE INFO STRUCTURE STARTS HERE **/
#image_info {
	padding: 20px 30px 10px 30px;
}

#image_info .image_title h4 {
	font-weight: bold;
	color: #3F83A2;
	font-size: 1.2em;
	margin-bottom: 0px;
}

#image_info .image_description {
	text-align: center;
	color: #3F83A2;
	font-size: 1.1em;
}

#image_extra #image_exif h4 {
	padding: 15px 0 20px 60px;
	background-image: url('images/info3.png');
	background-repeat: no-repeat;
	background-position: left center;
	margin-bottom: 0px;
}

#image_extra #image_exif table {
	margin-left: 60px;
	margin-top: 0px;
}

#image_extra .image_description {
	text-align: left;
}

#image_info .image_title {
	display: none;       /* The title is not show at the bottom of the image per default */
}

#image_extra .image_title {
	display:block;       /* But it is showed in the extra data */
}

#image_extra .image_description {
	display: none;
}

#comments {
	margin-top: 10px;
}

#comments h4 {
	padding: 15px 0 20px 60px;
	background-image: url('images/existing_comments.png');
	background-repeat: no-repeat;
	background-position: left center;
	margin-bottom: 0px;
}

#comments ul {
	padding-left: 0px;
	margin-left: 80px;
}

#comments li {
	list-style-image: url('images/comment.png');
	margin-bottom: 15px;
}

#comments li a {
	font-weight: bold;

}

#add_comment {
	background-color: #f5f5f5;
	padding: 10px 30px;
}

#add_comment h4 {
	padding: 25px 0 25px 60px;
	background-image: url('images/add_comment.png');
	background-repeat: no-repeat;
	background-position: left center;
	margin-bottom: 0px;
}

#add_comment #add_comment_form {
	margin-left: 60px;

}


/** IMAGE INFO STRUCTURE ENDS HERE **/

/** CONTROL BUTTONS STARTS HERE **/
#image_info{
	position: relative;
}

#image_controls {
	position: absolute;
	top: 15px;
	right: 10px;
	z-index: 10;
}

/** CONTROL BUTTONS ENDS HERE **/


/** BROWSING CLICKING ON THE IMAGE STARTS HERE **/

#image {
	position: relative;
}

#image_browse {
	position: absolute;
	margin: 0px;
	margin-right:-10px;
	padding: 0px;
	top: 0px;
	left: 0px;
	z-index: 10;
}

#image_browse a {
	outline: none;
}

#image_browse_prev, #image_browse_next{
	width: 49.5%;
	height: 100%;
	background: transparent url('images/blank.gif') no-repeat; /* Trick IE into showing hover */
	display: block;
}

#image_browse_prev {
	float: left;	
}

#image_browse_next {
	float: right;	
}

#image_browse_prev:hover, #image_browse_prev:visited:hover {
	background: url('images/prev_btn.png') center center;
	cursor: pointer;
}

#image_browse_next:hover, #image_browse_next:visited:hover {
	background: url('images/next_btn.png') center center;
	cursor: pointer;
}

/** BROWSING CLICKING ON THE IMAGE ENDS HERE **/


/** BROWSE ARCHIVE STARTS HERE **/
#browse_thumbs{
	padding: 0 0 0 25px;
}

#browse_thumbs a {
	margin: 5px;
}
/** BROWSE ARCHIVE ENDS HERE **/




/** ABOUT STARTS HERE **/
#about_header {
	text-align: center;

}


#about, #credits, #copyright {
	padding: 15px 60px 0 60px;
}


#about, #credits {
	margin-bottom: 20px;
}

#about p, #credits p, #copyright p {
	padding: 0 0 10px 0;
	margin: 0;
}
/** ABOUT ENDS HERE **/