/*---------------------------------------*/
/*         CSS by Tomas Sardyha          */
/*            (  Darsain  )              */
/*     (  http://www.darsain.net/  )     */
/*---------------------------------------*/

/* ------ CSS RESET ------- */

html, body, div, span, applet, object, iframe, input,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-size: 100%;
 font-weight: inherit;
 font-style: inherit;
 font-family: inherit;
 text-decoration: none;
 vertical-align: baseline;
 background: transparent;
}

body { line-height: 1.5; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }

b, strong { font-weight: bold; }
i, em { font-style: italic; }
u { text-decoration: underline; }

:focus { outline: 0; }

ins { text-decoration: none; }
del { text-decoration: line-through; }

table { border-collapse: collapse; border-spacing: 0; }


/* ------ Global tags ------- */

body {
	font-weight: normal;
	font-style: normal;
	font-size: 12px;
	font-family: Century Gothic, Tahoma, Trebuchet MS, Verdana;
  color: #d5d5d5;
  text-decoration: none;
  background: #111;
}

h1 { font-size: 22px; }

h2 { font-size: 18px; color: #d3d3d3; }

h3 { font-size: 16px; color: #d3d3d3; }

a, a:link, a:visited { color: #eee; }
a:hover { color: #fff; }


/* ------ Global classes ------- */

.ffix { position: relative; clear: both; width: 0; height: 0; font-size: 0; line-height: 0; }

.fr { float: right; }
.fl { float: left; }

/* ------ MENU ------- */

#menu { position: fixed; top: 0; left: 0; width: 210px; min-height: 605px; padding-right: 5px; text-align: left; z-index: 20; background: url('menu.png') no-repeat left top; text-shadow: #000 1px 1px 1px; }

#menu > div.title h1 { display: block; margin: 15px 0 0 15px; font-weight: bold; font-size: 18px; line-height: 18px; color: #d9d9d9; }
#menu > div.title h2 { display: block; margin: 6px 0 0 16px; font-size: 12px; line-height: 12px; color: #9a9999; }

#menu > div.galleries { margin: 20px 0 10px 0; }

#menu > div.galleries a { display: block; height: 35px; padding: 0 0 0 25px; font-size: 13px; line-height: 35px; color: #9f9d9d; text-decoration: none; }
#menu > div.galleries a.active { height: 40px; line-height: 40px; color: #fff; background: url('menu-link.png') no-repeat left top; }
#menu > div.galleries a:hover { color: #fff; }
#menu > div.galleries a:active { color: #333; }

#loading { position: absolute; display: none; top: 10px; right: 15px; width: 30px; height: 30px; background: url('loading.gif') no-repeat; }


/* ------ CONTENT ------- */

#content { padding: 0 0 0 210px; overflow: auto; }
#content.stretched { padding-left: 0; }


/* ------ Message ------- */

#message { position: absolute; display: none; width: 260px; min-height: 60px; top: 200px; left: auto; right: auto; margin: 0 auto; padding: 80px 35px 25px 35px; color: #413f3f; z-index: 50;
           cursor: pointer; background: url('message.png') no-repeat; }

div.contentmsg { padding: 50px; font-size: 18px; color: #ddd; text-align: center; }


/* ------ Login ------- */

div.login { width: 260px; margin: 50px auto; padding: 60px 130px 0 130px; background: url('login.png') no-repeat left top; }

div.login h2 { font-size: 13px; line-height: 13px; margin: 0 0 5px 0; }
div.login input[type=password] { width: 100%; padding: 8px 0 0 5px; height: 29px; font-size: 16px; line-height: 16px; background: #fff; border-radius: 3px; -moz-border-radius: 3px; }
div.login input[type=submit] { display: block; margin: 30px auto; width: 115px; height: 40px; cursor: pointer; background: url('button-login.png') no-repeat center top transparent; }


/*===================================================*/
/*=============== Gallery viewer ====================*/
/*===================================================*/

#images { padding: 0 5px 0 10px; overflow: auto; }
#images img { max-width: 195px; max-height: 150px; padding: 1px; border: 1px solid #363636; background: #000; }
#images li { position: relative; display: block; float: left; margin: 20px 3px 10px 3px; width: 200px; height: 154px; text-align: center; }
#images li span { display: table-cell; vertical-align: middle; width: 200px; height: 154px; text-align: center; }
#images li a:hover img { border: 1px solid #616161; }


/*===================================================*/
/*================ Image viewer =====================*/
/*===================================================*/

/* ------ IMAGE BOXES ------- */

#navigation { position: fixed; display: block; top: 0; left: 0; right: 0; z-index: 10; margin: 0 auto 0 auto; height: 80px; background: url('navigation.png') repeat-x center top; }

#navigation > div.left-box,
#navigation > div.right-box { min-width: 260px;  padding-top: 5px; }

#navigation > div.left-box { float: left; padding-right: 20px; text-align: right; }
#navigation > div.right-box { float: right; padding-left: 20px; text-align: left; }

#navigation > div.left-box > img,
#navigation > div.right-box > img { margin: 0 4px; padding: 1px; background: #aeaeae; border: 1px solid #6a6a6a; cursor: pointer; }

#navigation > div.left-box > img.thumb1 { height: 36px; opacity: 0.4; }
#navigation > div.left-box > img.thumb2 { height: 43px; opacity: 0.6; }
#navigation > div.left-box > img.thumb3 { height: 50px; opacity: 0.8; }

#navigation > div.right-box > img.thumb1 { height: 50px; opacity: 0.8; }
#navigation > div.right-box > img.thumb2 { height: 43px; opacity: 0.6; }
#navigation > div.right-box > img.thumb3 { height: 36px; opacity: 0.4; }

#navigation > div.left-box > img:hover,
#navigation > div.right-box > img:hover { opacity: 1; }


#navigation > div.title { position: relative; max-width: 200px; margin: 0 auto; height: 60px; text-align: center; }

#navigation > div.title h1 { display: block; margin-top: 12px; font-size: 16px; line-height: 16px; font-weight: bold; }
#navigation > div.title h2 { display: inline-block; margin-top: 5px; font-size: 13px; line-height: 13px; }
#navigation > div.title h3 { display: inline-block; margin-top: 8px; font-size: 13px; line-height: 13px; color: #888; }


/* ------ IMAGE ------- */

#content > div.image { display: none; margin: 75px auto 0 auto; text-align: center; }
#content > div.image > a img { max-width: 100%; }