/*   SITEWIDE LAYOUT ANT TYPOGRAPHY RULES  ---- Color rules go at the bottom-------------------------------*/

/*---------------------------------element resets ----------------------------*/

body{  height: 100%; position: relative; 
       font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua",
       Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond,
       "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook",
       "Century Schoolbook L", Georgia, serif;
      font-size: 12px; letter-spacing: .05em; line-height: 20px;  }

body:focus,      /*this is for IE8 */
div:focus,
li:focus,
span:focus {outline-style: none;}
a{ text-decoration: none; }

p {margin: 0px;}
p + p {margin-top: 20px;}

li {list-style: none;}

ul, li, 
h1, h4, h5, h6{ margin: 0; padding: 0}

a img {border: 0px;}
h3 { background: url('../chrome/h3-underline.png') bottom repeat-x; border: 0; padding: 0 2px 2px;
     height: 18px;  letter-spacing: .3em; text-transform:uppercase; font-size: 12px; margin: 0 0 20px 0;}

h2 { padding: 5px 15px; margin: 20px 0 20px -7px; height: 30px; width: 845px; 
     background: url('../chrome/h2-back.jpg'); line-height: 20px;}

:focus {outline: none;}

h3 + p:first-line {font-weight: bold;}

blockquote {font-size: 1.4em; color: #909090; width: 300px; padding: 0;}

blockquote p:before {content: url('../chrome/quotes.png');}

#outer-wrapper{ min-height: 100%;  width: 952px;  margin: 0 auto;  position: relative;
                background-image: url('../chrome/content-back.jpg'); }
                
/* -----------------------------header---------------------------------------------------------------------------*/
#header{ width: 860px; height: 171px; padding: 10px 50px 0 50px; position: relative;
          background: url('../chrome/content-edges.jpg') -0px -0px no-repeat;}


h1{ height: 70px; width: 225px; overflow: hidden; position: absolute; bottom: 0px; overflow: hidden; }

         
#main-nav-bar{ height: 30px; width: 440px; position: absolute; bottom: 0px;  right: 50px;
               background: url("../chrome/nav-back.jpg") no-repeat; font-size: 12px;
               padding-top: 5px; }

#home-link {margin-left: 40px;}
#contact-link {margin-right: 20px;}
/* Styles for the entire LavaLamp menu */
.lavaLamp {

}


.lavaLamp li {
    display: block;
    float: left;
    background: black url("../chrome/nav-back.jpg") center;
    /*width: 110px;*/
}

.lavaLamp li.backLava {
    background: url("../chrome/lava.jpg") -50px 0px;
    z-index: 8;
    position: absolute;    
}

li.backLava .leftLava {position: absolute; left: 0; width: 4px; height: 20px; background: url('../chrome/lava-ends.png') 0 0 no-repeat;}
li.backLava .rightLava {position: absolute; right: 0; width: 4px; height: 20px; background: url('../chrome/lava-ends.png') -4px 0 no-repeat;}
        /* Styles for each menu-item. */
.lavaLamp li a {
    position: relative; overflow: hidden;
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    z-index: 10; letter-spacing: .2em;
    display: block;
    margin: auto 10px;
    color: #f0f0ff;
}


#header-shopping-cart { float: right; margin-top: 10px; margin-right: 20px;}


/* ----------------------------main content -------------------------------------------------------------------*/

#main-content{ position: relative; padding: 10px 50px 0 50px; width: 860px; }
#main-content p a{ font-weight: bold;}

#breadcrumbs { padding: 0 15px; margin: 20px 0 0 -7px; height: 20px; line-height: 20px; }
#breadcrumbs li { height: 15px; display: inline; }
#breadcrumbs li.separator {padding: 0 4px; font-size: 1.1em; }
#breadcrumbs a {font-weight: bold;}
#breadcrumbs h2 {display: inline; background: none; font-size: 12px; padding: 0; margin: 0;}

/*------------------------------footer--------------------------------------------------------------------------*/
#footer{ margin: 40px 0 0px; height: 160px; clear: both;
         text-align: center; font-size: 11px; background: white url('../chrome/content-edges.jpg') -0px -171px no-repeat;}

#footer p.phone{ height: 50px; line-height: 50px; padding-top: 10px; vertical-align: baseline; font-size: 25px; font-family: papyrus;}

#bottom-menu li{ display: inline; }
#footer p {margin: 0px; font-size: 10px;}

