/*
CSS for ELATED.com
Author: Matt Doyle
Created: November 10, 2005
*/

/* Standard font family for site */
body, table, tr, td, a, p, h1, h2, h3, h4, h5 { font-family: arial, helvetica, verdana, sans-serif; }

/* Page body style */
body { margin: 0; padding: 0; font-size: 0.8em; line-height: 1.25em; background-color: #FFFFFF; color: #333333; }
html, body { height: 100%; }

/* Standard paragraph style */ 
p { font-weight: normal; margin-top: 0px; margin-bottom: 14px; }
blockquote { font-weight: bold; font-size: 1.1em; line-height: 1.3em; }

/* Footer paragraph style */ 
p.footer { margin-top: 24px; margin-bottom: 6px; } 

/* Links */ 
a { text-decoration: none; }
a:link, a:active { color: #0066B7; }
a:visited { color: #5E399C; }
a:hover { color: #3399FF; text-decoration: underline; }
a.ext:link, a.ext:active, a.ext:visited, a.ext:hover { color: #333; text-decoration: underline; }

/* Bulleted lists */
ul { line-height: 1.25em; margin-top: 0; margin-left: 0; padding-left: 0; list-style: circle url(/res/Image/misc/li_bullet.gif) outside; }
ol { line-height: 1.25em; margin-top: 0; margin-left: 0; padding-left: 0; }
li { margin-left: 1.4em; margin-top: 0; margin-bottom: 0.8em; }
.rightColumn-inner li, #homeBullets li { margin-bottom: 0.5em; }

/* Definition lists */
dl { width: 100%; margin: 2em 0; padding: 0; clear: both; overflow: auto; }
dt { width: 30%; float: left; margin: 0; padding: 10px 9.9% 10px 0; border-top: 1px solid #DDDDB7; font-weight: bold; overflow: auto; clear: left; } /* 9.9% to keep IE7 happy */
dd { width: 60%; float: left; margin: 0; padding: 11px 0 10px 0; border-top: 1px solid #DDDDB7; overflow: auto; }

/* Headings */ 
h1, h2, h3, h4, h5 { line-height: 1.25em; }
h1 { font-weight: bold; margin: 35px 0 14px; color: #F46A05; font-size: 1.5em; }
h2 { font-weight: bold; margin: 30px 0 12px; color: #F46A05; font-size: 1.3em; }
h3 { font-weight: normal; margin: 25px 0 10px; color: #F46A05; font-size: 1.2em; }
h4 { font-weight: bold; margin: 25px 0 10px; color: #F46A05; font-size: 1.0em; }
h5 { font-weight: bold; margin: 25px 0 10px; color: #F46A05; font-size: 0.9em; }

/* Breadcrumbs */
#crumbs { position: absolute; left: 10px; top: 42px; color: #808080; font-weight: normal; }
#crumbs a { color: #808080; text-decoration: none; } 
#crumbs a:hover { text-decoration: underline; }

/* Container for page */ 
#container { padding: 10px; background-color: #FFFFFF; }
#mainContent { position: relative;} /* Mainly to stop disappearing content bug in IE6 with the imagekits */

/* Page header */ 
#pageHeader { background-color: #FFFFFF; width: 100%; }
#pageHeader h3 { margin: 0; padding: 0;}
#pageHeader h3 a { cursor: pointer; float: left; width: 21%; max-width: 300px; min-width: 150px; height: 85px; margin: 0 10px 0 0; border: 0; background: #F46A05 url("/res/Image/misc/elated_logo_topleft.gif") no-repeat 0 0; }
#pageHeader h3 span { display: none; }
#pageHeader .image { }
/*#pageHeader .image .inner { height: 85px; background: #448FCC url(/res/Image/misc/header_image.jpg) no-repeat 0 0; overflow: hidden; }*/
#pageHeader .image .inner { height: 85px; background: #5e95c3 url(/res/Image/misc/header_image_jan08.jpg) no-repeat 0 0; overflow: hidden; }
#pageHeader .image .inner .search { float: right; width: 250px; height: 43px; padding: 21px 10px 21px 0; } /* We also need this extra DIV to keep IE6 happy */
#pageHeader .image .inner .search label { float: left; text-align: right; width: 76px; margin: 0; padding: 3px 0 3px 0; font-size: 0.9em; color: #FFFFFF; }
#pageHeader .image .inner .search #searchQuery { float: right; margin: 0; padding: 1px; width: 166px; border: 1px solid #BDBDB0; background-color: #E8F1F9; }
#pageHeader .image .inner .search .contextAndButton { float: right; margin: 0; width: 170px; }
#pageHeader .image .inner .search #searchContext { float: left; width: 65%; font-size: 1em; border: 1px solid #86B6DD; background-color: #E8F1F9; margin: 0 2px 0 0; }
#pageHeader .image .inner .search #searchSubmit { float: right; padding: 0; margin: 0; font-size: 1em; width: 30%; }

/* Left column */
#leftColumn { float: left; width: 21%; max-width: 300px; min-width: 150px; overflow: hidden; }
.leftColumn-inner { padding: 10px 0 0 0; margin: 0 0 10px 0; background: #F7F7E6 url("/res/Image/misc/nav_bg.jpg") repeat-y 0 0; overflow: hidden; }
.leftColumn-inner .bot { padding: 10px 0 0 0; margin: 0 0 0 0; background: transparent url("/res/Image/misc/nav_botleft.gif") no-repeat bottom left; overflow: hidden; }

/* Nav list */
.leftColumn-inner ul { list-style: none; padding-left: 0; margin-top: 0; margin-bottom: 0; padding-bottom: 0.4em; line-height: 1.1em; font-size: 1.1em; font-weight: bold; }
.leftColumn-inner ul li { max-width: 300px; margin: 0.2em 0 0 -13px; padding: 0 0 0 23px; }
.leftColumn-inner ul li ul { max-width: 307px; margin-left: -10px; padding-left: 3px; font-size: 0.89em; font-weight: normal;  }
.leftColumn-inner ul li ul li { max-width: 277px; margin: 0.1em 0 0 -20px; padding-left: 40px; }
.leftColumn-inner li.highlight { background-color: #FFFFFF; }
.leftColumn-inner li.highlight ul { background: #F7F7E6 url("/res/Image/misc/nav_bg.jpg") repeat-y 0 0; }
.leftColumn-inner li ul li.highlight { background-color: #FFFFFF; }
.leftColumn-inner ul li a { display: block; padding: 4px 10px 2px 0; }
.leftColumn-inner ul li ul li a { display: block; padding: 3px 10px 4px 0; }
.leftColumn-inner .pad { padding: 0 10px; }

/* Centre column */
#centreColumn { float: left; width: 56%; overflow: hidden; }
.centreColumn-inner { margin: 0 10px 0 10px; padding: 0; margin-top: 0; background-color: #FFFFFF; }

/* Right column */
#rightColumn { float: right; width: 23%; overflow: hidden; }
.rightColumn-inner { padding: 10px; margin-top: 0; margin-bottom: 10px; background-color: #F7F7E6; }
.newsletterBox { background: #F7F7E6 url(/res/Image/misc/newsletter_box_bg.jpg) repeat-x 0 bottom;  }

/* Current forum topics */
ul#currentForumTopics { text-align: left; }

/* Page footer */ 
#utilityNav { width: 100%; padding: 5px 0; margin: 0 0 0 0; border-top: 1px solid #F7F7E6; list-style: none; }
#utilityNav li { display: inline; padding: 0 2px 0 5px; margin: 0; border-left: 1px solid #0066B7; }
#utilityNav li.first { padding-left: 0; border-left: none; }
#pageFooter { background: #FFFFFF url("/res/Image/misc/page_footer_bg.gif") repeat-x 0 0; width: 100%; padding: 10px 0 30px 0; margin: 0 0 0 0; }
#pageFooter .pane { float: left; width: 49.9%; padding: 10px 0 10px 0; }
#pageFooter .divider { float: right; width: 1px; height: 54px; border-right: 1px solid #EFEFD7; margin-left: 10px; }

/* Standard images */ 
img { border: none; }

/* Form fields */
form { margin: 0; padding: 0; }
.textField { border: 1px solid #009900; width: 150px; height: 1.3em; padding: 1px; font-family: arial, helvetica, verdana, sans-serif; background-color: #FFFFFF; border: 1px solid #DDDDB7; }
.textField.narrow { width: 55px; }
.textField.wide { width: 300px; }
.textArea { border: 1px solid #009900; width: 180px; height: 100px; padding: 1px; font-family: arial, helvetica, verdana, sans-serif; font-size: 1.0em; background-color: #F7F7E6; }
.textArea.wide { width: 300px; }
.select { width: 185px; }
.select.wide { width: 300px; }
.select.narrow { width: 100px; }
select.small { font-size: 0.75em; }
input.submitButton { border: 1px solid #F46A05; padding: 1px 2px 1px 2px; background-color: #F46A05; color: #FFFFFF; }
input.default { font-weight: bold; }
input.disabled { border: 1px solid #999999; background-color: #999999; color: #E0E0E0 }
.fullwidthLeft { float: left; width: 40%; font-weight: normal; text-align: right; margin-bottom: 1em; padding-top: 0.25em; }
.fullwidthRight { float: right; width: 57%; margin-bottom: 1em; }
label.small { font-size: 0.8em; }
label.fullwidthLeft { font-weight: bold; }
input:focus, textarea:focus, select:focus { background-color: #FFFFE0; color: black; }
textarea.white:focus { background-color: #FFFFFF; }
.readOnlyField { padding-top: 3px; }
input.shaded { background-color: #F7F7E6; }
span.fieldHelp { display: block; font-size: 0.85em; line-height: 1.2em; font-weight: normal; color: #666; }

/* Form tables */
table.formTable { border: none; }
table.formTable td { padding: 0; height: 2em; }

/* Tables */
table.shaded { width: 100%; border-spacing: 1px; border: none; }
table.shaded th { text-align: left; background-color: #EFEFD7; color: #000000; font-weight: bold; padding: 4px;  }
table.shaded td { text-align: left; background-color: #F7F7E6; color: #000000; font-weight: normal; padding: 4px;  }
table.shaded tr.disabled td { background-color: #CCCCCC; }

/* Shortcut keys */
span.shortcut { text-decoration: underline; }

/* Glossary tooltips */
a.glossary { position: relative; font-weight: normal; border-bottom: 1px dashed; }
a.glossary:hover { background-color:#FFFFFF; }
a.glossary span { display: none; }
a.glossary:hover span { display:block; position:absolute; top: 2em; left: -3em; width: 16em; border: 1px solid #009900; padding: 2px; font-size: 0.8em; background-color: #EEFFEE; color: #000000; }

/* "Info" sections: used in help areas to display additional info */
.extraInfo { font-style: italic; margin-left: 1em; margin-right: 1em; font-size: 0.9em; }

/* Code blocks */
.code { background: #F7F7E6 url("/res/Image/misc/code_box_bg.jpg") no-repeat scroll 0 0; margin: 30px auto 30px auto; padding: 25px 10px 10px 10px; font-family: Courier New, Courier, Serif; width: auto; overflow: auto; }
div.code { margin-top: 35px; }
.samp { background: #F7F7E6 url("/res/Image/misc/samp_box_bg.jpg") no-repeat scroll 0 0; margin: 30px auto 30px auto; padding: 25px 10px 10px 10px; font-family: Courier New, Courier, Serif; width: auto; overflow: auto; }
div.samp { margin-top: 35px; }
.code .top, .samp .top { margin: 10px 0 10px 0; }
.postContent .code { margin: 5px; border: 1px solid #999977; max-height: 30em; }
.articleResponseBody .code { margin: 5px; max-height: 30em; }

/* Highlight boxes */
.highlightBox { background: #F7F7E6 url("/res/Image/misc/highlight_box_bg.jpg") no-repeat scroll 0 0; margin: 30px auto 30px auto; padding: 35px 10px 10px 10px; }
.highlightBox .top, .infoBox .top .code .top, .samp .top { margin: -29px 0 15px 35px; }
.infoBox { background: #F7F7E6 url("/res/Image/misc/info_box_bg.jpg") no-repeat scroll 0 0; margin: 30px auto 30px auto; padding: 35px 10px 10px 10px; }
.infoBox .top { margin: -29px 0 15px 30px; }
.pkcomBox { background: #F7F7E6 url("/res/Image/misc/pkcom_box_bg.jpg") repeat-x scroll 0 0; margin: 30px auto 30px auto; padding: 10px 10px 10px 10px; height: 100%; }
.pkcomBox h3 { margin-top: -4px; padding-top: 0; }

/* Pagination boxes */
.pagination { float: right; text-align: right; width: 200px; }
.pagination span { padding: 10px; margin: 0; background-color: #F7F7E6; border: 1px solid #DDDDB7; }

/* Homepage */
#homeBear { width: 100%; min-height: 288px; background: transparent url(/res/Image/misc/bears/homepage.jpg) no-repeat right bottom; }
/*#homeBear { width: 100%; min-height: 288px; background: transparent url(/res/Image/misc/bears/homepage_xmas07.jpg) no-repeat right bottom; }*/
#homeBear .right { float: right; width: 212px; height: 288px; }
#homeBear .left { overflow: hidden; }
#newstuffWrap { width: 100%; background: transparent url(/res/Image/misc/newstuff_bg.jpg) repeat-x 0 0; clear: both; }
#newstuffWrap .right { width: 100%; background: transparent url(/res/Image/misc/newstuff_bg_right.jpg) no-repeat right 0; }
#newstuffWrap .left { width: 100%; background: transparent url(/res/Image/misc/newstuff_bg_left.jpg) no-repeat left 0; }
#newstuff { padding: 20px 10px 10px 10px; }
#newstuff .item { background: transparent; border-bottom: 1px solid #efefd7; padding: 0 0 15px 0; }
#newstuff .item.last { border: none; }
/*#newstuff .item.right { float: left; width: 30%; padding: 0; background: transparent; }*/
#newstuff .item .date { font-style: italic; font-size: 0.8em; color: #666666; padding-left: 0.3em; }
#homeTellFriend, #homePoll { float: left; width: 39%; }
#homeTellFriend .inner, #homePoll .inner { padding-right: 10px; }
#homeTellFriend h2, #homePoll h2 { margin-top: 0; }
#homeNewsletter, #homeTip { float: right; width: 59%; border-left: 1px solid #efefd7; }
#homeNewsletter .inner, #homeTip .inner { padding-left: 10px; }
#homeNewsletter h2, #homeTip h2 { margin-top: 0; }
#homeNewsletter h4, #homeTip h4 { margin-top: 10px; }
#homeNewsletter { min-height: 150px;}
#homeTip { min-height: 130px;}
.homeSep { width: 100%; height: 20px; border-bottom: 1px solid #efefd7; }
.recentTopicsHeader { padding: 0 3px 3px 0; text-align: left; }
.recentTopicsHeader.timestamp { text-align: right; padding-right: 0; }
.recentTopicsCell { padding: 3px 3px 3px 0; vertical-align: top; border-top: 1px solid #efefd7; }
.recentTopicsCell.timestamp { width: 10em; text-align: right; padding-right: 0; }

/* PageKits */

/* Individual PageKits on the PageKits browse pages */
.pagekit { float: left; width: 32%; height: 290px; }
.pagekit.right { border-right: none; }
.pagekit-inner { padding: 0 5px; }
.pagekit-inner-left { padding-left: 0 5px 0 0; }
.pagekit-thumb { border: 1px solid #666666; }
.pagekit-sep { float: left; width: 2%; height: 220px; background: transparent url("/res/Image/pagekits/thumb_separator.gif") repeat-y 50% 0; }
#viewPageKitNavOuter { width: 1010px; } 
h1#viewPagekitNavLogo { margin: 0; padding: 0; }
h1#viewPagekitNavLogo a { display: block; margin: 0; padding: 0; float: left; width: 60px; height: 100px; margin-right: 10px; background-image: url(/res/Image/misc/aboutus/general.jpg); background-position: 0 0; }
h1#viewPagekitNavLogo span { display: none; }
#viewPagekitNavAd { float: left; width: 728px; padding: 0 8px 0 0; margin-top: 6px; background-color: white; }
#viewPagekitNavWrap { float: left; display: block; width: 200px; }
#viewPagekitNavWrap h1 { margin: 10px 0 0 0; padding: 0px 0 0 0; font-size: 1.0em; }
#viewPagekitNavWrap p { display: block; width: 190px; margin: 4px 10px 0 0; }

/* ImageKits */

/* ImageKits intro text */
#imagekits-intro { padding: 0 219px 0 0; background: transparent url("/res/Image/misc/bears/imagekits.jpg") no-repeat right top; }

/* ImageKits type icons */
img.imagekitTypeIcon { width: 50px; height: 50px; background-color: #F7F7E6; padding: 10px; }

/* Individual ImageKits on the ImageKits browse pages */
#imagekitsWrap { margin-left: -8px; }
/*.imagekit { float: left; width: 33%; min-width: 110px; height: 8em; min-height: 170px; }*/
.imagekit { float: left; width: 10em; min-width: 110px; height: 8em; min-height: 170px; }
.imagekit-inner { padding-right: 10px; }
.imagekit-inner-table { border: none; margin: 0 auto 0 auto; height: 140px; }
.imagekit-inner-thumb { height: 110px; vertical-align: bottom; text-align: center; }
.imagekit-inner-title { vertical-align: top; text-align: center; height: 2em; }
.imagekit-thumb { border: 1px solid #666666; }

/* ImageKit slide images */
.imagekit-slide { border: 1px solid #666666; }

/* Column layouts for main content */
.twocolFiftyFifty-left { float: left; width: 48%; }
.twocolFiftyFifty-right { float: right; width: 48%; }
.threecolShaded { float:left; width: 30%; }
.threecolShaded.left { float: left; width: 30%; }
.threecolShaded.centre { float: left; width: 40%; }
.threecolShaded.right { float: right; width: 30%; }
.threecolShaded .inner { background-color: #F7F7E6; }
.threecolShaded.centre .inner { margin: 0 12.8%; }
.threecolShaded .content { padding: 10px; }

/* Teemz fixes */
#teemzAdjust-outer { padding-left: 4px; width: 100%; }
#teemzAdjust-inner { margin-left: -8px; }

/* Forums */
.postHeader { background-color: #ddddb7; padding: 5px 0 2px 4px; border-bottom: 1px solid #fff; }
.postTime { float: left; width: 30%; padding: 0 0 0 15px; font-size: 0.85em; background: transparent url("/res/Image/forums/post_old.gif") no-repeat 0 0; }
.postTime.new { background: transparent url("/res/Image/forums/post_new.gif") no-repeat 0 0; }
.postEdit { float: right; width: 50%; text-align: right; font-size: 0.85em; }
.postBody { width: 100%; background: #efefd7 url("/res/Image/forums/post_body_bg.png") repeat-y 0 0; }
.postAuthor { float: left; width: 100px; display: block; }
.postAuthor-inner { padding: 5px 0 5px 0; text-align: center; font-weight: bold; display: block; background-color: #f7f7e6; min-height: 220px; overflow: hidden; }
.postContent { width: auto; overflow: auto; }
.postContent-inner { padding: 5px; overflow: auto; min-height: 220px; }
.avatar { display: block; clear: both; width: 80px; height: 80px; margin: 6px auto 0 auto; border: none; }
.memberStars { display: block; clear: both; width: 80px; height: 22px; margin: 3px auto 0 auto; border: none; }
.memberRank { display: block; clear: both; margin: 1px 0 0 0; font-size: 0.85em; font-weight: normal; }
.numPosts { display: block; clear: both; margin: 1px 0 0 0; font-size: 0.85em; font-weight: normal; }
.memberLocation { display: block; clear: both; margin: 0.5em 5px 0 5px; font-size: 0.85em; font-weight: normal; color: #666; }
.bbcodeButton { display: block; float: right; margin: 0 1px 2px 2px; width: 20px; height: 20px; border: none; }
.forumRSSButton { display: inline-block; margin: 0 0 0 5px; vertical-align: baseline; width: 14px; height: 14px; background: url("/res/Image/forums/rss.png") no-repeat 0 0; }
.forumRSSButton span { display: none; }
.forumRSSButton:hover { background-position: 0 -14px; }
#forumRSSButtonAll { display: block; padding: 2px 0 0 30px; height: 19px; background: url("/res/Image/forums/rss-big.png") no-repeat 0 0; font-weight: bold; font-size: 1.1em;  }
#forumRSSButtonAll:hover { background-position: 0 -21px; }


/* General text styles */
.bold { font-weight: bold; }
span.onscreen { font-style: italic; font-weight: bold; color: #993333; } /* Used for text that appears on-screen, or names of on-screen things */
strong.menu, kbd { color: #337733; } /* Used for indicating menu options, buttons, links or keypresses */
span.code { display: inline; border: none; padding: 0 2px; font-family: Courier New, Courier, Serif; background-color: transparent; color: inherit; }
code, kbd, samp { font-size: 1.2em; }
code.filename { color: #773333; }
dfn { font-weight: bold; font-style: italic; }

/* Article images: centred, with vertical margin */
.articleImageWrap { clear: both; display: block; width: 100%; margin: 30px auto; overflow: visible; }
.articleImage { display: block; width: 100%; margin: 0 auto; }
.articleImageCaption { text-align: center; font-weight: bold; margin: -20px 0 30px 0; }

/* Social bookmark links */
.social { border: 1px solid #ddddb7; background: #f7f7e6; padding: 8px 8px 4px 8px; margin-top: 30px; }
.social p { float: left; padding: 5px 10px 0 0; margin: 0; font-weight: bold; }
.social ul { display: block; float: left; list-style: none; margin: 0; padding: 0; }
.social ul li { display: inline; padding: 4px 4px 0 0; margin: 0; }

/* Article responses */
.articleResponseHeader { border-top: 1px solid #ddddb7; border-bottom: 1px solid #ddddb7; margin-top: 20px; padding: 4px; background-color: #f7f7e6; }
.articleResponseHeader .username { display: inline; margin-right: 5px; font-weight: bold; }
.articleResponseHeader .date { display: inline; font-size: 0.85em; }
.articleResponseHeader .date span { color: #f46a05; }
.articleResponseBody { padding: 8px 4px 4px 4px; }
.viewAllResponses { border-top: 1px solid #ddddb7; padding-top: 18px; }

/* For elements floated left or right within text blocks */
.inlineFloatLeft { float: left; margin: 0 10px 10px 0; }
.inlineFloatRight { float: right; margin: 0 0 10px 10px; }

/* Clearing element */
.clear { position: relative; clear: both; height: 0; line-height: 0; margin: 0; padding: 0; border: 0; font-size: 1px; }