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


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

* {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: inherit;
	font-family: inherit;
  text-decoration: none;
  outline: 0;
}

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

ul { list-style: none; }

label { cursor: pointer; }

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

body {
	font-weight: normal;
	font-style: normal;
	font-size: 12px;
	font-family: Trebuchet MS, Verdana;
  color: #000;
  text-decoration: none;
  background: url('body-bg.png') repeat-y center top #031a30;
}

h1 { font-size: 22px; }

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

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

a, a:link, a:visited { color: #878889; text-decoration: underline; }
a:hover { color: #000; text-decoration: none; }

input { margin: 0 2px; padding: 2px 4px; border: 1px solid #b1b1b1; background: url('input-bg.png') repeat-x left top #fff; font-size: 12px; color: #555555; }

input.button {
  margin: 0 2px;
  padding: 0 8px;
  height: 24px;
  border: 1px solid #c1c1c1;
  border-top: 1px solid #d1d1d1;
  border-bottom: 1px solid #a1a1a1;
  background: url('input-button-bg.png') repeat-x left top #e8e8e8;
  font-size: 12px;
  line-height: 20px;
  color: #555555;
  cursor: pointer;
}

select { cursor: pointer; }

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

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

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

/* ------ Elements ------- */

#site-bg-wrapper { background: url('Default.jpg') center top no-repeat; }

#mainwrapper { position: relative; padding-top: 165px; width: 800px; max-width: 800px; }

#loading { position: absolute; padding: 3px 5px 5px 30px; top: 0; left: 355px; background: url('loading.gif') 4px center no-repeat #e3e3e3; display: none;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
}

a.logout { display: block; position: absolute; top: 5px; right: 33px; color: #41719f; text-decoration: none; text-shadow: #000 1px 1px 1px; }
a.logout:hover { color: #fff; }

div.admintoggle { position: absolute; top: 5px; right: 0; width: 22px; height: 20px; background: url('icon-admin-panel.png') left top no-repeat; cursor: pointer; }

div.logo { position: absolute; display: tabble-cell; vertical-align: middle; top: 20px; left: 0; width: 200px; height: 120px; overflow: hidden;  }

h1.gallery-title { position: absolute; top: 50px; left: 210px; color: #ffffff; text-shadow: #000 1px 1px 1px; font: bold 40px/40px "Trebuchet MS", Verdana; }
h2.gallery-description { position: absolute; top: 95px; left: 210px; color: #ffffff; text-shadow: #000 1px 1px 1px; font: normal 20px/20px "Trebuchet MS", Verdana; }

div.error { position: absolute; top: 20px; left: 150px; width: 500px; padding: 8px 10px; background: #450101; border: 1px solid #da8080; color: #da8080; font-size: 18px; }


/* ------ Administration ------- */

#administration { display: none; border-bottom: 4px solid #042749; background: url('administration-bg.jpg') center top  no-repeat #001131; }

#administration > div.login { width: 250px; padding: 30px 0 30px 450px; background: url('administration.png') left top no-repeat; text-align: left; }

#administration input {
  width: 100%;
  margin: 1px 0 6px 0;
  padding: 4px 0;
  border: 0;
  background: url('input-bg.png') repeat-x left top #fff;
  font-weight: bold;
  font-size: 14px;
  line-height: 14px;
  color: #555555;
}

#administration input.button {
  width: 100%;
  margin: 18px 0 0 0;
  padding: 0;
  height: 30px;
  border: 1px solid #c1c1c1;
  border-top: 1px solid #d1d1d1;
  border-bottom: 1px solid #a1a1a1;
  background: url('input-button-bg.png') repeat-x left top #e8e8e8;
  font-size: 18px;
  line-height: 30px;
  color: #555555;
  cursor: pointer;
}

#administration input.clean { width: auto; height: auto; padding: 0; margin: 0; border: 0; }

#administration > div.configwrapper { width: 845px; padding: 0; font-size: 14px; line-height: 24px; }

div.configwrapper > ul.configtabs { display: block; float: left; width: 240px; margin-top: 8px; }

div.configwrapper > ul.configtabs > li { margin: 4px 0; cursor: pointer; }
div.configwrapper > ul.configtabs > li.active { background: url('configtab-bg.png') left center no-repeat; }

div.configwrapper > div.configbox { float: left; width: 540px; min-height: 160px; padding: 15px 30px 20px 30px; color: #d3d3d3; background: url('configbox-bg.png'); text-align: left; }

div.configwrapper > div.configbox div.halfbox { width: 250px; }
div.configwrapper > div.configbox div.centerbox { margin: 0 150px; clear: both; }

div.configwrapper > div.configbox div.line { height: 15px; background: url('configbox-line.png') left 40% repeat-x; }

#tab-password { padding-top: 15px; }

/* ------ Content ------- */

div.content-top-rounded { height: 23px; background: url('content-bg-top-rounded.png') center top no-repeat; }

div.content { background: url('content-bg-top.png') center top no-repeat #e6e6e6; min-height: 300px; }

div.content div.contentmsg { position: relative; margin: 0 20px 0 20px; padding: 13px; background: #707070; color: #fff; font-size: 14px; }


/* ------ Content title boxes ------- */

div.title-box { float: left; margin: -53px 0 0 10px; height: 35px; max-height: 35px; overflow: hidden; }

div.title-box > a.back { display: block; float: left; height: 26px; max-height: 26px; overflow: hidden; margin-top: 5px; padding: 0 5px 0 30px;
                         background: url('title-back-bg.png') left top no-repeat; color: #77d153; font-size: 14px; line-height: 26px; text-decoration: none; }
div.title-box > a.back:hover { color: #fff; }

div.title-box > img { display: block; float: left; width: 35px; height: 35px; }

div.title-box > a.name { display: block; float: left; height: 26px; max-height: 26px; overflow: hidden; margin-top: 5px; padding: 0 10px;
                         background: url('title-title-bg.png') right top no-repeat; color: #fff; font-size: 18px; line-height: 25px; text-decoration: none; }
div.title-box > a.name:hover { text-decoration: underline; }

div.title-box > div.stats { display: block; float: left; height: 26px; max-height: 26px; overflow: hidden; margin-top: 5px; padding: 0 10px;
                            background: url('title-stats-bg.png') right top no-repeat; color: #fff; font-size: 11px; line-height: 26px; }


/* ------ Admin functions------- */

div.admin-functions { float: right; margin: -58px 5px 0 0; }

div.admin-functions > div.input-box { float: left; margin: 5px 8px 0 0; padding: 5px; background: url('input-box-bg.png'); border-top: 0; -webkit-border-radius: 5px; -moz-border-radius: 5px; }

div.admin-functions > div.upload { position: relative; float: left; margin: 5px 10px 0 0; width: 35px; height: 34px; background: url('icon-upload.png') right top no-repeat; cursor: pointer; }
div.admin-functions > div.upload:hover { background-position: left center; }
div.admin-functions > div.active, div.admin-functions > div.active:hover { background-position: left bottom; }

div.admin-functions > div.operations { position: relative; float: left; margin: 5px 0 0 0; width: 35px; height: 34px; background: url('icon-operations.png') right top no-repeat; cursor: pointer; }
div.admin-functions > div.operations:hover { background-position: right bottom; }

div.admin-functions > div.operations > div { display: none; position: absolute; top: 30px; right: 0; padding: 5px; background: #041b32; z-index: 100; -webkit-border-radius: 5px; -moz-border-radius: 5px; }
div.admin-functions > div.operations:hover > div { display: block; }

div.admin-functions > div.operations > div > a { display: block; padding: 7px 10px 7px 5px; border-bottom: 1px solid #213f5c; color: #dddddd; font: normal 13px/13px inherit; white-space: nowrap; text-decoration: none; text-align: left;  }
div.admin-functions > div.operations > div > a > img { margin: -5px 7px -3px 0; }
div.admin-functions > div.operations > div > a:hover { color: #fff; background: #1a3855;  }

#upload-box { display: none; text-align: left; padding: 10px 25px; }

#upload-box > a { display: block; float: right; width: 83px; height: 30px; margin-left: 10px; padding-left: 28px; font-size: 14px; line-height: 30px; text-align: left; text-decoration: none; text-shadow: #444 1px 1px 2px;
                  background-image: url('upload-sprites.png'); background-repeat: no-repeat; }
                  
#upload-box > a.upload { background-position: left top; color: #e1f9d3; }
#upload-box > a.upload:hover { background-position: left bottom; }
#upload-box > a.clear { background-position: right top; color: #f9d3d3; display: none; }
#upload-box > a.clear:hover { background-position: right bottom; }

#upload-box > a:hover { color: #fff; }

#fileQueue { margin: 7px 0; padding: 10px; overflow: auto; border: 1px solid #b9b9b9; background: #dfdfdf; }

/* ------ Content GALLERIES ------- */

div.galleries { padding: 8px 0 10px 15px; }

div.galleries > a { position: relative; display: block; float: left; width: 248px; height: 219px; margin: 6px 4px 10px 4px; background: url('gallery-bg.png') left top no-repeat; text-decoration: none; }
div.galleries > a:hover { width: 160px; height: 197px; padding: 22px 44px 0 44px; background-position: left bottom; }

div.galleries > a > div { position: absolute; display: table-cell; vertical-align: middle; width: 87px; height: 65px; padding: 3px; background: #000; opacity: 0.8; overflow: hidden; }
div.galleries > a > div > img { max-width: 87px; height: 65px; }

div.galleries > a > div.thumb1 { top: 26px; left: 75px; z-index: 20; }
div.galleries > a > div.thumb2 { top: 65px; left: 20px; z-index: 10; }
div.galleries > a > div.thumb3 { top: 59px; right: 20px; z-index: 30; }

div.galleries > a:hover > div.thumb1 { position: relative; top: auto; left: auto; margin: 0; width: 160px; height: 120px; opacity: 1; }
div.galleries > a:hover > div.thumb2 { display: none; }
div.galleries > a:hover > div.thumb3 { display: none; }
div.galleries > a:hover > div > img { width: auto; max-width: 160px; height: auto; }

div.galleries > a > h1 { display: block; position: absolute; width: 230px; left: 9px; bottom: 37px; font-size: 18px; color: #031a30; text-shadow: #6c6c6c 0px 0px 4px; overflow: hidden; }
div.galleries > a > h2 { display: block; position: absolute; width: 230px; left: 9px; bottom: 15px; font-size: 13px; color: #2f92b2; text-shadow: none; }


/* ------ Content IMAGES ------- */

div.images { padding: 0 0 10px 20px; overflow: auto; }

div.images > a { position: relative; display: block; float: left; width: 162px; height: 158px; padding: 11px 11px 0 11px; margin: 5px 3px; background: url('image-bg.png') left top no-repeat; text-decoration: none;  }
div.images > a:hover { background-position: left bottom; }
div.images > a:hover > p { position: absolute; display: block; top: 0; left: 0; width: 184px; height: 169px; background: url('image-bg.png') left top no-repeat; z-index: 50;}

div.images > a > span { display: table-cell; vertical-align: middle; width: 162px; height: 122px; background: #000; }
div.images > a > span > img { border: 1px solid #000; }

div.images > a > h1 { display: block; position: absolute; bottom: 12px; left: 14px; font-size: 13px; color: #424141; }
div.images > a > h2 { display: block; position: absolute; bottom: 12px; right: 15px; font-size: 13px; color: #424141; }

div.images > a > div.delete { display: none; position: absolute; width: 63px; height: 21px; right: 7px; bottom: 7px; padding: 0 6px 0 0; font-size: 13px; line-height: 21px; color: #ea5b5b; text-align: right;
                      background: url('delete-image-bg.png') right bottom no-repeat; opacity: 0.4; }
div.images > a > div.delete:hover { color: #fff; opacity: 1; }
div.images > a:hover > div { display: block; z-index: 100; }


/* ------ Footer ------- */

div.footer { height: 174px; background: url('foot-bg.png') center top no-repeat; font-size: 11px; color: #878889; }

div.footer > div.left { float: left; padding: 43px 0 0 10px; }
div.footer > div.right { float: right; padding: 43px 10px 0 0; }


/* ------- Uploadify ------- */

.uploadifyQueueItem {
	font: 11px Verdana, Geneva, sans-serif;
	border: 2px solid #646464;
	background-color: #F5F5F5;
	margin: 5px;
	padding: 10px;
	width: 330px;
	float: left;
}
.uploadifyError {
	border: 2px solid #FBCBBC !important;
	background-color: #FDE5DD !important;
}
.uploadifyQueueItem .cancel {
	float: right;
}
.uploadifyProgress {
	background-color: #FFFFFF;
	border-top: 1px solid #808080;
	border-left: 1px solid #808080;
	border-right: 1px solid #C5C5C5;
	border-bottom: 1px solid #C5C5C5;
	margin-top: 10px;
	width: 100%;
}
.uploadifyProgressBar {
	background-color: #0099FF;
	width: 1px;
	height: 3px;
}