#bottom-menu + p {margin-top: 50px;}



/*------------------------------------------Rules used on multiple views--------------------*/

.product-image-details {position: absolute; display: none; background: black;}
.right-sandbag-spacer,
.right-sandbag { display: block; float: right; clear: right; margin-left: 25px;}       /*spacers are hacks for IE 7*/

.left-sandbag-spacer,
.left-sandbag { display: block; float:left; clear: left; margin-right: 25px;}

.gallery-header a[href^='http']:after,
.gallery-container .gallery + ul li > a[href^='http']:after,
.galleries-links ul li > a:after,
.gallery-frontpage li > a[href^='http']:after,
.galleries-list li > a[href^='http']:after,
#sitemap li > a[href^='http']:after {content: url('../chrome/link-arrows.png'); vertical-align: bottom; }


/*-----------------------------   PARTICULAR VIEW RULES-------------------------------------------------*/
/* --------------------------Home View ----------------------------------------------------------------------*/

/*#home-image-display{ height: 342px; width: 860px; padding: 0; position: relative;}*/
/*#home-image-display img {height: 342px; position: absolute; right: 0; bottom: 0;}*/

#home-image-display-1,
#home-image-display-1 img{float: left; display: block; margin: 37px 0 20px;}

#home-image-display-2,
#home-image-display-2 img{float: right; clear: right; display: block; margin: 22px 0 0;}

#home-image-display-3,
#home-image-display-3 img{float: left; clear: left; display: block; /*margin: 22px 0 0;*/}

.main-text-content {margin-top: 40px; float: right;}
.galleries-links {float: left;}
.studio-visits {float: right;}

.main-text-content,
.galleries-links,
.studio-visits { width: 423px; text-align: justify; }

.main-text-content h3,
.galleries-links h3,
.studio-visits h3{ margin: 20px 0 20px;}

.galleries-links h3 {text-align: right;}

.main-text-content p,
.studio-visits p{ padding: 0 65px 0 0; }

.galleries-links p { padding: 0 0 0 65px;}

.galleries-links ul {margin: 20px 0 0 60px;}
.galleries-links ul li { text-align: right; width: 10em; padding: 1px; margin: 0}
.galleries-links ul li a { font-weight: bold;}

/* --------------------------Gallery View ----------------------------------------------------------------------*/

.gallery-header {text-align: right; margin: -40px 0 20px; font-weight: bold;}
.gallery li{ display: inline-block; width: 210px; vertical-align:top; text-align: center; font-size: 11px;
             background: url('../chrome/other-backs.jpg') 0px 0px repeat-y; position: relative;}

.gallery li.portrait span.image { height: 200px; line-height: 200px; }
.gallery li.portrait span.image img { vertical-align: middle; }
.gallery li.row-0 { margin: 5px 1px 25px 0; }

.gallery li.row-1,
.gallery li.row-2{ margin: 5px 1px 25px 2px;}

.gallery li.row-3{ margin: 5px -1px 25px 1px;}

.gallery li span {display: block;}

.gallery li span.in-stock {display: inline; position: absolute; left: -2px;}
.gallery li span.image { padding-top: 10px; margin-top: -10px; background: url('../chrome/other-edges.jpg') 0px -40px no-repeat;}
.gallery li span.name { height: 40px; padding: 10px;}
.gallery li span.price { height: 20px; padding: 10px; margin-bottom: -10px; background: url('../chrome/other-edges.jpg') -0px -0px no-repeat;}
.gallery li a img {border: 0px;}

.gallery span.price {font-size: 14px; font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;}


/* --------------------------Product View ----------------------------------------------------------------------*/

.product-display {position: relative; min-height: 480px; }

.product-info{ width: 230px; display: inline-block; float: left; margin-top: 30px; padding: 0 10px;
               background: url('../chrome/other-backs.jpg') -210px 0;}
               
.product-info .top { background: url('../chrome/other-edges.jpg') -210px -40px no-repeat; 
                     width: 250px; margin-left:  -10px; margin-top: -5px; border: 0px; padding: 10px 0 0;}

