/* Cafe Joe CSS Document */

/* ----------------- COLOURS ----------------- 
medium orange: #ee452a
orange: #ff9a00
red: #dc241f
*/

/* ----------------- CLEAR STYLES ----------------- */
.clear { clear: both; }

/* ----------------- DEFAULT FONT STYLES ----------------- */
body, td, div, h1, h2, h3, h4, p, li { font-family: "Trebuchet MS", Trebuchet, Helvetica, sans-serif; }

h2 { font-size: 90%; margin: .5em 0 1em 0; color: #227a37; font-weight: bold; }
h3 { font-size: 84%; margin: .5em 0 .5em 0; color: #000; font-weight: bold; color: #ff9a00; }
/*h4 { font-size: 80%; margin: .5em 0 .5em 0; color: #000; font-weight: bold; }*/
p { font-size: 74%; margin: .3em 0 1em 0; line-height: 1.5em; color: #000; font-weight: bold; }
li { font-size: 74%; margin: .5em 0 1em 0; line-height: 1.3em; color: #000; font-weight: bold; }

li ul li { font-size: 100% !important; } /* sets font size of elements within <li> for nested lists */
li ul  { margin-top: 1em; } 

a:link { color: #dc241f; }
a:visited { color: #dc241f;}
a:active, a:hover { color: #ff9a00; }
a { outline: none; }
.tiny { font-size: 70%; }
.red-text { color: #dc241f; }
.quote { padding: 6px; border: 2px solid #f67b08; background-color: #fde5ce; }
.large-text { font-size: 150%; color: #dc241f; }


/* ----------------- RULE STYLES ----------------- */
hr { border:0; border-top: 1px solid #000; height: 1px; }

/* ------------- DEFAULT FORM STYLES ------------- */
form { display: inline; }


/* ----------------- PAGE STYLES ----------------- */
body { background-color: #fff; margin: 10px; }
#frame { width: 740px; margin-left: auto; margin-right: auto; background: url(../../images/frame_background.gif) top left repeat-y; }
.contact-joe { background: url(../../images/contact_joe.gif) center 30px no-repeat; }

/* -------------- NAVIGATION COLUMN -------------- */
#column-200 { float: left; width: 200px; }
#column-200 .logo { width: 200px; height: 200px; background: url(../../images/logo.gif) top left no-repeat }
#column-200 .logo img { display: none; visibility: hidden; }

/* -- Navigation Main -- */
.navigation { width: 178px; padding: 35px 13px 0 9px; background: url(../../images/menu_title.gif) top right no-repeat; }
.navigation div { width: 178px; height: 27px; background-position: top left; background-repeat: no-repeat;  }
.navigation a { width: 178px; height: 27px; display: block; outline: none; }
.navigation a:hover { background-position: bottom left; background-repeat: no-repeat; }
.navigation span { display: none; visibility: hidden; }
.navigation .selected { background-position: bottom left; }
.nav-footer { height: 30px; background: url(../../images/nav_footer.gif) top left no-repeat; }
/* buttons */
.navigation .home, .navigation .home a:hover { background-image: url(../../images/nav_home.gif); }
.navigation .premiumdrinks, .navigation .premiumdrinks a:hover { background-image: url(../../images/nav_premiumdrinks.gif); }
.navigation .ethicalsnacks, .navigation .ethicalsnacks a:hover { background-image: url(../../images/nav_ethicalsnacks.gif); }
.navigation .ethicallytraded, .navigation .ethicallytraded a:hover { background-image: url(../../images/nav_ethicallytraded.gif); }
.navigation .machinesfromjoe, .navigation .machinesfromjoe a:hover { background-image: url(../../images/nav_machinesfromjoe.gif); }
.navigation .coffeemachine, .navigation .coffeemachine a:hover { background-image: url(../../images/nav_coffeemachine.gif); }
.navigation .breakoutareas, .navigation .breakoutareas a:hover { background-image: url(../../images/nav_breakoutareas.gif); }
.navigation .community, .navigation .community a:hover { background-image: url(../../images/nav_community.gif); }
.navigation .contact, .navigation .contact a:hover { background-image: url(../../images/nav_contact.gif); }
.navigation .friends, .navigation .friends a:hover { background-image: url(../../images/nav_friends.gif); }

#sub-navigation { margin: 0; padding: 4px 0; border-top: 1px solid #ee452a; border-bottom: 1px solid #ee452a; }
#sub-navigation li { margin: 2px 0; padding: 0 7px 0 0; list-style: none; text-align: right; font-size: 74%; font-weight: normal; }
#sub-navigation a { height: auto !important; width: auto !important; display: inline; }
#sub-navigation a:link, #sub-navigation a:visited { text-decoration: none; color: #000; }
#sub-navigation a:active, #sub-navigation a:hover { text-decoration: none; color: #ff9a00; }
#sub-navigation a.selected { color: #ff9a00 !important; }

/*.a-film-about-fairtrade { width: 155px; margin: 0 auto; }
.easter-egg-hunt { width: 155px; margin: 0 auto; }*/

.navigation-banner { width: 155px; margin: 0 auto; }


/* GALLERY */
.gallery-img { float: left; width: 125px; height: 115px; background: url(../../images/gallery_thumb_background.gif) top left no-repeat; text-align: center; padding-top: 10px; }

/* -- Pagination -- */
.pagination { width: 530px; background-color: #ff9a00; font-family: Verdana; }
.pagination-button { width: 52px; float: left; }
.pagination-pages { width: 314px; float: left; padding: 2px 4px 0 4px; text-align: center; color: #fff; font-size: 74%; }
.pagination-pages a:link, .pagination-pages a:visited { color: #fff; }
.pagination-pages a:active, .pagination-pages a:hover { color: #ffe1b3; }


/* ---------------  CONTENT COLUMN --------------- */
#column-540 { float: left; width: 530px; background: url(../../images/black_bar.gif) top left repeat-x; padding: 0 0 0 10px; }
#column-540 .header { width: 530px; height: 180px; }
.header .header-images { float: right; width: 300px; margin-top: 47px; }
.header .header-images img { float: left; margin-left: 10px; }

#content { width: 530px; padding: 0 0 0 0px; }
#content-home { float: left; width: 360px; }
#content-home-images { float: left; width: 160px }

.you-tube-video { text-align: center; margin-top: 40px; }


/* --------------------- FOOTER --------------------- */
#footer { width: 740px; margin: 0 auto; margin-top: 5px; }
#footer .footer-copyright { float: left; width: 370px; height: 25px; }
#footer .footer-copyright p, #footer .menu p { font-size: 70%; color: #999; margin: 0; font-weight: normal; }
#footer .menu { float: left; width: 370px; height: 25px; text-align: right; }
#footer .menu a:link, #footer .menu a:active, #footer .menu a:visited { color: #999; text-decoration: none; }
#footer .menu a:hover { text-decoration: underline; }


/* ----------------- MARGIN STYLES ----------------- */

.margin10-t { margin-top: 10px; }
.margin10-r { margin-right: 10px; }
.margin10-b { margin-bottom: 10px; }
.margin10-l { margin-left: 10px; }
.margin10-t-r { margin: 10px 10px 0 0; }
.margin10-t-b{ margin: 10px 0 10px 0; }
.margin10-t-l{ margin: 10px 0 0 10px; }
.margin10-t-r-b { margin: 10px 10px 10px 0; }
.margin10-r-b { margin: 0 10px 10px 0; }

.margin20-t { margin: 20px 0 0 0; }

.margin7-r { margin-right: 7px; }


/* -- Borders -- */
.border-r { border-right: 1px solid #fff; }
.border-l { border-left: 1px solid #fff; }

/* ERROR STYLES */
.error-box { border: 1px solid #c00; padding: 1px; }
.error-box .error-title { padding: 3px 5px; background-color: #c00; color: #fff; font-size: 80%; font-weight: bold; }
.error-box .error-text { padding: 3px 5px; }
.error-box .error-text p { color: #c00; margin: 0; }
.error { color: #c00; }

/* -- NEWS TICKER --*/
#news-ticker { padding: 0 0 0 10px; }
#news-ticker-border-left { background: url(../../images/news_ticker_left.gif) top left no-repeat; width: 27px; height: 127px; float: left; }
#news-ticker-border-right { background: url(../../images/news_ticker_right.gif) top left no-repeat; width: 27px; height: 127px;  float: left; }

#news-ticker-border-top { background: url(../../images/news_ticker_top.gif) top left no-repeat; width: 329px; height: 49px; margin: 0 0 0 10px; }
#news-ticker-border-bottom { background: url(../../images/news_ticker_bottom.gif) top left no-repeat; width: 329px; height: 33px; margin: 127px 0 0 10px; }

#news-ticker-content { position: relative; width: 275px; height: 127px; background-color: #e6ad56; float: left; overflow: hidden; }
.news-ticker-item { position: absolute; top: 130px; width: 255px; height: 127px; margin-left: 10px; margin-right: 10px; }
.news-ticker-headline p { margin: 0; }
.news-ticker-headline a:link, .news-ticker-headline a:visited { text-decoration: none; color: #dc241f; }
.news-ticker-headline a:active, .news-ticker-headline a:hover { text-decoration: underline; color: #dc241f; }
.news-ticker-summary { }