@import url("components/core.css");
@import url("public-components/frontpage.css");
@import url("components/ui-icons.css");

/* Layout. */
HTML, BODY {
  height : 100%;
  background-color : #f5f5f5;
}

BODY.gradient {
  height : auto;
  min-height : 100%;
  /*
  background : linear-gradient(top, #c6c6c6, #dedede);
  background-image : -moz-linear-gradient(top, #c6c6c6, #dedede);
  background-image : -webkit-gradient(linear, left top, left bottom, color-stop(0, #c6c6c6), color-stop(1, #dedede));
  filter : progid:DXImageTransform.Microsoft.gradient(startColorStr="#c6c6c6", EndColorStr="#dedede");
  background-attachment : fixed;
  */

  background : #f5f5f5 url("../images/public/background-gradient.png") fixed repeat-x left top;
  /*background-size : auto 100%;*/
}

BODY {
  /*padding : 0 64px;*/
  padding : 0 51px;
}

BODY.gallery {
  min-width : 664px;
}

#w {
  position : relative;
  /*padding : 40px 38px 40px 64px;*/
  padding : 0 0 40px 0;
  margin : 0 auto;
}

BODY.gallery #w {
  width : 1660px; /* 10 pieces per row. */
  width : 996px; /* 6 pieces per row. */
}

/* Wrapper width in steps. */
/*
@media screen and (max-width : 1762px) {
  BODY.gallery #w {
    width : 1494px;
  }
}

@media screen and (max-width : 1596px) {
  BODY.gallery #w {
    width : 1328px;
  }
}

@media screen and (max-width : 1430px) {
  BODY.gallery #w {
    width : 1162px;
  }
}

@media screen and (max-width : 1264px) {
  BODY.gallery #w {
    width : 996px;
  }
}
*/
@media screen and (max-width : 1098px) {
  BODY.gallery #w {
    width : 830px;
  }
}

@media screen and (max-width : 932px) {
  BODY.gallery #w{
    width : 664px;
  }
}

.header {
  overflow : hidden;
  padding : 37.5px 13px 37.5px 13px;
}

.navigation {
}

.navigation UL {
  overflow : hidden;
}

.navigation UL LI {
  float : right;
  margin-left : 3px;
}

.navigation UL LI:first-child {
  float : left;
  margin-left : 0;
}

.extra-links {
  float : right;
}

.extra-links UL {
  overflow : hidden;
}

.extra-links UL LI {
  float : right;
  margin-right : 3px;
}

.extra-links UL LI:first-child {
  margin-right : 0;
}

.main {
  overflow : hidden;
  position : relative;
}

.main .upper {
  width : 664px;
  padding : 32px 0 44px;
}

/* Typography. */
BODY, LABEL, INPUT, SELECT, TEXTAREA, BUTTON {
  font : normal normal normal 14px/24px "Verdana",sans-serif;
  letter-spacing : -0.25px;

  /* Better font rendering on Webkit-based browsers on Mac OS. */
  -webkit-font-smoothing: antialiased;

  color : #202020;
}

H1, H2, H3, H4, H5, H6, LEGEND {
  font-weight : bold;
  color : #000;
}

H1, H2, H3, H4, H5, H6 {
  padding-bottom : 15px;
}

STRONG {
  font-weight : bold;
  color : #000;
}

EM {
  font-style : italic;
}

STRIKE {
  text-decoration : line-through;
}

.normal {
  font-style : normal;
  font-weight : normal;
}

.bold {
  font-style : normal;
  font-weight : bold;
  color : #000;
}

.italic {
  font-style : italic;
  font-weight : normal;
}

H1 {
  font-size : 21px;
  line-height : 25px;
}

H2 {
  font-size : 18px;
  line-height : 22px;
}

H3 {
  font-size : 15px;
  line-height : 19px;
}

H4 {
  font-size : 13.5px;
  line-height : 19px;
}

H5 {
  font-size : 12px;
  line-height : 16px;
}

H6 {
  font-size : 9px;
  line-height : 13px;
}

P, .p {
  padding-bottom : 12px;
  color : #202020;
}

A {
  text-decoration : none;
  color : #707070;
}

A:active, A:hover {
  text-decoration : underline;
}

.header P {
  padding-bottom : 0;
}

.navigation,
.navigation P {
  font-size : 20px;
  line-height : 20px;
}

.navigation A {
  text-decoration : none;
  color : #000;
}

.navigation A.active {
  text-decoration : underline;
}

.navigation .separator {
}

/* Common elements. */
/* Input elements. */
LABEL, INPUT, SELECT, TEXTAREA, BUTTON {
  display : block;

  /* We do not want Safari on iOS to style the input element to its liking. */
  -webkit-appearance : none;

  /* Safari on iOS 5 does not remove rounded borders when setting -webkit-appearance to none. */
  /* We need to use border-radius instead. */
  border-radius : 0;
}

LABEL, .row-label {
  margin : 0 10px 5px 0;
}

.row-label {
  float : left;
}

LABEL {
  cursor : pointer;
}