.product-info h3 {width: 220px; padding: 0 10px 20px; border: 0; text-align: center; margin-bottom: 0; text-transform: none; background: none; font-size: .9em;}
.product-info p { margin: 0; text-align: right;}
.product-info > li{ margin: 0 15px 10px; border-style: dotted; border-width: 0 0 1px; padding: 0 10px; }
.product-info span {font-weight: bold;}
.product-info li.note{ border-style: none; }
.product-info table { width: 100%; margin: 0; padding: 0; border-collapse: collapse;}
.product-info th {border-bottom: dotted 1px;  }
.product-info th,
.product-info td { padding: 2px 5px; text-align: center;}

.product-info .navigation {text-align: center; border-bottom: 0px; margin: 0 0 -10px -10px ; width: 250px; padding: 0 0 15px;
                           background: url('../chrome/other-edges.jpg') -210px 0 no-repeat; }
.product-info .navigation li{ display: inline; }

.product-display .portrait,
.photos {width: 450px; display: inline-block;  margin: 30px 10px 30px 10px;}

.product-display .portrait img { display: block; margin: 0 auto; max-height: 450px; max-width: 450px; }

.photos {height: 401px; position: relative;}
.photos li{ display: inline-block; height: 100px; width: 150px;  border: none; background-color: black;}
.photos a{ display: inline-block; height: 100px; width: 150px;  border: 0; }
.photos img{ position: absolute; bottom: 100px; width: 450px;}
.photos .product-image-0{ position: absolute; left: 150px; bottom: 0; }
.photos .product-image-0 img{ left: -150px; }
.photos .product-image-1 img,
.photos .product-image-2 img{ display: none; }
.photos .product-image-1{ position: absolute; left: 0; bottom: 0;}
.photos .product-image-1 img{ left: 0px;}
.photos .product-image-2{ position: absolute; left: 300px; bottom: 0; }
.photos .product-image-2 img{ left: -300px; }
.photos a:hover img.hoverable { display: block; }


/*.portrait img { max-height: 371px; }*/

.form-panel{ display: inline-block; width: 153px; vertical-align: top; margin: 30px 0 0 -17px; }
.form-panel select { margin-bottom: 10px; border: 0;}

.form-panel label { font-size: 14px; padding: 2px; border: 0; font-weight: bold; text-align: right;}

.form-panel p {padding: 0 0 0 10px; text-align: right;}
p.shipping {font-weight: bold;}

.add-to-cart input { margin-left: 10px;}
.add-to-cart input.quantity {width: 20px;}

.add-to-cart div{text-align: right;}

/* --------------------------Gallery List View --------------------------------------------------------------*/

.galleries-list > li {}

.galleries-list h3 { clear: both;}
.galleries-list p {text-align: justify; }

.galleries-list img + p:first-line {font-weight: bold;}

.sinks-gallery-listing img {float: right;  margin: -40px 0 12px;}
.plaques-gallery-listing img{float: right; margin: -40px 0 40px;}

.bowls-gallery-listing img,
.tiles-gallery-listing img {float: left;}

.sinks-gallery-listing h3 {width: 413px; text-align: right;}
.tiles-gallery-listing h3 {width: 432px; margin-left: 417px;}
.plaques-gallery-listing h3 { width: 450px; text-align: right; margin-top: 40px;}
.bowls-gallery-listing h3 {width: 390px; margin-left: 459px;}

.sinks-gallery-listing p { width: 378px;  padding: 0 0 0 40px; }
.tiles-gallery-listing p { width: 400px; padding-left: 420px; }
.plaques-gallery-listing p {width: 414px; padding-left: 40px;}
.bowls-gallery-listing p {width: 370px; padding-left: 460px;}

.sinks-gallery-listing ul {margin: 20px 0 0 30px;}
.tiles-gallery-listing ul {margin: 20px 0 0 410px;}
.plaques-gallery-listing ul {margin: 20px 0 0 30px;}
.bowls-gallery-listing ul {margin: 20px 0 0 450px;}


.galleries-list ul li {display: list-item;  margin: 0 0 0 30px; padding: 0}
.galleries-list li + li > a {font-weight: bold;}

/* --------------------------Gallery Frontpage View --------------------------------------------------------------*/

.gallery-frontpage { width: 400px; float: right;}

.gallery-container { width: 430px; float: left; margin: 12px 0 0;}

.gallery-container .gallery + ul {margin-left: 300px;}
.gallery-container .gallery + ul li { list-style: disc;}
.gallery-container .gallery li.row-0,
.gallery-container .gallery li.row-2{ margin: 13px 0px 25px 0px;}

