/*  

Site: Galeria 65
Site URL: http://www.galeria65.com
Site version: 2.02.2008

Author: Maciej Ratajski for Galeria 65
Author URL: http://www.maciejratajski.com/
Author E-mail: maciej.ratajski@post.pl

*/



/* ----------------------------------------------------- */
/* --- TYPOGRAPHY AND COLORS --- */


/* --- Basic Typography --- */
body {
	font: normal 10px/16px Helvetica, Arial, sans-serif; 
	color: #f4f4f4;
	background: #54544e /*url(siatka.gif)*/;}
	
a, #link_section a, #content blockquote em, #photo_section a {
	color: #f4f4f4;
	text-decoration: none;}

a:hover, blockquote, cite, em, p.description {
	color: #d4d4d3;}
	
p, h1, h2, h3, h4, h5, blockquote, cite {
	font-weight: normal; 
	font-size: 1em;}
	
ul, ol {
	list-style: none;}

#link_section li a, .image a,
#info:hover,
#image_section div.description {
	background-color: #565650;}
	
#link_section li a:hover, .image a:hover{
	background-color: #5c5c56;}

	
/* --- Colors --- */
#site_01 .color, .color_01,
#link_section .link_01 .arrow { color: #a2bd30; } /* Little Sprout Green */
#site_01 .back, .back_01 { background-color: #a2bd30; }
	
#site_02 .color, .color_02,
#link_section .link_02 .arrow  { color: #25a345; } /* Green */
#site_02 .back, .back_02 { background-color: #25a345; }

#site_03 .color, .color_03,
#link_section .link_03 .arrow  { color: #00abc4; } /* Turquoise */
#site_03 .back, .back_03 { background-color: #00abc4; }

#site_04 .color, .color_04,
#link_section .link_04 .arrow  { color: #0060a9; } /* Blue */
#site_04 .back, .back_04 { background-color: #0060a9; }

#site_05 .color, .color_05,
#link_section .link_05 .arrow  { color: #93107e; } /* Violet */
#site_05 .back, .back_05 { background-color: #93107e; }

#site_06 .color, .color_06,
#link_section .link_06 .arrow  { color: #e41869; } /* Pink */
#site_06 .back, .back_06 { background-color: #e41869; }

#site_07 .color, .color_07,
#link_section .link_07 .arrow  { color: #e31c18; } /* Red */
#site_07 .back, .back_07 { background-color: #e31c18; }

#site_08 .color, .color_08,
#link_section .link_08 .arrow  { color: #eb6e07; } /* Orange */
#site_08 .back, .back_08 { background-color: #eb6e07; }

#site_09 .color, .color_09,
#link_section .link_09 .arrow  { color: #fed300; } /* Yellow */
#site_09 .back, .back_09 { background-color: #fed300; }

#site_10 .color, .color_10,
#link_section .link_00 .arrow  { color: #f4f4f4; } /* Dim white */
#site_10 .back, .back_10{ background: #f4f4f4; }
 
#site_00 .color, .color_00,
#link_section .link_10 .arrow { color: #54544e; } /* Dark Grey */
#site_00 .back, .back_00{ background: #54544e; }


/* --- Typography of text elements --- */
#links, #menu, #slogan, .gotop, .goup {
	text-transform: uppercase;
	font-size: 1em;}
	
#links {
	text-transform: lowercase;}

h2, h3 {
	font-size: 1.7em;
	font-weight: bold;
	text-transform: uppercase;}
	
#content h3, h2 {
	font-size: 1.4em;}
	
h4 {
	font-size: 1em;
	font-weight: bold;
	text-transform: uppercase;}
	
h5 {
	font-size: 1em;
	text-transform: uppercase;}
	
em {
	font-style: normal;
	text-transform: uppercase;}

#content {
	text-align: justify;}

#content p, #content cite  {
	font-size: 1.1em;}

#content blockquote p  {
	font-size: 1em;
	line-height: 1.6em;
	letter-spacing: 1px;}
	