LABEL:active,
LABEL:hover {
  text-decoration : underline;
}

LABEL.checked {
  cursor : default;
  font-weight : bold;
  color : #000;
}

LABEL.checked:active,
LABEL.checked:hover {
  text-decoration : none;
}

LABEL.search-label {
  cursor : default;
}

LABEL.search-label:active,
LABEL.search-label:hover {
  text-decoration : none;
}

INPUT, TEXTAREA, BUTTON {
  width : 202px;
  padding : 0 6px;
  margin : 0 5px 5px 0;
}

INPUT {
  padding : 0;
}

TEXTAREA {
}

INPUT[type="text"], INPUT[type="search"], INPUT[type="password"] {
  height : 24px;
  border-bottom : 1px solid #3b3d3c;
}

INPUT[type="date"], INPUT[type="datetime"], INPUT[type="time"],
INPUT.date,
INPUT.ie-date {
  /* Date, datetime and time inputs have a datepicker icon next to them. Display inline. */
  display : inline;
  cursor : default;
  width : 92px;
  height : 24px;
  padding-right : 0;
  padding-left : 0;
  border-bottom : 0;
  font-weight : bold;
  color : #000;
  text-align : center;
}

INPUT[type="submit"], BUTTON
{
  cursor : pointer;

  /* Overflow visible and width auto helps IE to render buttons correctly. */
  overflow : visible;
  width : auto;
}

INPUT[type="checkbox"], INPUT[type="radio"] {
  width : auto;
  padding : 0;
  margin-top : 4px;
  background : transparent;
}

/* Checkboxes and radio buttons are affected by all style definitions on Android. */
/* Display them in native look. */
INPUT[type="checkbox"] {
  -webkit-appearance : checkbox;
}

INPUT[type="radio"] {
  -webkit-appearance : radio;
}

/* Display select elements in native look. */
SELECT {
  -webkit-appearance : menulist;
}

INPUT[type="text"]:focus, INPUT[type="password"]:focus, TEXTAREA:focus,
INPUT[type="text"].hover, INPUT[type="password"].hover, TEXTAREA.hover,
INPUT[type="submit"]:hover, BUTTON:hover {
}

.custom-time-range .row-label,
.custom-time-range INPUT[type="date"],
.custom-time-range INPUT[type="datetime"],
.custom-time-range INPUT[type="time"],
.custom-time-range INPUT.date,
.custom-time-range INPUT.ie-date {
  margin-right : 3px;
}

/* When it is desired to have inputs on the same row. */
.inline-input {
  float : left;
  clear : none;
  margin-top : 0 !important;
  margin-left : 0 !important;
}

/* When it is desired to have label and the associated input element on the same row. */
.inline-input-label {
  position : relative;
  overflow : hidden;
}

.inline-input-label DIV,
.inline-input-label LABEL,
.inline-input-label INPUT,
.inline-input-label TEXTAREA,
.inline-input-label SELECT,
.inline-input-label .row-label {
  float : left;
  margin-bottom : 0;
}

/* Clear button for inputs. */
.clear-input-button {
  position : absolute;
  top : 4px;
  right : -8px;
  width : 37px;
  height : 37px;
  background : transparent url("../images/public/button-clear.png") scroll no-repeat center center;
  cursor : pointer;
}

/* Special elements. */
.navigation .sponsor SPAN {
  font-size : 11px;
  color : #7f7f7f;
}

.navigation .sponsor IMG {
  display : inline;
  margin-left : 10px;
  vertical-align : middle;
}

.gallery .upper {
  overflow : hidden;
  padding-left : 13px;
}

.gallery .upper .text,
.gallery .upper .filter {
  float : left;
  width : 306px;
}

/* Search input bottom border lacks one pixel. */
.gallery .upper .filter {
  width : 310px;
}

.gallery .upper .filter INPUT#search {
  width : 202px;
  padding-right : 24px;
  margin-right : 0;
}

.gallery .upper .text {
  margin-right : 26px;
}

.gallery .upper .filter {
  cursor : default;
}

.gallery .upper .filter .inline-input-label.search {
  padding-top : 12px;
}

.pieces-total {
  position : fixed;
  visibility : hidden;
  top : 50%;
  left : 0;
}

.pieces-total>SPAN {
  display : block;
}

.to-top {
  position : fixed;
  /*visibility : hidden;*/
  top : 50%;
  right : 17px;
  /*left : 0;*/
  width : 30px;
  height : 40px;
  background : transparent url("../images/public/arrow.png") scroll no-repeat left top;
}

.to-top>SPAN {
  display : none;
}

.custom-radio-button {
  display : none;
}

.pagination {
  display : none;
}

.pagination .page.active {
  font-weight : bold;
  color : #000;
}

.pagination .next.disabled {
  display : none;
}

#bottom-waypoint {
}

/* Exceptions and feature disable. */
/* Hide encrypted words by default. */
.words-encrypted {
  display : none;
}

/* Hide checkboxes and radio buttons by default. */
INPUT[type='checkbox'],
INPUT[type='radio'] {
  display : none;
}