.gallery-container .gallery li.row-1,
.gallery-container .gallery li.row-3{ margin: 13px 0px 25px 2px;}

.gallery-frontpage h2 {width: 377px; position: relative;}
.gallery-frontpage h2 span {display: block; width: 10px; height: 100%; position: absolute; right: -10px; top: 0px;
                            background :url('../chrome/h2-back.jpg') top right;}

.gallery-frontpage li { margin: 0 0 40px;}
.gallery-frontpage p { text-align: justify;}

.gallery-frontpage h3 {padding: 0 0 2px 10px;}

#tips-list {margin: 0px 0 20px;}
#tips-list li {margin: 20px 0 0;}

.gallery-frontpage ul li {display: list-item; list-style: disc outside; margin: 0 0 0 32px; padding: 0}


/* --------------------------About View --------------------------------------------------------------*/


.ceramic-designs img {float: right; clear: right; max-width: 425px;}
.ceramic-designs blockquote {float: right; margin-top: -33px;}
.ceramic-designs p {width: 350px; padding-left: 50px; text-align: justify;}
.ceramic-designs img + p:first-line{font-weight: bold;}
.ceramic-designs h3 {width: 400px; text-align: right; margin-top: 40px;}

.ceramic-designs blockquote p {margin: 0; padding: 0;}

.bio h3 {clear: both; width: 450px; margin: 30px 0 0 405px;}
.bio p {width: 400px; padding-right: 50px; float: right; clear: right; text-align: justify}
.bio img + p:first-line {font-weight: bold;}
.bio img {float: left; margin-left: 50px;}
.bio p + p {margin-bottom: 40px;}

.galleries-representing h3 {clear: both; text-align: center;}

.galleries-representing .vcard { display: block; width: 260px; height: 8em; float: left; }

                     
.galleries-representing .fn:before {content: url('../chrome/honu2.png');}

.distributors h3 {width: 285px; clear: both; text-align: right;}
.distributors img {float: right; margin-top: -140px;}
.distributors ul {padding: 0 0 60px 50px;}
.distributors .vcard { list-style: url('../chrome/honu2.png'); width: 260px;}

.galleries-representing .fn,
.distributors .fn { display: inline; font-weight: bold;  font-style: italic; }

.galleries-representing .vcard .tel,
.galleries-representing .vcard .email,
.distributors .vcard .tel,
.distributors .vcard .email {display: block; margin: 3px 0 3px 50px; }

/* --------------------------Contact View --------------------------------------------------------------*/

#hula1 {float: left; display: block; margin: 40px 0 0 100px;}
#hula2 {float: right; display: block; margin: 40px 50px 0 0;}

#contact-text {width: 375px; float: right; padding-top: 20px;}
#contact-text h2 {width: 300px; position: relative; }
#contact-text h2 span {display: block; width: 10px; height: 100%; position: absolute; right: -10px; top: 0px;
                            background :url('../chrome/h2-back.jpg') top right;}
 
#contact-text p {margin: 20px 0 17px; border-bottom: 3px solid; padding-bottom: 20px;}                         
#contact-text p:first-line {font-weight: bold;}

#contact-text h3 {margin: 20px -20px 0; background: none; float: left; clear: both; }

#hcard-Albert-Molina { float: right; clear: right; width: 350px; font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;}

#hcard-Albert-Molina .fn { text-align: right; }
#hcard-Albert-Molina .org { font-style: italic; text-align: right;}
#hcard-Albert-Molina .email { display: block; margin: 20px 0 20px; float: right; clear: right;}
#hcard-Albert-Molina #address {float: right; margin: 20px 0 20px; }
#hcard-Albert-Molina .adr {text-align: right; }
#hcard-Albert-Molina .tel { font-weight: bold; letter-spacing: .2em; 
                           margin-top: 20px; float: right; clear: right; }

#hcard-Albert-Molina .tel + .tel {margin-top: 0px;}

#hcard-Albert-Molina .tel,
#hcard-Albert-Molina #address,
#hcard-Albert-Molina .email {width: 260px; text-align: right;}

#contact-form {width: 470px; float: left;  margin: 20px 0 0;}

#contact-success {height: 36px; line-height: 36px; font-size: 20px; border: 2px solid green; color: green; text-align: center}

#contact-form .form-error,
#contact-form .error-label {color: red}