#content .description, #content .description p {
	font-size: 1em;
	line-height: 1.4em;}

#content cite, #content p.description {
	display: block;
	text-align: right;}
	
#content div.description {
	text-align: left;}

#link_section a  {
	font-size: 1em;
	letter-spacing: .1em;
	line-height: 2.3em;
	text-align: left;}



/* ----------------------------------------------------- */
/* --- CONSTRUCTION --- */


/* --- Basic Construction --- */
* {
	padding: 0; 
	margin: 0; 
	border: 0;}

html, body {
	width: 100%; 
	height: 100%;}
	
#container {
	position: absolute;
	width: 100%; 
	height: 100%;
	min-width: 950px;
	min-height: 550px;}


/* --- Regular Elements Construction --- */
#logo, #logo a {
	display: block;
	width: 54px;
	height: 68px;}

#slogan {
	display: block;
	width: 199px;
	height: 74px;
	position: absolute;
	top: 0;
	left: 60px;
	border-left: 1px solid #f4f4f4;}
	
#menu, #element02 {
	height: 138px;
	position: absolute;
	top: 50%;
	left: 23px;
	margin: -69px 0 0 0;
	z-index:9;}
	
#menu a {
	display: block;
	width: 121px;
	height: 23px;}
	
#links {
	position: absolute;
	bottom: 14px;
	left: 23px;
	z-index:9;}

#element01 {
	width: 67px;
	height: 134px;
	position: absolute;
	top: 50%;
	right: 0;
	margin: -67px 0 0 0;
	z-index: 3;}
	
#element01 img {
	width: 67px;
	height: 134px;}
	
#author {
	display: block;
	width: 74px;
	height: 14px;}
	
	
/* --- Home Site Construction --- */
.home #top, .home #nav {
	position: relative;
	width: 50%;
	height: 100%;
	float: left;}

.home #nav { 
	position: absolute;
	right: 0;} /* for IE */
	
.home #logo {
	position: absolute;
	top:50%;
	left:50%;
	margin: -34px 0 0 -27px;}
	
.home #created {
	position: absolute;
	right: 14px;
	bottom: 14px;}	


/* --- Standard Site Construction --- */
.site #top {
	position: absolute;
	left:14px;
	top:14px;
	z-index: 10;}

.site #nav {
	position: relative;
	width: 208px;
	height: 100%;
	z-index: 2;}
	
.site #links span {
	display:none;}

.site #links a {
	display:block;}
	
.site #links a span {
	display:inline;}

.site #created {
	position: absolute;
	top: 14px;
	right: 14px;}
	
#element02 {
	left: 0;
	z-index: 1;}
	
#element02 span {
	display: block;
	width: 23px;
	height: 23px;
	line-height: 20px;
	text-align: center;}

#heading {
	position: absolute;
	top: 111px;
	left: 222px;
	width: 555px;
	z-index: 5;}

#heading h3, #heading h4 {
	padding: 0 0 9px 0;
	width: 356px;}
	
#sitenr {
	float: right;
	clear: right;
	padding: 0 14px 14px 0;}

#sitenr a {
	display: block;
	width: 23px;
	height: 23px;}
	
#content {
	position: absolute;
	top: 222px;
	left: 222px;
	width: 555px;
	z-index: 4;}


/* --- Content Elements Construction --- */

/* Text Elements Construction */
#content p, #content ul, #content cite {
	padding: 0 14px 9px 0;}
	
#content h3, #content h4, #content h5 {
	padding: 9px 14px 4px 0;}
	
#content p.description {
	padding: 0;}
	
#content .section {
	width: 370px;
	float: left;}

.text_content #image_section, .text_content #link_section, .image_content #link_section, .link_content #text_section, .link_content #image_section {
	width: 184px;
	float: right;
	clear: right;}

/* Image Elements Construction */
.image {
	display: block;
	padding: 0 14px 14px 0;
	float: left;}
	
.image a {
	display: block;}
	
#content img {
	width: 356px;}
	
