/*
 * Styler.co.nz colors and background images -- the superficialest of
 * presentation stuff. No position or size info should go in here:
 * it should be limited almost solely to "background", "color",
 * "border-style", "border-color" and "text-decoration" declarations.
 *
 * You should be able to remove this file, and *nothing* on the screen
 * should change position.
 *
 */


/* Layout
-------------------------------------------- */

body {
  color: black;
  background: white;
}

#header {
  background: url(../images/header-green.gif) no-repeat;
}

#page-index .main a {
  background-repeat: no-repeat;
  color: white;
}
#page-index .main a:visited { color: white; }
#page-index .main a:hover { color: white; }
#page-index .main a:active { color: white; }

#page-index .main a.art { background-image: url(../images/buttons/main-art.jpg); }
#page-index .main a.art:hover { background-image: url(../images/buttons/main-art-over.jpg); }
#page-index .main a.fashion { background-image: url(../images/buttons/main-fashion.jpg); }
#page-index .main a.fashion:hover { background-image: url(../images/buttons/main-fashion-over.jpg); }
#page-index .main a.design { background-image: url(../images/buttons/main-design.gif); }
#page-index .main a.design:hover { background-image: url(../images/buttons/main-design-over.gif); }

#page-main-art .main .autoflick, #page-main-design .main .autoflick, #page-main-fashion .main .autoflick {
  border: 1px solid black;
}

#content .header {
  background: #b9b9b9 url(../images/header-tab-grey.gif) no-repeat;
  background-position: right top;
}

#content .breadcrumbs {
  background: #ddd;
}
  #content .breadcrumbs a {
    color: black;
    text-decoration: none;
  }
  #content .breadcrumbs a:hover {
    color: black;
    text-decoration: underline;
  }


#profile-vote {
  background: url(../images/vote-bar.jpg) no-repeat;
  color: white;
}

#footer {
  border-top-style: solid;
  border-top-color: #777;
  color: #999;
}


.tab {
  background: white;
  border-style: solid;
  border-color: #e3e3e3;
  border-top: none;
}
.tab-box {
  border-style: solid;
  border-color: #e3e3e3;
}
  .tab h4 {
    background: #e3e3e3;
    color: #666;
  }
  .tab a:hover {
    background: #a0a0a0;
    color: white;
  }
  .tab .header {
    background-repeat: no-repeat;
    color: white;
  }

body.art .store-active .menu-art a.store,
body.art .school-active .menu-art a.school,
body.art .bio-active .menu-art a.bio,
body.design .store-active .menu-design a.store,
body.design .school-active .menu-design a.school,
body.design .bio-active .menu-design a.bio,
body.fashion .store-active .menu-fashion a.store,
body.fashion .school-active .menu-fashion a.school,
body.fashion .bio-active .menu-fashion a.bio
 {
  background-image: url(../images/menu-triangle.gif);
  background-position: left center;
  background-repeat: no-repeat;
}

.sidebar-left .menu-tab .header { background-image: url(../images/tab-dark-grey-l.gif); }
.sidebar-left .pic-tab .header { background-image: url(../images/tab-light-grey-l.gif); }
.sidebar-left .tab.active .header { background-image: url(../images/tab-green-l.gif); }
.sidebar-left .tab a, .sidebar-left .tab a:visited { color: black; }
.sidebar-left .tab a:hover { color: white; }

.sidebar-right .menu-tab { border: none; }
.sidebar-right .menu-tab .header { background-image: url(../images/tab-star-grey-r.gif); }
.sidebar-right .pic-tab .header { background-image: url(../images/tab-light-grey-r.gif); }
.sidebar-right .tab.active .header { background-image: url(../images/tab-green-r.gif); }
.sidebar-right .tab a, .sidebar-right .tab a:visited { color: #888; }
.sidebar-right .tab a:hover { color: white; }

a .tab {
  color: #888;
}
a:visited .tab {
  color: #888;
}
a:hover .tab {
  color: white;
  background: #a0a0a0;
}

.menu-tab .menu-art a:hover { background: #ad9c69; }
.menu-tab .menu-design a:hover { background: #ee0000; }
.menu-tab .menu-fashion a:hover { background: black; }

.pic-tab .header, .sidebar-left .menu-tab .header { background-color: white; }
.pic-tab .header { color: #545454; }
.pic-tab a:hover { background: transparent; }


.tab .header a, .tab .header a:visited { color: white; }
.tab .header a:hover { background: transparent; }


.login-tab {
  background: #cfcfcf;
}
  .login-tab input.text, .login-tab input.password {
    color: black;
    border-style: solid;
    border-color: black;
  }
  .login-tab input.submit, .login-tab input.submit:hover {
    color: black;
    background: transparent;
  }

#search-box input.submit {
  color: white;
  background: none;
}
#search-box a { color: white; }
#search-box a:hover { text-decoration: underline; }



/* Elements
-------------------------------------------- */
h2.section-heading {
  background: #6c8c29 url(../images/tab-flat-green-l.gif) no-repeat;
  background-position: right top;
  color: white;
}

h2 {
  color: #789c40;
}

.content-header {
  color: black;
  background-image: url(../images/content-header.gif);
  background-repeat: no-repeat;
  background-position: right top;
}

#page-main-art .content-header, body.art .content-header {
  color: #ad9c69;
  background-image: url(../images/content-art-header.gif);
}
#page-main-design .content-header, body.design .content-header {
  color: #cb2a24;
  background-image: url(../images/content-design-header.gif);
}
#page-main-fashion .content-header, body.fashion .content-header {
  color: black;
  background-image: url(../images/content-fashion-header.gif);
}