#contact-form div {width: 470px; clear: right; margin: 20px 0 0; text-align: right; }

#contact-form input.text {width: 350px; float: right; clear: right; height: 18px; margin-bottom: 20px;
            border:solid 1px #f0f0fa; background: url('../chrome/input-background.png');}

#contact-form label {padding: 10px 10px; line-height: 20px; margin-top: 20px;
                     text-align: right;}

#contact-form textarea {margin: 0;}

#contact-form label,
#contact-form input.text,
#contact-form textarea {font-weight: normal; font-style: normal;   }

#contact-form input,
#contact-form textarea  { color: #333; font-family: Helvetica, Arial, “Helvetica Neue”, sans-serif; 
            letter-spacing: .1em;  background: url('../chrome/input-background.png');  border:solid 1px #f0f0fa;
            float:right; clear: right; width: 350px; height: 198px;  line-height: 20px;}
            
#contact-form input.text:hover,
#contact-form textarea:hover {background: url('../chrome/input-background-hover.png');}

#contact-form input.text:focus,
#contact-form textarea:focus{background: url('../chrome/input-background-focus.png');}

#contact-form #submit {width: 100px; line-height: 40px; font-size: 18px; height: 40px; position: relative; right: 250px;
         background: url('../chrome/submit-back.png'); border: none;
         margin-top: 20px;}         

/* --------------------------sitemap View --------------------------------------------------------------*/

#sitemap {width: 450px; margin: 5px 0 0 70px; display: inline-block; vertical-align: top;}
#sitemap-bamboo {height: 597px;}
#sitemap > li { margin: 20px 0; list-style: url('../chrome/honu2.png'); }
#sitemap >li > a,
#sitemap >li > ul > li > a {font-weight: bold;}
#sitemap >li > ul > li {list-style: url('../chrome/honu2.png');}
#sitemap li ul {margin: 0 0 20px 40px;}
#sitemap li p { width: 350px; margin: 0;padding: 0 0 20px 40px;}

/*-----------------------------------ShoppingCart View-------------------------------------------------*/

#checkout {float: right; width: 30%;}
#checkout h2 {width: 90%; position: relative;}

#checkout h2 span {display: block; width: 10px; height: 100%; position: absolute; right: -10px; top: 0px;
                            background :url('../chrome/h2-back.jpg') top right;}

h2.down {margin-top: 60px;}
form#shopping-cart {float: left; width: 65%; font-size: 14px; font-family: Helvetica, Arial, “Helvetica Neue”, sans-serif;
                    margin-top: 25px;}

form#shopping-cart table {border-collapse: collapse; width: 100%;}
form#shopping-cart th {font-weight: bold; border-style: solid; border-width: 1px 0;}


input.remove {margin-top: 20px;}
                            
td.total-label {text-align: right;}
td.total {vertical-align: top;}
span.reminder {font-size: 12px; font-weight: normal;}
form#shopping-cart th,
form#shopping-cart td {padding: 5px; }

form#shopping-cart img {float: left; max-width: 29%}
form#shopping-cart .product-details {float: left; display: block; padding-left: 10px; max-width: 70%}
#shopping-cart-footer td {font-weight: bold;}
form#shopping-cart tr {margin: 10px 0;}
input.quantity {width: 20px;}

form#shopping-cart div.controls {position: relative; height: 35px; width: 100%}

form#shopping-cart div.controls input {position: absolute; top: 0; }
form#shopping-cart div.controls input.update {right: 0; }

#paypal-checkout-button {margin-top: 40px;}

/*-----------------------------------AWARD PAGE RULES----------------------------------*/

#award-closeup {float:right; width: 454px; display: block; padding-top: 20px}
#award-large {float: left; clear: left;}

div.award-text {float: right; clear: right; width: 419px;margin: 20px 0;}
div.award-text h3 {overflow: visible;}

/*---------------------------------- COLOR RULES---------------------------------------*/