.text_content #image_section img, .link_content #image_section img, .link_content #text_section img {
	width: 170px;}

.image_content #image_section a  {
	width: 97px;
	height: 97px;
	text-align: center;
/*	display: table-cell;
	vertical-align: middle;*/}
	
.image_content #image_section img {
	width: auto;
/*	height: auto;*/
	max-height: 100%;
	max-width: 100%;
	margin: 0 auto;
	display: block;}
	
#image_section div.description ul, #image_section div.description p {
	padding: 7px; }
	
/* Link Elements Construction */
#link_section ul {
	padding: 0 14px 14px 0;}
	
#link_section li {
	display: block;
	padding: 0 0 2px 0;}

#link_section li a {
	display: block;
	padding: 0 0 0 7px;
	line-height: 23px;}
	
#link_section a span.arrow {
	display: block;
	float: right;
	padding: 0 5px;
	text-align: center;}

.link_content #link_section li ul {
	display: none;
	left: 356px;
	width: 170px;
	margin: -23px 0 0 0;
	padding: 0 14px 14px 14px;
	position: absolute;}
	
.link_content #link_section li:hover ul {
	display: block;}

	
/* Flash Elements Construction */
#flash_section, #flash_section.section {
	width: 555px;
	float: none;}

.image_content #flash_section.active {
	position: relative;
	padding: 0 14px 14px 0;}
	
.image_content #flash_section.active #photo_section {
	width: 541px;
	height: 467px;
	margin: 0;
	padding: 0;}
	
.link_content #flash_section.active {
	position: relative;
	padding: 0 14px 14px 0;}
	
.link_content #flash_section.active #link_section {
	width: 541px;
	height: 541px;
	margin: 0;
	padding: 0;}
	
/* Photography Elements Construction */
#photo_section, #photo_section.section {
	position: relative;
	width: 555px;
	padding: 0 0 14px 0;
	float: none;}

#content #photo_section img {
	width: auto;
	/*height: auto;*/
	max-width: 541px;
	max-height: 356px;
	margin-bottom: -4px;}

#content #photo_section #control {
	position: relative;
	clear: both;
	width: 541px;
	height: 97px;}
	
#content #photo_section #control h5 {
	padding: 0;
	line-height: 23px;}
	
#info h5, #buy h5 {
	text-transform: lowercase;
	text-align: right;}
	
#content #photo_section #number {
	clear: both;
	height: 23px;}
	
#info, #buy, #info:hover h5 /*, #buy:hover h5*/ {
	position: relative;
	top: -23px;
	width: 60px;
	height: 23px;
	float: right;
	cursor: pointer;}
	
#info:hover h5/*, #buy:hover h5*/ {
	top: 0;
	visibility: hidden;}

#info:hover/*, #buy:hover*/ {
	position: absolute;
	width: 541px;
	height: 97px;
	left: 0;
	top: 0;
	margin: 0;
	z-index: 6;}

#info .description/*, #buy .description*/ {
	display:none; }
	
#info:hover .description/*, #buy:hover .description*/ {
	display:block;
	padding: 23px 212px 23px 23px;}
	
#content #photo_section .goprev {
	float: left;
	margin: -9px 0 0 481px;}
	
#content #photo_section .gonext {
	float: left;
	margin: -9px 0 0 14px;}
	
.goprev a, .gonext a {
	display: block;
	width: 23px;
	height: 23px;}
	

/* Additional Elements Construction */
.gotop {
	width: 541px;
	height: 74px;
	clear: both;}
	
.gotop a {
	margin: 23px 0 0 0;
	width: 23px;
	height: 23px;
	float: right;}



/* ----------------------------------------------------- */
/* --- GRAPHICS --- */	


/* --- Regular Elements Display --- */
#logo { background: url(g65_logo.png); }
#menu { background-image: url(menu.png); background-repeat: no-repeat; background-position: top left; }
.en #menu { background-image: url(menu-en.png); }
#element01 { background: url(circles.png); }
#element03, #logo span, #menu span, #created span, #slogan span, .gotop span, .goprev span, .gonext span { display:none; }
#author { background: url(mr.png) center right no-repeat; }


