/**
 * CSS for www.jewelcharity.org - media = screen
 *
 */

/** Mass Reset 
 -----------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { 	border:0; }
address,caption,cite,code,dfn,th,var { font-style:normal; font-weight:normal; }
ol,ul { list-style: none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }
html { overflow-y:scroll; }
/** End Mass Reset
------------------------------*/

/** HTML5 Elements
------------------------------*/
header, nav, footer, section, article, aside { display: block; }

/** Embedded fonts
 -----------------------------*/
@font-face {
 font-family: Copperplate-Gothic;
 src: url("/images/fonts/COPRGTL.eot") /* EOT file for IE */
}
@font-face {
 font-family: Copperplate-Gothic;
 src: url("/images/fonts/COPRGTL.TTF") /* TTF file for CSS3 browsers */
}
@font-face {
 font-family: Copperplate-Gothic-Bold;
 src: url("/images/fonts/COPRGTB.eot") /* EOT file for IE */
}
@font-face {
 font-family: Copperplate-Gothic-Bold;
 src: url("/images/fonts/COPRGTB.TTF") /* TTF file for CSS3 browsers */
}


/***** PREFERRED STYLING *****
 -----------------------------
el/class { position/float/display/list-type margin/padding/border width/height background/color font/text CSS3 }
------------------------------
*/


/***** BEGIN STYLES ******
 -----------------------------------*/
