/* NOTE
	This is the WEB stylesheet for the
	"ORANGE FEED" website
	
========================================================================*/


/* ========= BROWSER RESET STYLES ========= */

/* BODY STYLES */
html, body {height:100%;}
body {margin:0; padding:0; color:#222; font:62.5%/1.4 'Helvetica Neue',Helvetica,Arial,sans-serif; background:#FFA70F;}

body.orange { background-color: #FFA70F; }

body.grey { background-color: #D5D7D9; }

img, form {border:0; margin:0; vertical-align:top;}
p {padding:0; margin:0 0 25px 0; font-size:1.4em;}
h1 {font-size:4em; font-weight:500; line-height:0.7em; padding:0; margin:0 0 8px 0;}
h2 {font-size:3.8em; padding:0; margin:0 0 21px 0; line-height:1em;}
h3, h4, h5, h6 {margin:0; padding:0; line-height:1.1em; font-size:1.5em; margin:0 0 5px;}

/* FORMS */
fieldset {border:0; margin:0; padding:0;}
legend {color:#91004B; margin:0; padding:0; font-weight:bold; display:block; padding-bottom:7px; font-size:1.4em;}
label {font-size:1.4em; display:block; margin-bottom:11px; font-family:arial;}
select, textarea {font:1.4em "Arial",Verdana,Arial,Helvetica,sans-serif; color:#000; background:#FFF; border:0;}
select {height:35px; color:#666;}
textarea {width:612px; height:136px; padding:4px;}
input {font:1.4em "Arial",Verdana,Arial,Helvetica,sans-serif; color:#000; width:292px; padding:5px 4px 0; border:0; height:30px;}
input[type=text], input[type=checkbox], input[type=password] {background:#FFF;}

/* LISTS */
dl, dd {margin:0; padding:0;}
ul {margin:0 0 15px 15px; padding:0;}
ol {margin:0 0 15px 22px; padding-left:0;}
ol li {margin:0;}
li, dt, dd {font-size:1.4em;}
li p, dd p {font-size:1em;}

/* STANDARD LINKS */
a {color:#FF6600; text-decoration:none;}
a:hover {text-decoration:underline;}

/* CLEARFIX */
div:after {content:""; display:block; height:0; clear:both; visibility:hidden;}

/* HIDDEN TEXT */
.hidden {position:absolute; left:0px; top:-10000px; width:0px; height:0px; overflow:hidden;}
.clear { clear:both; }

/* ========= IMAGE REPLACEMENT ========= */

/* STANDARD IMAGE REPLACEMENT */
.replace, .replaceSubmit {position:relative; overflow:hidden; display:block;}
.replace em, .replaceSubmit em {display:block; position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; background-repeat:no-repeat;}

/* SKIP NAVIGATION LINK */
.skipNavigationLink {margin:0; padding:0; text-align:center; font-size:1.2em;}
.skipNavigationLink a,
.skipNavigationLink a:hover,
.skipNavigationLink a:visited {position:absolute; display:block; padding:4px; border:0; background:#FFF; width:100%; color:#00AFF0; left:-50000px; top:0; overflow:hidden;}
.skipNavigationLink a:active,
.skipNavigationLink a:focus {left:0; top:0; z-index:10; background:#00AFF0; color:#FFF;}

/*========================================================================
	HEADER, CAROUSEL & FOOTER
=========================================================================*/


/* ========= HEADER ========= */

#header {background:#010101 url(../images/bgHeader.gif) repeat-x; height:110px; font-family:helvetica;}
#header ul {list-style:none; margin:16px 0 0 0; float:left;height:30px;overflow:visible;}
#header ul li {float:left;}

/* TOP NAVIGATION */
#header ul.topNavigation li {font-size:14px;padding-right:12px; margin-right:10px; background:url(../images/headerTopNavigationDivider.gif) right 4px no-repeat;}
#header ul.topNavigation li a {color:#CCC;font-size:14px;}
#header ul.topNavigation li a strong {color:#FF6600; font-weight:normal;}
#header ul.topNavigation li a:hover strong {text-decoration:underline;}
#header ul.topNavigation li.last {background:none;}
#header ul.topNavigation li.last a {color:#777;}

/* SOCIAL LINKS */
#header ul.socialLinks {float:right; margin:14px 0 0 0; }
#header ul.socialLinks li {margin-right:5px; position:relative; overflow:visible;}
#header ul.socialLinks li.followUs { font-size:1.2em; line-height:20px; color:#777777; }
#header ul.socialLinks li a {color:#FFF; text-decoration:none;}
#header ul.socialLinks li a em {display:block; padding:0; font-style:normal; white-space:nowrap; position:absolute; top:-10000px; left:-238%; background:url(../images/headerSocialTooltipRight.gif) right no-repeat;}
#header ul.socialLinks li a em span {display:block; padding:19px 12px 7px; background:url(../images/headerSocialTooltipLeft.gif) left no-repeat;}
#header ul.socialLinks li a:hover em {top:20px;}

/* TITLE AREA */
#header .titleArea {position:absolute;top:49px;left:0;float:left; padding:0 0 0 0;}
#header .mainLogo {position:relative;float:left; /*margin:0 18px 0 0;*/}
#header .mainLogo a img {position:absolute;top:0;left:1px;}
#header .mainTitle { display:inline; vertical-align:top;float:left; margin:0 0 0 63px; color:#8C8C8C; line-height:51px; height:51px; overflow:hidden; font-size:46px; /*padding-top:6px;*/ font-weight:100;}
#header .mainTitle strong {font-weight:bold; color:#FFF;}
#header .mainTitle a { color:#8C8C8C; }
#header .mainTitle a:hover { text-decoration:none; }


/* ========= UPDATE BAR ========= */
#updateBar {background:#fff;height:49px;}
#updateBar .container {height:49px;}
#updateBar .container p {background:url(../images/updateBarArrow.gif) left center no-repeat;color:#F60;line-height:49px;font-size:17px;padding:0 0 0 22px;margin:0;display:inline;}
#updateBar .container a {color:#000;}
#updateBar .container a.close {margin:17px 0 0 0 ;float:right;width:16px;height:16px;background:url(../images/updateBarClose.gif) no-repeat;}
#updateBar.moderation {background:#cf0011;}
#updateBar.moderation .container p {color:#fff;background:none;padding:0;}
#updateBar.moderation .container a.close {background:url(../images/updateBarModerationClose.gif);}

/*========================================================================
	STYLES USED ACROSS ALL PAGES
=========================================================================*/

/* CONTAINERS */
.container, .showmore-container {width:940px; margin:0 auto; position:relative;clear:both;}

.showmore-container { padding-bottom: 50px; }

#content {
    background-color: #D5D7D9
    padding-top: 41px;
}

.bottomBorder {width:100%; height:6px; background:url(../images/bgHeaderFooterStrip.png) repeat-x;}
* html .bottomBorder {margin-bottom:-7px;}

/* ========= BUTTONS ========= */

/* orange button (used for form submit buttons) */
a.orangeButton {float:left; cursor:pointer; font-size:1.5em; font-weight:bold; font-family:arial; color:#FFF; overflow:hidden; padding-left:17px; height:31px; background:url(../images/buttonOrangeLeft.png) left top no-repeat;}

a.orangeButton em {
    background: url(../images/buttonOrangeRight.png) right top no-repeat;
    display: block;
    float: left;
    font-style: normal;
    height: auto !important;
    height: 27px;
    line-height: 1.4;
    min-height: 27px;
    padding: 4px 17px 0 0;
}

a:hover.orangeButton { text-decoration: none; }

/* large orange button */
.orangeButtonLarge {font-size:1.7em; overflow:hidden; padding-left:19px; height:53px; background:url(../images/buttonOrangeLargeLeft.png) top left no-repeat;}
.orangeButtonLarge a {color:#FFF; min-height:43px; height:auto !important; height:41px; padding:13px 57px 0 0; float:left; background:url(../images/buttonOrangeLargeRight.png) top right no-repeat;}
.orangeButtonLarge a:hover {text-decoration:none;}

/** Orange butotn with white border **/
.orangeButtonWhiteBorder {font-size:1.7em; overflow:hidden; padding-left:17px; height:37px; background:url(../images/buttonOrangeLeftWhiteBorder.png) left top no-repeat;}
.orangeButtonWhiteBorder a {display:block; color:#FFF; min-width:100px; width:auto !important; width:100px; text-align:center; text-decoration:none; min-height:37px; line-height:29px; height:auto !important; height:37px; font-style:normal; padding:3px 17px 0 0; float:left; background:url(../images/buttonOrangeRightWhiteBorder.png) right top no-repeat;}

/** Blue button with white border **/
.blueButtonWhiteBorder {font-size:1.7em; overflow:hidden; padding-left:17px; height:37px; background:url(../images/buttonBlueLeftWhiteBorder.png) left top no-repeat;}
.blueButtonWhiteBorder a {display:block; color:#FFF; min-width:100px; width:auto !important; width:100px; text-align:center; text-decoration:none; min-height:37px; line-height:29px; height:auto !important; height:37px; font-style:normal; padding:3px 17px 0 0; float:left; background:url(../images/buttonBlueRightWhiteBorder.png) right top no-repeat;}

.fl-button { float: left; margin-right: 20px;}


/* PAGINATION */
.pagination ul {margin:0;}
.pagination ul li {float:left; width:auto; font-size:1.3em; font-weight:bold; font-family:arial; padding:0; border:none; color:#FFF; list-style:none; margin:19px 3px 0 0;}
.pagination ul li a {color:#FFF; text-align:center; padding-top:2px; display:block; width:21px; padding-left:1px; min-height:20px; height:auto !important; height:20px;}
#archive .pagination ul li a {width:23px; color:#222;}
.pagination ul li a:hover,
.pagination ul li a.selected {text-decoration:none; color:#FF6600; background:url(../images/bgPaginationComments.gif) no-repeat;}
#archive .pagination ul li a:hover,
#archive .pagination ul li a.selected {text-decoration:none; color:#FF6600; background:url(../images/bgPaginationArchive.gif) no-repeat;}


/* ========= FOOTER ========= */

#footer {background:#000; padding:24px 0 65px;}
#footer ul {list-style:none; margin:0;}
#footer ul li {font-size:1.3em; float:left; margin-right:25px;}
#footer ul li a {color:#666;}
#footer ul li a:hover {color:#FFF;}


/*========================================================================
	POST PAGES
=========================================================================*/

/* CONTENT (default colour is grey) */

#post, #post.grey, #post .postWrapper, #post #content, #post.grey #content { background-color: #d5d4d2; }

#post.orange, #post.orange .postWrapper, #post.orange #content { background-color: #ffae37; }

#post.lightYellow, #post.lightYellow .postWrapper, #post.lightYellow #content { background-color: #fbf9d3; }

#post .postWrapper {
    float: left;
    width: 100%;
}

#post #content { padding-top: 0; }

/* ========= MAIN POST ========= */

#post #mainPost {
    float: left;
    padding: 26px 0 0;
    width: 100%;
}

#post #mainPost .introText {font-size:1.7em; clear:both;}

#post #mainPost h1 {
    font: 500 4em/0.7 'Helvetica Neue W01 55 Roman', 'Helvetica Neue',  Helvetica, Arial, sans-serif;
    margin: 0 0 8px;
    padding: 0;
}

    /* New Styles */
    
    #post #mainPost h1 {
        border-bottom: 3px solid #222;
        font-weight: 400;
        line-height: 1;
        margin-bottom: 20px;
        padding: 20px 0 30px;
    }
    
    #post #mainPost .number {
        box-shadow: 0 0 1px rgba(0,0,0,0.2);
        color: white;
        font-size: 400%;
        padding: 19px 0 18px;
        width: 75px;
    }
    
    .showmore-container h2 {
        border-bottom: 3px solid #222;
        font-weight: 400;
        line-height: 1;
        margin-bottom: 20px;
        padding: 20px 0 30px;
        width: 560px;
    }
    
    .showmore-container .number {
        font-size: 19px !important;
        height: 23px !important;
        line-height: 19px !important;
        padding: 5px 0 8px 0 !important;
        margin: 0 6px 0 0 !important;
    }
    
    .showmore-container .item-title h3 {
        font-size: 18px;
    }
    
    .showmore-container .item-text h3 {
        font-size: 18px;
    }
    
    .showmore-container .item-comments {
        font-size: 14px !important;
        line-height: 40px !important;
        height: 40px !important;
    }

/* COLUMNS */

#post .leftColumn {
    float: left;
    width: 560px;
}

/*#post .leftColumn p {padding-right:40px;}*/
#post .rightColumn {width:360px; float:left; display:inline;}
* html #post #mainPost .rightColumn {margin-right:-15px;}

/* DATE */
#post #mainPost .date {margin-bottom:25px; padding-left:11px; height:30px; background:url(../images/mainPostDateBgLeft.png) no-repeat;}
#post #mainPost .date ul {float:left; min-height:30px; height:auto !important; height:30px; padding-right:10px; list-style:none; margin:0; background:url(../images/mainPostDateBgRight.png) right no-repeat;}
#post #mainPost .date ul li {float:left; padding:6px 0 0 11px; font-size:1.3em; font-weight:bold; margin-left:11px; line-height:1.1em; background:url(../images/mainPostDivider.png) 0 6px no-repeat;}
#post #mainPost .date ul li.first {background:none; margin-left:0; padding-left:0;}
#post #mainPost .date ul li.share a {padding:0 0 0 25px; min-height:17px; height:auto !important; height:17px; background:url(../images/bgSocialLinksIconShare.png) 0 0 no-repeat;}
#post #mainPost .date ul li.comment a {padding:0 0 0 25px; min-height:16px; height:auto !important; height:16px; background:url(../images/bgSocialLinksIconComment.png) 0 0 no-repeat;}
#post #mainPost .date ul li.twitter,
#post #mainPost .date ul li.facebook {padding-top:5px;}
#post #mainPost .date ul li.facebook  {margin-left:0;}
#post #mainPost .date ul li.twitter iframe { float:left; }
#post #mainPost .date ul li.twitter .tweetCount { float:left; height:20px; line-height:20px; width:auto; text-align:right; font-size:0.8em; background:url(../images/twitter-tweets-bg.gif) top right repeat-y; padding:0 7px 0 0; margin:0 8px 0 4px; }
#post #mainPost .date ul li.twitter .tweetCount .tip { display:block; float:left; height:20px; width:7px; background:url(../images/twitter-tweets-tip.gif) no-repeat; }
#post.orange #mainPost .date ul li.twitter .tweetCount .tip { background:url(../images/twitter-tweets-tip-orange.gif) no-repeat; }
#post #mainPost .date ul li.twitter .tweetCount p { float:left; width:auto; padding:0 0 0 3px; margin:0; height:20px; line-height:20px; }
#post #mainPost .date ul li a {color:#222; font-family:arial; display:block; float:left;}

/* CHERRY PICKED COMMENTS */
#post #mainPost .cherryPickedComments {padding:16px 0 0 31px; clear:both; min-height:180px; height:auto !important; height:180px; background:url(../images/bgCherryPickedComments.png) no-repeat;}
#post #mainPost .cherryPickedComments h3 {font-size:1.9em; margin-bottom:15px;}
#post #mainPost .cherryPickedComments .comments ul {margin:0 0 0 25px; width:280px; list-style:none;}
#post #mainPost .cherryPickedComments .comments li { display:none; }
#post #mainPost .cherryPickedComments .comments li p {margin:0;}
#post #mainPost .cherryPickedComments .comments li p.comment {font-family:arial; margin-bottom:0;}
#post #mainPost .cherryPickedComments .comments li p.by-line {font-size:0.8em; color:#77777;}

/* ========= WIDGET AREA (USED IN ALL POSTS) ========= */

#post .widgetArea {clear:both; margin-bottom:34px;}
#post .widgetArea .iframeArea {position:relative; float:left; width:auto; padding-right:96px;}
#post .widgetArea .iframeArea iframe {position:relative;}
#post .widgetArea .iframeArea .overlay {top:11px; left:11px; position:absolute;z-index:1;background:url(../images/overlayBackground.jpg) top left repeat-x #101211;}
#post .widgetArea .iframeArea .overlay h2 {color:#ff6600;font-weight:100;font-size:40px;margin:54px 0 20px 19px;}
#post .widgetArea .iframeArea .overlay p {color:#fff;padding:0 19px;width:auto;}
#post .widgetArea .iframeArea .overlay .textArea {clear:both; float:left;padding:0 18px;}
#post .widgetArea .iframeArea .overlay .textArea .topBorder {width:440px; height:12px; background:url(../images/overlayTextareaTop.png) no-repeat;}
#post .widgetArea .iframeArea .overlay .textArea textarea {margin:-3px 0; width:416px; padding:0 12px; background:url(../images/overlayTextareaBackground.png) repeat-y; color:#000;height:80px;}
#post .widgetArea .iframeArea .overlay .textArea .bottomBorder {width:440px; height:12px; background:url(../images/overlayTextareaBottom.png) no-repeat;}
#post .widgetArea .iframeArea .embed {position:absolute; top:-1px; right:0;width:96px;background:url(../images/pinch-this-bg.png) no-repeat}
#post .post .widgetArea .iframeArea .embed { max-width:96px; width:96px !important; width:96px; }
#post .widgetArea .iframeArea .embed a {color:#000;text-decoration:none;line-height:39px;font-weight:700;text-indent:9px; display:block; height:39px; }

/* widget area horizon line heights */
#post .video .widgetArea,
#post .image .widgetArea {min-height:452px; background-position: 0 -50px !important;}
#post .musicGallery .widgetArea  {min-height:372px; background-position: 0 -120px !important;}
#post .list .widgetArea {min-height:342px; background-position: 0 -150px !important;}


/* ========= ALL OTHER POST CONTENT TYPES ========= */

/* CONTAINERS */
#post .post {clear:both; /* padding:0 0 45px;*/}
#post .post ul, #post .post ol, #post .post p, #post .post h1, #post .post h2, #post .post h3, #post .post h4, #post .post h5 {max-width:700px; width:auto !important; width:700px;}

/* DATE */
#post .post .date, .book .date, .ice .date, .glympse .date {min-height:44px; height:auto !important; height:44px; padding-left:11px; margin-bottom:18px; background:url(../images/postDateBgLeft.png) no-repeat;}
#post .post .date ul, .book .date ul, .ice .date ul,.glympse .date ul {float:left; width:auto; min-height:44px; margin:0; list-style:none; height:auto !important; height:44px; padding-right:11px; background:url(../images/postDateBgRight.png) right top no-repeat;}

#post .post .date ul li, .book .date ul li, .ice .date ul li {
    float: left;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: 1.4;
}

#post .post .date ul li span, .book .date ul li span, .ice .date ul li span, .glympse .date ul li span {display:block; line-height:1.05em;}
#post .post .date ul li .day, .book .date ul li .day, .ice .date ul li .day{font-size:2.4em; margin-top:2px; float:left; font-weight:bold;}
#post .post .date ul li .monthYear, .book .date ul li .monthYear, .ice .date ul li .monthYear {margin:6px 0 0 6px; float:left;}
#post .post .date ul li .month, .book .date ul li .month, .ice .date ul li .month {font-size:1.1em;}
#post .post .date ul li .year, .book .date ul li .year, .ice .date ul li .year {margin-top:2px; font-size:0.8em;}
#post .post .date ul li.type, .book .date ul li.type, .ice .date ul li.type {margin:3px 0 0 11px; padding-left:13px; font-size:2.5em; background:url(../images/postDateBgDivider.png) 0 5px no-repeat;}

/* LIST */
#post .post ol.numberList {list-style:none; margin:0;}
#post .post ol.numberList li {padding-top:19px; min-height:75px; height:auto !important; height:75px; font-family:Georgia; font-style:italic;}
#post .post ol.numberList li.one {padding-left:79px; background:url(../images/iconListNumber1.png) 0 0 no-repeat;}
#post .post ol.numberList li.two {padding-left:126px; background:url(../images/iconListNumber2.png) 0 0 no-repeat;}
#post .post ol.numberList li.three {padding-left:91px; background:url(../images/iconListNumber3.png) 0 0 no-repeat;}

/* MAIN IMAGE */

/* BORDERS */
#post .video {background:#C4C6C8; width:614px; padding:3px;}
#post.orange .video {background:#EB9B0E;}


/* ========= COMMENTS ========= */

/* TITLE AREA */
 	.titleArea {width:645px; padding:18px 0;position:relative;}
#comments .titleArea h2 {/*width:200px;*/ float:left; margin:0; line-height:1;font-size:3em;margin:6px 0 0; }
/*#comments .titleArea .socialLinks {margin-top:12px;}*/

/* SOCIAL LINKS (changes for comments section) */
#comments .socialLinks,
#comments .socialLinks {height:65px; float:right; padding-left:4px; background:url(../images/bgSocialLinks.png) no-repeat;}
#comments .socialLinks {height:45px;}
#comments .socialLinks {background:url(../images/bgSocialLinksBlackLeft.gif) no-repeat;}
#comments .socialLinks ul {padding-right:6px; background:url(../images/bgSocialLinksBlackRight.gif) right top no-repeat;}
#comments .socialLinks ul li a {color:#FFF;}

/* hover states */
#comments .socialLinks ul li:hover,
#comments .socialLinks ul li.hover {background:url(../images/bgSocialLinksBlackOverLeft.gif) no-repeat;}
#comments .socialLinks ul li:hover a,
#comments .socialLinks ul li.hover a {text-decoration:none; background:url(../images/bgSocialLinksBlackOverRight.gif) right top no-repeat; cursor:pointer;}

/* icons */
#comments .socialLinks ul li .twitter {background:url(../images/bgSocialLinksBlackIconTwitter.png) no-repeat;} 
#comments .socialLinks ul li .comment {background:url(../images/bgSocialLinksBlackIconComment.png) no-repeat;} 
#comments .socialLinks ul li .shareIt {background:url(../images/bgSocialLinksBlackIconShare.png) no-repeat;}

/* amounts */
#comments .socialLinks ul li a em {background:#FFF; color:#20282F;}

/* CONTAINER BLOCKS */
#comments { position:relative; color:#FFF; background:url(../images/bgStripCommentsLight.gif) center top repeat-y; clear:both; min-height:500px; height:auto !important; height:500px;}
#comments .titleArea { width:600px; padding:24px 0 14px 40px; font-size:0.7em; border-bottom:1px solid #474c4f; background:url(../images/whatsBeingSaidIcon.gif) 0 24px no-repeat; }
#comments .titleArea h2 { margin:0; }
/*#comments .container {position:relative;}*/
#comments .blockBg {background:url(../images/bgStripComments.gif) center top repeat-y;}
#comments .blockBg.light {background:url(../images/bgStripCommentsLight.gif) center top repeat-y;}

/* FEEDS */
#comments .feeds {width:240px; position:absolute; top:0; right:0; z-index:10;}

/* headings */
#comments .feeds .block {margin-top:19px; float:left; border-top:solid 1px #66696C; clear:both;}
#comments .feeds h3 {color:#FFF; clear:both; width:200px; font-weight:bold; min-height:32px; height:auto !important; height:32px; margin-bottom:14px; font-size:1.9em; padding:25px 0 0 40px;}
#comments .feeds h3.twitter {background:url(../images/iconFeedsTwitter.gif) 0 21px no-repeat;}
#comments .feeds h3.rss {background:url(../images/iconFeedsRSS.gif) 0 23px no-repeat;}
#comments .feeds h3.email {background:url(../images/iconFeedsEmail.gif) 0 23px no-repeat;}
#comments .feeds p {width:200px;}

/* twitter */
#comments .feeds ul {list-style:none; margin:0 0 11px; overflow:auto;}
#comments .feeds ul li {background:url(../images/bgFeedsTop.gif) 0 0 no-repeat; padding-top:21px; margin-bottom:14px;}
#comments .feeds ul li p {width:auto; background:url(../images/bgFeedsBottom.gif) left bottom no-repeat; padding:0 15px 15px 15px; margin:0;}
#comments .feeds ul li a {color:#FFF;}
#comments .feeds ul li a:hover {text-decoration:underline;}
#comments .feeds ul li .time {font-style:normal; font-size:0.8em; color:#9A9B9C;}

/* buttons */
#comments .feeds .button {background:url(../images/buttonOrangeLeft.png) 0 0 no-repeat; min-height:30px; padding-left:17px; line-height:1em; margin-bottom:0;}
#comments .feeds .button a {display:block; font-weight:bold; color:#fff; float:left; padding:8px 17px 9px 0; background:url(../images/buttonOrangeRight.png) right top no-repeat;}
#comments .feeds .button a:hover {text-decoration:none;}

/* COMMENT AREA */
#comments .commentArea {width:640px; padding:26px 0; right:0; top:0; position:relative; }
#comments .commentArea p {margin:40px 0;}
#comments .commentArea ul.commentList {list-style:none; margin:0;}
#comments .commentArea ul.commentList li {border-bottom:solid 1px #474C4F; padding:19px 0 12px; float:left; width:640px;}
#comments .commentArea ul.commentList li:first-child {padding-top:0;}
#comments .commentArea .commentContainer {float:left;}

/* comment box */
#comments .comment .box {display:block; float:left; background:#FFF; color:#333; padding:10px 19px 0; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px;}
#comments .comment .box p {margin:0 0 10px 0;}
#comments .comment.orange .box {background:#FF8A00;}
#comments .comment .box img {border:solid 3px #C4C6C8;}
#comments .comment.orange .box img {border:solid 3px #EB9B0E;}
#comments .comment .pointer {float:left; clear:both; margin:-1px 0 0 16px; width:24px; height:11px; background:url(../images/bgCommentsPointer.gif) no-repeat;}
#comments .comment.orange .pointer {margin-left:16px; width:24px; height:11px; background:url(../images/bgCommentsPointerOrange.gif) no-repeat;}

/* details */
#comments .details {clear:both; padding:12px 0 0;}
#comments .details p {margin:0;}
#comments .details .avatar {float:left;}
#comments .details .avatar img {border:solid 1px #FFF;}

/* author */
#comments .author {float:left; padding:8px 0 0 12px;}
#comments .author p {margin-bottom:8px; line-height:1em;}
#comments .author p.subText {color:#999; font-size:0.8em;}
#comments .author p.subText a {color:#999; text-decoration:underline;}
#comments .author p.subText a:hover {text-decoration:none;}

/* buttons */
#comments  ul.buttons {float:right; list-style:none;}
#comments  ul.buttons li {float:left; border:none !important; width:auto !important; padding:0 !important; margin-left:24px; display:inline; font-size:0.9em; line-height:1em;}
#comments  ul.buttons a {color:#FFF; display:block; padding-top:28px;}
#comments  ul.buttons a.reply {background:url(../images/iconReply.gif) top center no-repeat;}
#comments  ul.buttons a.favourite {min-width:20px; width:auto !important; width:20px; text-align:center; background:url(../images/iconHeartGrey.gif) top center no-repeat;}
#comments  ul.buttons a.favourite.selected {background:url(../images/iconHeartOrange.gif) top center no-repeat;}
#comments  ul.buttons a:hover {text-decoration:none;}

/* COMMENT FORM */
#comments .commentFormArea { padding:24px 0; float:left; position:absolute; right:0; top:0; z-index:2; width:240px; }
#comments .commentFormArea .titleArea { width:240px; background:none; padding-left:0; padding-top:0; border-color:#626669; }
#comments .commentFormArea h2 {font-size:3em;float:left; margin-bottom:0; line-height:1; }
#comments .commentFormArea .subText {float:left; margin:32px 0 0 0; color:#999; font-size:1.9em;}

/* form styles */
#comments form {float:left;}
#comments form input { width:236px; padding:0 4px; color:#989898; }
#comments form label { color:#b5b7b8; }
#comments form .halfColumn { padding-top:19px; width:240px; }
#comments form .halfColumn input {background:url(../images/bgFormCommentsInput.jpg) no-repeat;}
#comments form .fullColumn {padding:19px 0 12px 0; clear:both;}
#comments form .fullColumn .textArea {clear:both; float:left;}
#comments form .fullColumn .textArea .topBorder {width:240px; height:12px; background:url(../images/bgFormCommentsTextareaTop.jpg) no-repeat;}
#comments form .fullColumn .textArea textarea { color:#989898; margin:-3px 0; width:232px; background:url(../images/bgFormCommentsTextarea.jpg) repeat-y; }
#comments form .fullColumn .textArea .bottomBorder {width:240px; height:12px; background:url(../images/bgFormCommentsTextareaBottom.jpg) no-repeat;}
#comments form #submit { cursor:pointer; width:auto; float:right; margin:0 2px 0 0; }
#comments form #uploadify { position:absolute; padding:1px 0 0 0; }
#comments form #uploadify .uploadifyProgress {width:202px;height:10px;background:url(../images/uploadifyProgressBackground.jpg) no-repeat;margin-top:1px;}
#comments form #uploadify .uploadifyProgressBar {height:10px;background:url(../images/uploadifyProgress.jpg) no-repeat;}
#comments form #uploadify .fileName {color:#FFFFFF;line-height:12px;padding:0 0 0 2px;text-align:left;}
#comments form #uploadify .percentage {text-align:left;text-indent:4px;line-height:12px;}
#comments form #uploadify .cancel {border:0 none;bottom:-3px;position:absolute;right:40px;}
#comments form #uploadify .uploadifyQueueItem {float:left;width:250px;position:relative;}
#comments form #uploadify .uploadifyQueue {float:right;margin:1px 0 0 0;}
#comments form #uploadifyComplete { clear:both; display:none; position:absolute; width:140px; }
#comments form #uploadifyComplete .icon {float:left;}
#comments form #uploadifyComplete .filename {line-height:29px;font-size:13px;text-indent:10px;float:left;display:none;}
#comments form #uploadifyComplete .remove {margin:0 0 0 8px;line-height:29px;}
#comments form #uploadifyComplete .remove img {vertical-align:middle;}

/* ========= COMING SOON ========= */

#comingSoon {
    background-color: #FFA70F;
    padding: 34px 0 0;
    position: relative;
}

#comingSoon .textArea {float:left; width:500px; margin-bottom:10px;}
#comingSoon .textArea h2 {margin-bottom:9px; font-size:2.4em;}
#comingSoon .textArea .subText {margin-bottom:15px; font-size:4em; line-height:0.7em; font-weight:bold;}

/* SOCIAL LINKS */
#comingSoon ul.socialLinks {float:right; margin:14px 0 0 0; list-style:none;  }
#comingSoon ul.socialLinks li {margin-right:5px; position:relative; overflow:visible; float:left; }
#comingSoon ul.socialLinks li.followUs { font-size:1.2em; line-height:20px; color:#777777; }
#comingSoon ul.socialLinks li a {color:#000; text-decoration:none; }
#comingSoon ul.socialLinks li a em {display:block; padding:0; font-style:normal; white-space:nowrap; position:absolute; top:-10000px; left:-38%; background:url(../images/soonSocialTooltipRight.png) right no-repeat;}
#comingSoon ul.socialLinks li a em span {display:block; padding:45px 12px 28px; background:url(../images/soonSocialTooltipLeft.png) left no-repeat;}
#comingSoon ul.socialLinks li a:hover em {top:45px;}


/*========================================================================
	ARCHIVE & FORM PAGES
=========================================================================*/


/* ========= ARCHIVE PAGE ========= */

#archive #content {padding-top:6px;}
#archive .bottomBorder {margin:42px 0 0 0;}

/* ARCHIVE LIST */
#archive ul#archiveList {list-style:none; margin:0;}
#archive ul#archiveList li {position:relative; z-index:10000; padding:25px 0 0; width:100%; float:left; background:#D5D7D9 url(../images/bgArchiveListBottom.gif) bottom no-repeat;}

/* image */
#archive ul#archiveList li .image {float:left; margin-right:25px; position:relative; width:216px; height:151px; overflow:hidden;}
#archive ul#archiveList li .image img {position:absolute; left:13px; top:13px; width:190px; z-index:1;}
#archive ul#archiveList li .image .overlay {background:url(../images/bgArchiveOverlay.png) no-repeat; cursor:pointer; position:absolute; left:0; top:0; width:100%; height:100%; z-index:2;}

/* text area */
#archive ul#archiveList li .textArea {width:600px; float:left;}
#archive ul#archiveList li .textArea h1 {font-size:2.5em; margin-bottom:12px;}
#archive ul#archiveList li .textArea h1 a {color:#222;}
#archive ul#archiveList li .textArea .date {min-height:30px; font-family:arial; height:auto !important; height:30px; padding-left:10px; margin-bottom:18px; background:url(../images/bgArchiveDateLeft.png) no-repeat;}
#archive ul#archiveList li .textArea .date p {font-size:1.1em; line-height:1em; float:left; width:auto; min-height:25px; height:auto !important; height:25px; margin:0; list-style:none; padding:5px 10px 0 0; background:url(../images/bgArchiveDateRight.png) right top no-repeat;}

/* HOVER STATES */
/*#archive ul#archiveList li:hover,
#archive ul#archiveList li.hover {background:#C4C6C8; margin:-10px 0 -20px; padding:35px 0 30px;}
#archive ul#archiveList li.hover .image {width:238px; height:166px;}
#archive ul#archiveList li.hover .image img {width:210px; left:14px; top:14px;}
#archive ul#archiveList li.hover .image .overlay  {background:url(../images/bgArchiveOverlayLarge.png) no-repeat;}
#archive ul#archiveList li.hover .textArea h1 {font-size:4em; line-height:0.5em;}
#archive ul#archiveList li.hover .textArea p {font-size:1.1em;}*/

#archive ul#archiveList li:hover,
#archive ul#archiveList li.hover {background:#C4C6C8; }


/* ========= FORM PAGES ========= */

#formPage .leftColumn {width:465px; padding-bottom:40px; float:left; margin-right:25px; display:inline; position:relative; z-index:2;}
#formPage.subscribe .leftColumn {min-height:600px; height:auto !important; height:600px;}

/* FORM ELEMENTS */
#formPage fieldset input {width:301px; height:33px; margin-bottom:20px; background:url(../images/bgFormInput.gif) no-repeat;}
#formPage fieldset .error input {background:url(../images/bgFormInputError.gif) no-repeat;}

/* text area */
#formPage fieldset .textArea {margin-bottom:20px;}
#formPage fieldset .textArea .topBorder {width:463px; height:11px; background:url(../images/bgFormTextAreaTop.gif) no-repeat;}
#formPage fieldset .textArea textarea {width:459px; height:152px; margin:-3px 0 -3px; padding-right:0; background:url(../images/bgFormTextArea.gif) repeat-y;}
#formPage fieldset .textArea .bottomBorder {width:463px; height:11px; background:url(../images/bgFormTextAreaBottom.gif) no-repeat;}
#formPage fieldset .error .textArea .topBorder {background:url(../images/bgFormTextAreaTopError.gif) no-repeat;}
#formPage fieldset .error .textArea textarea {background:url(../images/bgFormTextAreaError.gif) repeat-y;}
#formPage fieldset .error .textArea .bottomBorder {background:url(../images/bgFormTextAreaBottomError.gif) no-repeat;}
	
/* IMAGE COLUMN */
#formPage .imageColumn {float:left;}
#formPage.subscribe .imageColumn {position:absolute; right:-130px; top:-33px; z-index:1;}

/* ========= FORM ERRORS ========= */

.errorlist {list-style:none;padding:0;margin:0;color:#FF6600;}
#comments form label {float:left;}
#comments form .errorlist{ padding:0 0 11px 0; clear:both;}


/* ========= TEMPLATE OVERRIDES ========= */
/* 
 Overrides the default left aligned template to set content as right, stacked, and 3 quarter layout
 */
#post .post .stacked .leftColumn {width:100%;}
#post .post .stacked .rightColumn {margin:0; width:100%;}
#post .post .three-quarter-text .leftColumn {width:705px;}

/* ========= Youtube Player ========= */
#post .youtubePlayer {position:relative; width:614px; height:348px; overflow:hidden;}
#post .youtubePlayer .youtubeClickThrough {position:relative;z-index:1;cursor:default;display:block;}
#post .youtubePlayer .playButton {position:absolute;top:50%;left:50%;margin:-40px 0 0 -40px;}
#post .youtubePlayer object { left:0; overflow:hidden; position:absolute; top:0; z-index:0; }
#post .youtubePlayer .control_wrapper {width: 100%; position: absolute; left: 1px; bottom: 0px; float:left; z-index:2; height:25px;}
#post .youtubePlayer .control_wrapper ul.controls {float: left; width: 100% !important;	height: 25px; overflow: hidden;	position:absolute; background: url(../images/video-player-gradient.jpg) 0 0 repeat-x;	bottom:0;	left:0; margin:0;}
#post .youtubePlayer .control_wrapper ul.controls li {float: left; height: 25px; list-style:none;}
#post .youtubePlayer .control_wrapper ul.controls li a {display: block; width: 100%; height: 100%;}
/* Restart control */
#post .youtubePlayer li.restart {width:31px; position: absolute; left: 0; top: 0;}
#post .youtubePlayer li.restart img {margin: 5px 0 0 7px;}
/* Play / pause */
#post .youtubePlayer li.playToggle {width:31px; position: absolute; left: 31px; top: 0;}
#post .youtubePlayer li.playToggle img {margin: 5px 0 0 7px;}
/* Controls with a border to the right */
#post .youtubePlayer li.restart, #post .youtubePlayer li.playToggle {background: url(../images/video-player-divider.gif) top right no-repeat;}
/* Time control */
#post .youtubePlayer li.time {width: 71%; left: 73px; position: relative;}
/* Fullscreen time control */
.fulllScreenContainer #post .youtubePlayer li.time {width: 100%;}
/* Video progress slider*/
.video_progress {position: relative; top: 10px; width: 100%; height: 3px; border:1px solid #8e8e8e;}
.video_progress .ui-slider-handle {width:3px !important; height:9px !important; background:#f60; position:absolute; left: 0%; top: -3px; z-index:3;}
.video_buffered {bottom:0px; left:0px; position:absolute; width:0%; height:3px; background:#999999; font-size:1px; border:1px solid #bdbdbd;}
.currentPosition {top:0px; left:0; position:absolute; z-index:1; width:0%; height:4px; background:#fff; font-size:1px;}
/* Volume control */
#post .youtubePlayer li.volume {width:65px; position: absolute; right: 10px; top: 0; background: url(../images/video-player-volume-divider.gif) top left no-repeat;}
#post .youtubePlayer li.volume ul {float: right;	margin: 2px 2px 0 0;}
/* Volume control - Volume bars */
#post .youtubePlayer .controls .volume ul { width:auto; }
#post .youtubePlayer .controls .volume ul li { margin:0 1px 0 0; width:2px; font-size:1px; }
#post .youtubePlayer .controls .volume ul li a { width:2px; height:10px; background:#999; float:left; }
#post .youtubePlayer .controls .volume ul li a.on { background:#fff; }
#post .youtubePlayer .controls .volume ul li a.on.selected { background:#ff6600; }
#post .youtubePlayer .controls .volume ul li.level12 a { height:2px; margin-top:16px; }
#post .youtubePlayer .controls .volume ul li.level24 a { height:4px; margin-top:14px; }
#post .youtubePlayer .controls .volume ul li.level36 a { height:6px; margin-top:12px; }
#post .youtubePlayer .controls .volume ul li.level48 a { height:8px; margin-top:10px; }
#post .youtubePlayer .controls .volume ul li.level63 a { height:10px; margin-top:8px; }
#post .youtubePlayer .controls .volume ul li.level75 a { height:12px; margin-top:6px; }
#post .youtubePlayer .controls .volume ul li.level87 a { height:14px; margin-top:4px; }
#post .youtubePlayer .controls .volume ul li.level100 a {height:16px; margin-top:2px; }
/* Fullscreen toggle  */
#post .fullScreenContainer .youtubePlayer object {width:100%; height:100%;}
#post .youtubePlayer li.fullscreen {width:40px; position: absolute; right: 0px; top: 0px;}
#post .youtubePlayer li.fullscreen a {position: relative; width: 39px; float: right;}
#post .youtubePlayer li.fullscreen span {display: block; text-indent: -5000px; overflow: hidden; background: url(../images/btn-video-enter-fullscreen.gif) 0 0 no-repeat; width: 21px; height: 12px; position: absolute;	left: 11px;	top: 6px;}
#post .youtubePlayer li.fullscreen span.exit-fullscreen { background: url(../images/btn-video-exit-fullscreen.gif) 0 0 no-repeat; width:30px; height: 17px; position: absolute; left: 6px; top: 4px;}
/* Controls with a background to the left */
#post .youtubePlayer li.fullscreen {background: url(../images/video-player-divider.gif) top left no-repeat;}

/* ======= DARK GREY THEME ======= */
#post.darkGrey .postWrapper { background:#343536; }
#post.darkGrey .postWrapper p { color:#fff; }
#post.darkGrey h1, #post.darkGrey h2, #post.darkGrey .post .date { color:#fff; }
#post.darkGrey #mainPost .date { background:url(../images/mainPostDateBgLeftGrey.png) left center no-repeat; }
#post.darkGrey #mainPost .date ul { background:url(../images/mainPostDateBgRightGrey.png) right center no-repeat; }

/* ====== Gallery Image ======= */
/** Overlay **/
#galleryPhoto { border:3px solid #C4C6C8; margin:0 0 16px 0; }
#galleryPhoto p { font-size:1em; padding:0; margin:0; }
#galleryPhoto { float:left; width:873px; height:516px; position:relative; background:#fff; top:0; left:0; padding:30px; }
#galleryPhoto .image-info { color:#4C5259; float:left; width:338px; font-family:Helvetica, Arial, Sans-Serif; }
#galleryPhoto .image-info .header { width:100%; float:left; border-bottom:2px solid #C4C6C8; font-size:16px; color:#4D5359; padding:0 0 12px 0; margin:0 0 12px 0; background: none; }
#galleryPhoto .image { border:3px solid #C4C6C8; float:right; width:509px; height:511px; }
#galleryPhoto .titleIamge { float:left; margin:0 10px 0 0; border:1px solid #C4C6C8; }
#galleryPhoto { font-size:14px; }
#galleryPhoto .illustratedTweetsList { list-style:none; margin:20px 0; padding:0; border-top:2px solid #C4C6C8;}
#galleryPhoto .illustratedTweetsList li { border-bottom:1px solid #C4C6C8; padding:6px 0; font-size:1em; }
#galleryPhoto .share { position:absolute; bottom:30px; left:30px; float:left; width:auto; z-index:2; }
/* download button */
#galleryPhoto .downloadButton { float:left; display:block; height:29px; width:72px; text-indent:-100000px; background:url(../images/buttonMusicGalleryDownload.png) no-repeat; }
/* Twitter button */
#galleryPhoto .tweet { margin:0 8px 0 0; float:left; text-indent:-100000px; display:block; width:77px; height:29px; background:url(../images/buttonMusicGalleryShare.png) no-repeat; }
/** Santa Stand In **/
#galleryPhoto.stantastandin {
    border:3px solid #c4c6c8;
    background:#55595c !important;
}
#galleryPhoto.stantastandin .image-info { width:auto !important; }
#galleryPhoto.stantastandin .image
{
    float:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
    width:360px !important;
    height:430px !important;
    margin-top:30px !important;
}

#interact-container div:after{content:none;}