/* --- Standard Site Display --- */	
#slogan { background: url(slogan.png) center right no-repeat; }
.en #slogan { background: url(slogan-en.png) center right no-repeat; }
#sitenr { background: top left no-repeat;}
#site_00 #sitenr { display: none; }
#site_01 #sitenr { background-image: url(nr_01.png); }
#site_02 #sitenr { background-image: url(nr_02.png); }
#site_03 #sitenr { background-image: url(nr_03.png); }
#site_04 #sitenr { background-image: url(nr_04.png); }
#site_05 #sitenr { background-image: url(nr_05.png); }
#site_06 #sitenr { background-image: url(nr_06.png); }
#site_07 #sitenr { background-image: url(nr_07.png); }
#site_08 #sitenr { background-image: url(nr_08.png); }
#site_09 #sitenr { background-image: url(nr_09.png); }
#sitenr span { display: none; }

/* --- Text Elements Display --- */
.gotop a { background: url(top.png) center center no-repeat; }
.goprev a { background: url(goprev.png) center center no-repeat; }
.gonext a { background: url(gonext.png) center center no-repeat; }

/* --- Home Site Display --- */
.home #element02, .home #slogan { display: none; }
	

/* --- Dynamic Elements Display --- */
#semicircle { background-image: url(circles.png); }
.circle_10, #site_00 #element01 { background-position: 0 0; }
.circle_00 { background-position: -670px 0; }
.circle_01, #site_01 #element01 { background-position: -67px 0; }
.circle_02, #site_02 #element01 { background-position: -134px 0; }
.circle_03, #site_03 #element01 { background-position: -201px 0; }
.circle_04, #site_04 #element01 { background-position: -268px 0; }
.circle_05, #site_05 #element01 { background-position: -335px 0; }
.circle_06, #site_06 #element01 { background-position: -402px 0; }
.circle_07, #site_07 #element01 { background-position: -469px 0; }
.circle_08, #site_08 #element01 { background-position: -536px 0; }
.circle_09, #site_09 #element01 { background-position: -603px 0; }
#elements .color_00 span, #elements .color_10 span { display: none; }
#elements .color_01 span { margin: 0; }
#elements .color_02 span { margin: 23px 0 0 0; }
#elements .color_03 span { margin: 46px 0 0 0; }
#elements .color_04 span { margin: 69px 0 0 0; }
#elements .color_05 span { margin: 92px 0 0 0; }
#elements .color_06 span { margin: 115px 0 0 0; }
#elements .color_07 span { margin: 138px 0 0 0; }
#elements .color_08 span { margin: 161px 0 0 0; }
#elements .color_09 span { margin: 184px 0 0 0; }

#site_00 .text_content { background: url(element.gif) top center no-repeat;}

/* sIFR elements */
/*=:project
    scalable Inman Flash Replacement (sIFR) version 3.

  =:file
    Copyright: 2006 Mark Wubben.
    Author: Mark Wubben, <http://novemberborn.net/>

  =:history
    * IFR: Shaun Inman
    * sIFR 1: Mike Davidson, Shaun Inman and Tomas Jogin
    * sIFR 2: Mike Davidson, Shaun Inman, Tomas Jogin and Mark Wubben

  =:license
    This software is licensed and provided under the CC-GNU LGPL.
    See <http://creativecommons.org/licenses/LGPL/2.1/>    
*/

/*---- sIFR ---*/
.sIFR-flash {
	visibility: visible !important;
	margin: 0;
	padding: 0;
}

.sIFR-replaced, .sIFR-ignore {
	visibility: visible !important;
}

.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
}

.sIFR-replaced div.sIFR-fixfocus {
  margin: 0pt; 
  padding: 0pt; 
  overflow: auto; 
  letter-spacing: 0px; 
  float: none;
}

/*---- Header styling ---*/