body { color: #0f1f2f; background-color: white;}

a:link,
a:visited { color: #051659;}

a:hover,
a:active { color: #3b74ae;}

h3 a:link,
h3 a:visited,
.product-info h2,
.sub-nav-bar a:link,
.sub-nav-bar a:visited,
.sub-nav-bar a:hover,
.sub-nav-bar a:active { color: #0f1f2f }

/*#home-image-display {background-color: black;}*/

.gallery li,
.gallery li a:link,
.gallery li a:visited { color: #f0ffff; border-color:  #0f1f2f; }

.gallery li a:hover,
.gallery li a:active { color: #3b74ae; }

/*.gallery li { background-color: #0f0f1a; }*/

/*h2 { background-color: #3f3f4a; }*/


.product-info tr:hover td{background-color: #3f3f4a; color:#f0ffff; }

/*-------------------------------ajax shopping cart----------------------------*/

#ajax-shopping-cart-container {position: absolute; top: 20px; right: 20px;
                               height: 60px; width: 200px; padding: 20px;
                               opacity: .95; background: white; z-index: 20;}

#ajax-shopping-cart-container img.waiting {position: absolute; left: 50%; top: 50px;}

#ajax-shopping-cart-container form {margin: 100px auto; width: 70%}
                               
            
/*-------------------------------uniform--------------------------------------*/

div.selector, 
div.selector span, 
div.checker span, 
div.radio span, 
div.uploader, 
div.uploader span.action {
  background-image: url(../chrome/ajax/sprite.png);
  background-repeat: no-repeat;
}

.selector, 
.radio, 
.checker, 
.uploader, 
.selector *, 
.radio *, 
.checker *, 
.uploader *{
	margin: 0;
	padding: 0;
}

/* SPRITES */

/* Select */

div.selector {
  background-position: -483px -130px;
  line-height: 26px;
	height: 26px;
}

div.selector span {
  background-position: right 0px;
  height: 26px;
	line-height: 26px;
}

div.selector select {
  /* change these to adjust positioning of select element */
  top: 0px;
	left: 0px;
}

div.selector:active, 
div.selector.active {
	background-position: -483px -156px;
}

div.selector:active span, 
div.selector.active span {
	background-position: right -26px;
}

div.selector.focus, div.selector.hover, div.selector:hover {
	background-position: -483px -182px;
}

div.selector.focus span, div.selector.hover span, div.selector:hover span {
	background-position: right -52px;
}

div.selector.focus:active,
div.selector.focus.active,
div.selector:hover:active,
div.selector.active:hover {
	background-position: -483px -208px;
}

div.selector.focus:active span,
div.selector:hover:active span,
div.selector.active:hover span,
div.selector.focus.active span {
	background-position: right -78px;
}

div.selector.disabled {
	background-position: -483px -234px;
}

div.selector.disabled span {
  background-position: right -104px;
}

/* Checkbox */

div.checker {
  width: 19px;
  height: 19px;
}

div.checker input {
  width: 19px;
  height: 19px;
}

div.checker span {
  background-position: 0px -260px;
  height: 19px;
  width: 19px;
}

div.checker:active span, 
div.checker.active span {
	background-position: -19px -260px;
}

div.checker.focus span,
div.checker:hover span {
	background-position: -38px -260px;
}

div.checker.focus:active span,
div.checker:active:hover span,
div.checker.active:hover span,
div.checker.focus.active span {
	background-position: -57px -260px;
}

div.checker span.checked {
	background-position: -76px -260px;
}

div.checker:active span.checked, 
div.checker.active span.checked {
	background-position: -95px -260px;
}

div.checker.focus span.checked,
div.checker:hover span.checked {
	background-position: -114px -260px;
}

div.checker.focus:active span.checked,
div.checker:hover:active span.checked,
div.checker.active:hover span.checked,
div.checker.active.focus span.checked {
	background-position: -133px -260px;
}

div.checker.disabled span,
div.checker.disabled:active span,
div.checker.disabled.active span {
	background-position: -152px -260px;
}

div.checker.disabled span.checked,
div.checker.disabled:active span.checked,
div.checker.disabled.active span.checked {
	background-position: -171px -260px;
}

/* Radio */

div.radio {
  width: 18px;
  height: 18px;
}

div.radio input {
  width: 18px;
  height: 18px;
}

div.radio span {
  height: 18px;
  width: 18px;
  background-position: 0px -279px;
}

div.radio:active span, 
div.radio.active span {
	background-position: -18px -279px;
}

div.radio.focus span, 
div.radio:hover span {
	background-position: -36px -279px;
}

div.radio.focus:active span,
div.radio:active:hover span,
div.radio.active:hover span,
div.radio.active.focus span {
	background-position: -54px -279px;
}

div.radio span.checked {
	background-position: -72px -279px;
}

div.radio:active span.checked,
div.radio.active span.checked {
	background-position: -90px -279px;
}

div.radio.focus span.checked, div.radio:hover span.checked {
	background-position: -108px -279px;
}

div.radio.focus:active span.checked, 
div.radio:hover:active span.checked,
div.radio.focus.active span.checked,
div.radio.active:hover span.checked {
	background-position: -126px -279px;
}

div.radio.disabled span,
div.radio.disabled:active span,
div.radio.disabled.active span {
	background-position: -144px -279px;
}

div.radio.disabled span.checked,
div.radio.disabled:active span.checked,
div.radio.disabled.active span.checked {
	background-position: -162px -279px;
}

/* Uploader */

div.uploader {
  background-position: 0px -297px;
  height: 28px;
}

div.uploader span.action {
  background-position: right -409px;
  height: 24px;
  line-height: 24px;
}

div.uploader span.filename {
  height: 24px;
  /* change this line to adjust positioning of filename area */
  margin: 2px 0px 2px 2px;
  line-height: 24px;
}

div.uploader.focus,
div.uploader.hover,
div.uploader:hover {
  background-position: 0px -353px;
}

div.uploader.focus span.action,
div.uploader.hover span.action,
div.uploader:hover span.action {
  background-position: right -437px;
}

div.uploader.active span.action,
div.uploader:active span.action {
  background-position: right -465px;
}

div.uploader.focus.active span.action,
div.uploader:focus.active span.action,
div.uploader.focus:active span.action,
div.uploader:focus:active span.action {
  background-position: right -493px;
}

div.uploader.disabled {
  background-position: 0px -325px;
}

div.uploader.disabled span.action {
  background-position: right -381px;
}

/* PRESENTATION */

/* Select */
div.selector {
  margin-left: 14px;
  margin-bottom: 20px;
  width: 140px;
  font-size: 12px;
}

div.selector select {
  width: 140px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 12px
	border: solid 1px #fff;
}

div.selector span {
  padding: 0px 25px 0px 2px;
  cursor: pointer;
}

div.selector span {
  color: #666;
  width: 108px;
  text-shadow: 0 1px 0 #fff;
}

div.selector.disabled span {
	color: #bbb;
}

/* Checker */
div.checker {
  margin-right: 10px;
}

/* Radio */
div.radio {
  margin-right: 10px;
}

/* Uploader */
div.uploader {
  width: 190px;
  margin-bottom: 20px;
  cursor: pointer;
}

div.uploader span.action {
  width: 85px;
  text-align: center;
  text-shadow: #fff 0px 1px 0px;
  background-color: #fff;
  font-size: 11px;
  font-weight: bold;
}

div.uploader span.filename {
  color: #777;
  width: 82px;
  border-right: solid 1px #bbb;
  font-size: 11px;
}

div.uploader input {
  width: 190px;
}

div.uploader.disabled span.action {
  color: #aaa;
}

div.uploader.disabled span.filename {
  border-color: #ddd;
  color: #aaa;
}
/*

CORE FUNCTIONALITY 

Not advised to edit stuff below this line
-----------------------------------------------------
*/

.selector select:focus, .radio input:focus, .checker input:focus, .uploader input:focus {
  outline: 0;
}

/* Select */

div.selector {
	position: relative;
	padding-left: 10px;
	overflow: hidden;
}

div.selector span {
	display: block;
	float: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

div.selector select {
	position: absolute;
	opacity: 0;
  height: 25px;
  border: none;
  background: none;
}

/* Checker */

div.checker {
	position: relative;
	float: left;
}

div.checker span {
	display: block;
	float: left;
	text-align: center;
}

div.checker input {
  opacity: 0;
  display: inline-block;
  background: none;
}

/* Radio */

div.radio {
	position: relative;
	float: left;
}

div.radio span {
	display: block;
	float: left;
	text-align: center;
}

div.radio input {
  opacity: 0;
  text-align: center;
  display: inline-block;
  background: none;
}

/* Uploader */

div.uploader {
  position: relative;
  float: left;
  overflow: hidden;
  cursor: default;
}

div.uploader span.action {
  float: left;
  display: inline;
  padding: 2px 0px;
  overflow: hidden;
  cursor: pointer;
}

div.uploader span.filename {
  padding: 0px 10px;
  float: left;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
}

div.uploader input {
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  float: right;
  height: 25px;
  border: none;
  cursor: default;
}