html, body, form { height: 100%; }
body { background: url(/images/layout/body-bg.jpg) repeat top left; color: #1e2123; font-family: Georgia, Arial, Sans-Serif; font-size: 10pt; text-align: left; line-height: 1.5em; }


/** Global Styles 
 -----------------------------*/
p { margin: 10px 0 10px 0; }
.clear-fix { clear: both; visibility: hidden; height: 1%; }
.copperplate-gothic { font-family: Copperplate-Gothic; }
p.copperplate-gothic { margin: 20px 0 20px 0; }
.line-height-large { line-height: 1.5em; }
div.div-left { float: left; margin: 0 10px 10px 0; }


/** Images
 -----------------------------*/
img.treatment { padding: 1px; border: solid 1px #aaa; background: white; }
img.img-left { float: left; display: inline; margin: 0 10px 10px 0; }
img.img-right { float: right; display: inline; margin: 0 0 10px 10px; }
div.caption { font-size: 0.75em; font-style: italic; text-align: center; }

/** contact - sprites
 -----------------------------*/
span.contact-icon { margin-top: -7px; margin-right: 3px; width: 25px; height: 34px; background: url(/images/icons/contact-icons.jpg); display: inline-block; vertical-align: top; }
span.icon-phone { background-position: 0px 0px; }
span.icon-fax { background-position: -28px 0px; }
span.icon-email { background-position: -54px 0px; }
span.icon-mail { background-position: -85px 0px; }


/** Headers
 -----------------------------*/
h2 { margin-bottom: 20px; font-size: 1.7em; }
h3 { margin-top: 20px; font-size: 1.3em; font-weight: bold; }


/** Links
 -----------------------------*/
a { color: #0168c8; }
a:hover { color: #024a8d; }
a img { text-decoration: none; }
/** Doc Link
-----------------------------*/
a.doclink { color:#0168c8; }
a.doclink:hover { color: blue; }


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


/** Validator classes
 -----------------------------*/
.error { border: solid 1px red; background: #ffdddd; color: Red; }
.status-error { color: Red; }


/** Aside 
 -----------------------------*/
aside { padding: 20px 0; border-bottom: 1px solid #ddd; font-size: 0.9em; }
aside h3 { color: #78787a; font-size: 1.1em; font-weight: bold; letter-spacing: 1px; text-shadow: 1px 1px 2px #c7d7e5, 2px 2px 2px #c8d5e1; }
aside select { margin-top: 10px; padding: 3px; }
aside ul { list-style: none; margin: 0; padding: 0; }
aside ul.arrow-nav, ul.gallery-arrow-nav { margin-top: 10px; }
ul.arrow-nav li, ul.gallery-arrow-nav li { margin: 5px 0 0 0; }
ul.arrow-nav a, ul.gallery-arrow-nav a { display: block; padding: 5px 5px; width: 190px; height: 14px; text-decoration: none; -webkit-transition: color .2s ease-in; }
ul.gallery-arrow-nav a { height: auto; }
ul.arrow-nav a.selected, ul.arrow-nav a:hover  { background: url(/images/arrow-right-blue.png); color: White; }
ul.gallery-arrow-nav a.selected, ul.gallery-arrow-nav a:hover { background: #0c477e; color: White; }


/** Lists
 -----------------------------*/
ul { margin: 0 0 20px 26px; list-style-type: disc; }
ul li { margin: 3px 0 0 0; }


/** Page wrapper
 -----------------------------*/
#page-wrapper { position: relative; margin: 0 auto; padding: 0 34px; margin-bottom: -351px; width: 900px; min-height: 100%; background: url(/images/layout/pg-wrapper-bg.png) repeat-y top; }


/** Page content
 -----------------------------*/
#page-content { background: #fff url(/images/layout/content-bg.png) no-repeat; }
#page-content.one-column { padding: 20px; }


/** two-col Master
 -----------------------------*/
#tbl-two-col { width: 900px; }
#tbl-two-col td { padding: 20px; vertical-align: top; }
#td-left-two-col { width: 200px; }
#td-left-two-col img { margin-bottom: 10px; }
#td-right-two-col { padding-right: 30px !important; width: 610px; }


/** Header
 -----------------------------*/
header#page-header { height: 190px; background: url(/images/layout/header/header.jpg); }


/** Nav 
 -----------------------------*/
nav { padding: 0 10px; width: 880px; height: 30px; background: #3c6e91; font-size: 0.9em; text-transform: uppercase; }
#ul-nav { margin: 0 0 0 5px; padding: 0; }
#ul-nav li { float: left; list-style: none; margin: 0; padding: 0; }
#ul-nav li a {	
	display: block; 
    padding: 7px 10px 0 10px;
    height: 23px;
    color: #fff;
    text-decoration: none; 
    font-size: 0.9em; 
    font-weight: bold;
    letter-spacing: 1.1px; 
    white-space: nowrap;
}
#ul-nav li a:hover { background: #dce5ec; color: #000; }
#ul-nav li ul {	
	position: absolute;
	visibility: hidden;
    margin: 0 0 0 -1px;
	padding: 0;
	border: solid 1px #5b5a58; 
    border-top-width: 1px; 
    border-bottom-width: 1px; 
    border-bottom: 0; 
    background: #457a9f;
    font-size: 0.9em;
    z-index: 999;
}
#ul-nav li ul li { position: relative; float: none; display: inline; text-align: left; }
#ul-nav li ul li a { padding: 8px 20px; border-bottom: solid 1px #484848; height: auto; }
#ul-nav li ul li a:hover { background: #dce5ec; color: #000; }
#ul-nav ul ul { position: absolute; visibility: hidden; font-size: 1.0em; }


/** Footer
 -----------------------------*/
.clear-footer { height: 351px; }
footer { position: relative; margin: 0 auto; padding: 20px 0 30px 0; width: 900px; height: 301px; font-size: 0.85em; }
footer section.footer-column { float: left; display: inline; margin-bottom: 20px; margin-left: 30px; width: 500px; text-align: left; } 
footer section.footer-column:first-child { width: 260px; }
footer h4 { margin-bottom: 8px; padding-bottom: 3px; border-bottom: dotted 1px; color: #6a4c11; font-size: 1.2em; }
footer h4 a, footer h4 a:hover { color: #6a4c11 !important; text-decoration: none; }
footer h4 span.contact-icon { height: 22px; }
footer ul { list-style: none; margin: 0; text-align: left; }
footer li { margin: 0 0 5px 0; text-align: left; }
footer section.footer-bottom { clear: both; padding: 20px 0 10px; border-top: solid 1px #eee; text-align: center; }


/** Home
 -----------------------------*/
#homeImgCycle { float: right; display: inline; margin: 0 0 10px 10px; padding: 1px; border: solid 1px #aaa; width: 175px; height: 175px; background: white; }

/** About
------------------------------*/
#board .board-column, #board .board-column-left { float: left; display: inline; margin-top: 0; width: 193px; font-size: 0.9em; }
#board .board-column { margin-left: 15px; }
#board .board-column-left { margin-left: 0; }
#board h3, h4 { font-size: 1.1em; font-style: italic; font-weight: bold; }
#board h3 { margin-top: 0; text-transform: uppercase; }
#board h4 { margin-top: 10px; }


/** Event image gallery
 -----------------------------*/
.event-gallery { position: relative; clear: both; }
.event-gallery #event-name { text-align: center; }
.event-gallery #main-viewer { position: relative; height: 350px; text-align: center; }
.event-gallery .img-main { padding: 2px; border-color: #999; max-width: 600px; height: 344px; width: auto; margin: 0 auto; }
.event-gallery ul.thumb-list { margin: 0; padding: 0; }
.event-gallery li { position: relative; float: left; display: inline; margin: 0 5px 0 0; padding: 0; border: solid 1px #aaa; background: white; overflow: hidden; cursor: pointer; }
.event-gallery img.gallery-thumb { position: absolute; top: -20px; left: -20px; }
.event-gallery .bx_wrap { margin: 10px 0 20px 55px; height: 100px; width: 460px; }
.event-gallery .prev { position: absolute; bottom: 45px; outline: 0; left: 0px; }
.event-gallery .next { position: absolute; bottom: 45px; outline: 0; left: 565px; }


/** Blog
 -----------------------------*/
.blog-wrapper { padding: 20px; }
.blog-wrapper .blog-column { float: left; display: inline; margin: 0 0 0 30px; }
.blog-wrapper .blog-left { margin-left: 0; border-right: 1px solid #ddd; width: 169px; }
.blog-wrapper .blog-right { width: 100px; }
.blog-wrapper .blog-main { width: 530px; }
.blog-wrapper aside:first-child { margin-top: -20px; }
.blog-wrapper aside h3:first-child { margin-top: 0px; padding-top: 0; }
.blog-wrapper aside ul { margin-top: 10px; }
.blog-wrapper aside li { margin-top: 10px; padding-right: 10px; }
.blog-wrapper aside ul li:first-child { margin-top: 0; }
.blog-wrapper article { margin-bottom: 30px; }
.blog-wrapper h2 { margin-bottom: -5px; font-size: 1.25em; }
.blog-wrapper .poster-date-info { margin-bottom: 20px; color: #666; font-size: 0.9em; font-style: italic; }

/** Forms 
-----------------------------*/
.fs-questionnaire input[type=text] { width: 300px }
.fs-questionnaire td { padding:4px !important; }
.fs-questionnaire p { width: 520px; }

#photo-preview {width:500px;border:solid 0px red;}
#photo-preview img { vertical-align: middle; width: 100%; height: auto; }


/** Orders
----------------------------*/
.order td {padding:2px !important; }
.order-formdata table {font-size: 10px !important; }
/** Update
----------------------------*/
.update td {padding:2px !important; }
/** Contact Us 
----------------------------*/
#tbl-contact-names td { width: 200px; padding: 0; vertical-align: top; }
.contact-text { font-size:0.7em; }

/** Raffle tickets 
----------------------------*/
.raffle-ticket {   text-align:center; height: auto; background: white; border: solid 2px black; padding: 4px; }
.raffle-ticket-price { font-family: Arial;font-size:1.8em; font-weight: bold; display:block }
.raffle-prize { font-style: italic; font-weight: bold; font-size:1.2em; display:block }
.raffle-prize-description { display:block }
.raffle-prize-value { font-family: Arial;font-size:1.2em; font-weight: bold; display:block; padding:6px; }
.raffle-donated-by { font-style:italic; font-weight:bold; font-size: 0.8em; display:block; padding: 6px; }


.raffle-purchase {width:550px; background: #3A6D8A; color: White; font-family:Century Gothic, Sans-Serif; padding:10px; }
.raffle { color: #3A6D8A; font-family:Century Gothic, Sans-Serif; font-size: 1.2em;}
.raffle-header { color: #3A6D8A; font-family:Century Gothic, Sans-Serif; font-size: 1.6em; font-weight:bolder;}
.raffle-thankyou { color: #3A6D8A; font-family:Century Gothic, Sans-Serif; font-size: 1.6em; }
.raffle-tbl-downloads { width:600px;background-color:transparent; padding:4px;}
.raffle-tbl-downloads td { text-align:center; vertical-align:text-bottom; background-color:transparent; }
a.raffle-email:link, a.raffle-email:visited, a.raffle-email:active, a.raffle-email:hover { background: #3A6D8A; color: White; font-family:Century Gothic, Sans-Serif}