h2.step {
  background-repeat: no-repeat;
  background-position: left center;
}

h2.step-1 { background-image: url(../images/heading-step-1.gif); }
h2.step-2 { background-image: url(../images/heading-step-2.gif); }
h2.step-3 { background-image: url(../images/heading-step-3.gif); }
h2.step-4 { background-image: url(../images/heading-step-4.gif); }
h2.step-5 { background-image: url(../images/heading-step-5.gif); }
h2.step-6 { background-image: url(../images/heading-step-6.gif); }
h2.step-7 { background-image: url(../images/heading-step-7.gif); }



.info-message {
  color: black;
  background-color: #eef9d9;
  border-style: solid;
  border-color: #797;
}



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

#content .header .form-step {
  background-repeat: no-repeat;
  background-position: left center;
}
#content .header a.form-step {
  color: #666;
  text-decoration: none;
}
#content .header a.form-step:hover, #content .header a.form-step-active {
  color: white;
}
#content .header .step-1 { background-image: url(../images/buttons/step-1-bar.gif); }
#content .header .step-2 { background-image: url(../images/buttons/step-2-bar.gif); }
#content .header .step-3 { background-image: url(../images/buttons/step-3-bar.gif); }
#content .header .step-4 { background-image: url(../images/buttons/step-4-bar.gif); }
#content .header .step-5 { background-image: url(../images/buttons/step-5-bar.gif); }
#content .header .step-6 { background-image: url(../images/buttons/step-6-bar.gif); }
#content .header .step-7 { background-image: url(../images/buttons/step-7-bar.gif); }

#content .header a.step-1:hover, #content .header a.step-1-active { background-image: url(../images/buttons/step-1-bar-over.gif); }
#content .header a.step-2:hover, #content .header a.step-2-active { background-image: url(../images/buttons/step-2-bar-over.gif); }
#content .header a.step-3:hover, #content .header a.step-3-active { background-image: url(../images/buttons/step-3-bar-over.gif); }
#content .header a.step-4:hover, #content .header a.step-4-active { background-image: url(../images/buttons/step-4-bar-over.gif); }
#content .header a.step-5:hover, #content .header a.step-5-active { background-image: url(../images/buttons/step-5-bar-over.gif); }
#content .header a.step-6:hover, #content .header a.step-6-active { background-image: url(../images/buttons/step-6-bar-over.gif); }
#content .header a.step-7:hover, #content .header a.step-7-active { background-image: url(../images/buttons/step-7-bar-over.gif); }



/* Links
-------------------------------------------- */

a {
  color: #406c00;
  text-decoration: none;
}
a:visited { color: #406c00; }
a:hover { color: #98ac70; }
a:active { text-decoration: none; }

#footer a {
  color: #999;
  text-decoration: none;
}
#footer a:hover { text-decoration: underline; }



/* Styler matcher
-------------------------------------------- */

.frame {
  background-color: #e7e7e7;
  border-style: solid;
  border-color: #888;
}

.flick a, .userpic .frame .thumbnail {
  border-style: solid;
  border-color: black;
  background: white;
}

.flick-button-prev:hover, .flick-button-next:hover {
  background-color: #ccc;
}



/* Forms
-------------------------------------------- */

input.submit {
  color: white;
  background: url(../images/buttons/form-button-grey.gif);
}

input.submit:hover { background: url(../images/buttons/form-button-grey-over.gif); }

input.small-submit,
  form.portal-cart-add-item input.submit {
  background: url(../images/buttons/form-button-small-grey.gif);
}
input.small-submit:hover,
  form.portal-cart-add-item input.submit:hover {
  background: url(../images/buttons/form-button-small-grey-over.gif);
}

input.plain-submit, input.plain-submit:hover {
  background: transparent;
}

input.green-submit { background: url(../images/buttons/form-button-green.gif); }
input.green-submit:hover { background: url(../images/buttons/form-button-green-over.gif); }

input.grey-submit { background: url(../images/buttons/form-button-grey.gif); }
input.grey-submit:hover { background: url(../images/buttons/form-button-grey-over.gif); }

input.text, input.password, textarea, select {
  color: black;
  border-style: solid;
  border-color: black;
}



/* Tables
-------------------------------------------- */

td {
  border-style: solid;
  border-color: #a4b8cf;
}
.columns td {
  border-left-style: solid;
  border-right-style: solid;
  border-left-color: black;
  border-right-color: black;
}

.even-odd tr.first th {
  background: white;
  border-bottom-style: solid;
  border-bottom-color: black;
}
.even-odd tr.even { background-color: #f3f5f7; }