@import url(../StyleSheet.css);

body 
{
    background: #3e2360 url(Canvas/Main-Background2.jpg);
}
#canvasWrapper { background: url(Canvas/Canvas-WhiteSync.gif) top center repeat-y; }
#canvasTopWrapper { background: url(Canvas/Canvas-BackgroundFade.gif) top center no-repeat; }
#canvas 
{
    background: #fff url(Canvas/Canvas-BackgroundSync.jpg) top repeat-x;
    width: 940px;
    padding: 0 0 5px;
    margin: 0 auto;
}

#headerLogo { padding: 20px 20px 10px 10px; float: left; }
.mainContent { width: 640px; float: left; }
.sideContent { width: 280px; float: right; }
#visitHallmark { text-align: right; padding: 15px 0 0 0; }
#visitHallmark a { color: #333; }
#header { font-size: 12px; }
.block { margin: 0 0 15px 0; }
.underlineHeader { margin: 0 0 10px 0; background: url(Canvas/Dotted-Background.gif) bottom repeat-x; padding: 13px 0 12px 0; }
.underlineHeader h2 { margin: 0; }
.legalText, .legalText p { background-image: url(Canvas/Dotted-Background.gif); background-repeat: repeat-x; }
.legalText { background-position: top left; margin: 0 0 10px 0; }
.legalText p { background-position: bottom left; margin: 0; padding: 10px 0; font-size: .9em; color: #666; }

/**** Clear Fix *****************************************************/
.clearfix:after, .enginePane:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix, .enginePane { zoom: 1; }
.clear { clear: both; }

/*==== Form word count =======================================================*/
.wordCount { font-size: .8em; }
.wordCount small { font-size: .9em; color: #666; }

/*==== Errors ================================================================*/
.error { color: Red; }
.error a { text-decoration: underline; }
.error a, .error small { color: Red !important; }
.errorPane {  margin: 0 0 1em 0; }

/*==== Main Navigation =======================================================*/
ul#mainNavigation, ul#mainNavigation li, ul#mainNavigation ul { margin: 0; padding: 0; list-style-type: none; }
ul#mainNavigation { float: right; padding: 15px 0 0 0; }
ul#mainNavigation li { float: left; padding: 0 0 0 25px; position: relative; z-index: 500;}
ul#mainNavigation li a.root { display: block; height: 34px; float: left; padding: 1px 0; overflow: hidden; }
/*ul#mainNavigation li a.root:hover { height: 46px !important;  }*/
ul#mainNavigation ul { display: none; }
ul#mainNavigation ul 
{
    position: absolute;
    top: 35px;
    left: 30px;
    background: #666;
    border: 1px solid #fff;
}
ul#mainNavigation li.navItem1 ul { background-color: #B6D0D4; width: 225px; }
ul#mainNavigation li.navItem2 ul { background-color: #F48027; width: 185px; }
ul#mainNavigation li.navItem3 ul { background-color: #F3C91A; width: 175px; }
ul#mainNavigation ul li 
{
    float: none;
    padding: 0;
    position: static;
    zoom: 1;
}
ul#mainNavigation ul li a { color: #fff; display: block; padding: 10px 10px; font-size: 1.2em; }
ul#mainNavigation li.navItem4 a.root:hover { height: 46px !important;  }

/*===== Footer ===============================================================*/
#footer { padding: 20px 0 0 0; }
#footer, #footer a { text-decoration: none; font-size: 12px; }
#footer, #footer .linkGroup a, #footer .bottomContent a { color: #333; }
#footer h3, #thinkingAbout label
{
    font-size: 16px;
    font-family: "Arial Narrow", Arial;
    font-weight: bold;
    text-transform: uppercase;
    color: #3e1d6b;
    margin: 0 0 8px 0;
}
#footer cite { color: #7ca1a6; display: block; font-style: normal; }
#footer blockquote { padding: 0; margin: 0 0 10px 0; }
#footer ul, #footer ul li { margin: 0; padding: 0; list-style-type: none; }

/*===== Bottom of footer =====================================================*/
#footer .logo, #footer p.copyright, #footer ul.links { float: left; }
#footer .logo { padding: 0 10px 0 0; }
#footer p.copyright { margin: 0; }
#footer ul.links li { display: inline; border-left: 1px solid #666; margin-left: 10px; padding-left: 10px; }
#footer ul.links li a:hover, #footer .linkGroup ul li a:hover {text-decoration:underline;}
#footer p.copyright, #footer ul.links { padding: 20px 0 0 0; }

/*===== Footer columns =======================================================*/
#footer .bottomContent { clear: both; }

/*===== Footer link columns ==================================================*/
#footer .linkGroup 
{
    border-width: 3px 0 0 0;
    border-style: solid;
    width: 140px;
    padding: 5px 10px;
    float: left;
}
#blogsLinks { border-color: #fdcb17; }
#resourcesLinks { border-color: #8bb1b6; }
#ourCompanyLinks { border-color: #ea6c24; }
#followUsLinks { border-color: #b4d22a; }
#footer .linkGroup li { margin: 0 0 6px 0; }

/*===== Footer thinking section ==============================================*/
#thinkingAbout { margin: 0 0 20px 0; position: relative; padding: 118px 0 0 0; }
#thinkingAbout fieldset 
{
    padding: 10px 5px 0 5px;
    background: #3e1d6b;
    position: absolute;
    margin: 0;
    top:0;
    left: 0;
    width: 270px;
    overflow: hidden;
}
#thinkingAbout h3, #thinkingAbout label { color: #fff; }
#thinkingAbout label { display: block; }
#thinkingAbout .inputTextWrapper 
{
    margin: 0;
    background: url(Footer/ThinkingAbout/Input-Background.gif) top left no-repeat;
    padding: 13px 15px 44px 15px;
    position: relative;
}
#thinkingAbout .remainingFields { padding: 5px 0 5px 0; }
#thinkingAbout .remainingFields .inputTextWrapper { padding-bottom: 40px;}
#thinkingAbout .inputTextWrapper input.button { padding: 0; position: absolute; top: 13px; right: 3px; background: transparent; }
#thinkingAbout .inputTextWrapper input.text { border: 0; background: #fff; width: 210px; }
#thinkingAbout .close  
{
    background: #634784 url(Canvas/Up-Arrow.gif) center center no-repeat;
    height: 10px; 
    text-indent: -9999px; 
    overflow: hidden; 
    cursor: pointer; 
}
#thinkingAbout fieldset .loading
{
    position: absolute;
    background: #000 url(Canvas/loadingAnimation.gif) center center no-repeat;
    opacity: .8;
    filter: alpha(opacity=80);
    width: 270px;
    height: 100%;
    z-index: 100;
}
#whatOthersThink blockquote 
{
    background-position: top left;
    background-repeat: no-repeat;
    padding-left: 27px;
    font-size: 12px;
}
#whatOthersThink blockquote.quote1 { background-image: url(Footer/ThinkingAbout/Thinking-Cloud-Icon-1.gif); }
#whatOthersThink blockquote.quote2 { background-image: url(Footer/ThinkingAbout/Thinking-Cloud-Icon-2.gif); }
#whatOthersThink blockquote.quote3 { background-image: url(Footer/ThinkingAbout/Thinking-Cloud-Icon-3.gif); }

/*===== Hallmark Share Words =================================================
#shareWords 
{
    background: #b4d22a;
    padding: 10px;
    margin: 0 0 20px 0;
    font-size: 1.2em;
    line-height: 1.2em;
    min-height: 80px;
    height: auto !important;
    height: 80px;
}
#shareWords a { font-weight: bold; }
#shareWords .number { color: #fff; font-size: 1.2em; width: 50px; float: left; }
#shareWords .content { margin-left: 50px; }
#shareWords .number strong { font-size: 1.6em; }*/
#shareWords { margin: 0 0 20px 0; }

/*===== Tabbed Content =======================================================*/
.tabbedContent ul.tabs,.tabbedContent ul.tabs li { margin: 0; padding: 0; list-style-type:none; }
.tabbedContent ul.tabs  
{
    width: 100%; overflow: hidden; background: url(Canvas/Dotted-Background.gif) bottom repeat-x; 
    margin: 0 0 10px 0;
    padding: 0 0 2px 0;
}
.tabbedContent ul.tabs li 
{
    float: left;
    padding: 0;
}
/*.tabbedContent ul.tabs li, .tabbedContent ul.tabs li a { background: url(Tabs/Tab-Inactive.gif) top left no-repeat; }
.tabbedContent ul.tabs li.first { border-left-width: 1px; }
.tabbedContent ul.tabs li a 
{
    font-size: 15px;
    font-family: "Arial Narrow", Arial;
    font-weight: bold;
    text-transform: uppercase;
    color: #666;
    text-decoration: none;
    display: block;
    padding: 10px 8px 5px 6px;
    background-position: top right;
    
}
.tabbedContent ul.tabs li.active { background-image: url(Tabs/Tab-Active.gif); }
.tabbedContent ul.tabs li.active, .tabbedContent ul.tabs li.active a { background-image: url(Tabs/Tab-Active.gif); color: #3e1d6b;  }
*/
.tabbedContent ul.tabs li a { background-position: 0 -37px; height: 37px; }
.tabbedContent ul.tabs li.active a { background-position: 0 0; }
#WhatOthersAreSayingTab { background-image: url(Tabs/What-Others-Saying.gif); width:188px; }
#OurBlogTab { background-image: url(Tabs/Our-Blog.gif); width:86px; }

#MostRecentTab { background-image: url(Tabs/Most-Recent.gif); width:109px;}
#HighestRatedTab { background-image: url(Tabs/Highest-Rated.gif); width:120px; }
#SearchTab { background-image: url(Tabs/Search.gif); width:71px; }

/*===== pagination ===========================================================*/
.pagination { padding: 10px; background-repeat: repeat-x; background-image: url(Canvas/Dotted-Background.gif);}
.pagerOptions, pagerOptions a { color: #fff; }
.pagerOptions { background: #3E1D6B; padding: 10px; }
.pagerResults { padding: 10px 0; }
.paginationHeader { background-position: bottom left; }
.paginationFooter { background-position: top left; }

/*===== Form Table ===========================================================*/
table.formTable td { padding: 8px 15px 7px 0; }
table.formTable td label { margin: 0 0 3px 0; display: -moz-inline-box; display: inline-block; }
table.formTable td input, fieldset.largeFormFields input.text { padding: 7px; }
fieldset.largeFormFields select { font-size: 21px; color: #666; padding: 1px; }
input.button 
{
    background: #93ab0a url(Form/Button-Bg.gif) top repeat-x;
    border: 0;
    margin: 0;
    color: #fff;
    font-family: "Arial narrow", Arial;
    font-weight: bold;
    padding: 6px 10px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    overflow: visible;
}
input.smallButton { font-size: 12px; padding: 2px 4px 3px 4px; }

/*===== jQuery Scroller ======================================================*/
.jScrollPaneContainer { position: relative; overflow: hidden; z-index: 1; }
.jScrollPaneTrack { position: absolute; cursor: pointer; right: 0; top: 0; height: 100%; background: #EAEFD1; }
.jScrollPaneDrag { position: absolute; background: #B4D22A; cursor: pointer; overflow: hidden; }
.jScrollPaneDragTop { position: absolute; top: 0; left: 0; overflow: hidden; }
.jScrollPaneDragBottom { position: absolute; bottom: 0; left: 0; overflow: hidden; }
a.jScrollArrowUp { display: block; position: absolute; z-index: 1; top: 0; right: 0; text-indent: -2000px; overflow: hidden; background: #B4D22A url(Canvas/ScrollUp.gif) center center no-repeat; height: 19px; border-bottom: 1px solid #fff; }
a.jScrollArrowUp:hover { /*background-color: #f60;*/ }
a.jScrollArrowDown { display: block; position: absolute; z-index: 1; bottom: 0; right: 0; text-indent: -2000px; overflow: hidden; background: #B4D22A url(Canvas/ScrollDown.gif) center center no-repeat; height: 19px; border-top: 1px solid #fff; }
a.jScrollArrowDown:hover { /*background-color: #f60;*/ }
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover { /*background-color: #f00;*/ }

/*===== jQuery Selectbox =====================================================*/
select.styled { font-size: 14px; } /* gives styled dropdown some breathing room */
.js ul.newList {left:-9999px;}
ul.newList * {margin:0; padding:0;}
ul.newList {margin:0; padding:0; list-style:none; color:#000; width:290px; background:#fff; position:absolute;  border:1px solid #999; top:22px; left:-1px !important; overflow:auto; z-index:9999;}
.newListSelected {width:285px; border: 1px solid #ccc; color:#000; height:30px; padding:0; float:left; background: #fff url(Form/Select-Bg.gif) top right repeat-y; }
.newListSelected span {width:284px; display:block;}
ul.newList li {padding:3px 8px;}
.selectedTxt {width:258px; overflow:hidden; height:16px; padding:6px 36px 0 6px; height: 24px; }
.hiLite {background:#666!important; color:#fff!important;}
.newListHover {background:#ccc!important; color:#000!important; cursor:default;}
.newListSelHover, .newListSelFocus {cursor:default; border-color: #666 #999 #999 #666;}
.newListOptionTitle {font-weight:bold;}
.newListOptionTitle ul {margin:3px 0 0;}
.newListOptionTitle li {font-weight:normal; border-left:1px solid #ccc;}
#shareWords .content p
{
	display:inline;
}
#ShareWordEmailSignup
{
	padding-bottom:10px;
}
#thinkingAboutErrorPane, #shareWordEmailSignupErrorPane
{
	color:Red;
	font-weight:bold;
}

/*===== Pager Frame Table =====================================================*/
table.pagerFrame { width: 100%; border-collapse: collapse; }
table.pagerFrame tr.header { background: #3e1d6b; }
table.pagerFrame tr.header th { font-weight: bold; padding: 5px; text-align: left; color: #fff; }
table.pagerFrame tr.header th a { color: #fff; }
table.pagerFrame tr.header th.selected img { padding: 0 5px 2px 0; }
table.pagerFrame td { padding: 5px; }
table.pagerFrame td.alternate, table.pagerFrame tr.alternate td { background: #f0ebea; }


/*===== Replace Text with Images ===============================================*/
.replaceTxt { display:block; overflow: hidden; text-indent: -9999px; text-align: left; background-repeat: no-repeat; background-position: top left;}
#FooterOurCompany { background-image: url(Headers/our_company.gif); width:94px; height:14px; }
#FooterResources { background-image: url(Headers/resources.gif); width:76px; height:14px; }
#FooterBlogs { background-image: url(Headers/blogs.gif); width:94px; height:14px; }
#FooterFollowUs { background-image: url(Headers/follow_us.gif); width:76px; height:14px; }
#WhoOthersThinkingAbout { background-image: url(Headers/what_others_are_thinking.gif); width:225px; height:14px; }
#HallmarkVideo { background-image: url(Headers/hallmark_video.gif); width: 109px; height: 14px;}
#WhoAreYouThinkingAbout { background-image: url(Headers/purp_who_thinking_about.gif); width: 207px; height: 14px; }
#WhatIsYourName { background-image: url(Headers/purp_what_your_name.gif); width: 139px; height: 14px;}
#WhereAreYouFrom { background-image: url(Headers/purp_where_you_from.gif); width: 153px; height: 14px;}
#MoreAlbums { background-image: url(Headers/more_albums.gif); width: 92px; height: 14px; }
#OtherVideos {background-image: url(Headers/other_videos.gif); width: 92px; height: 14px;}
#VirtualTour {background-image: url(Headers/hallmark_virtual_tour.gif); width: 161px; height: 14px;}
#FeaturedVideo {background-image: url(Headers/featured_video.gif); width: 108px; height: 14px;}
#HeresWhoOthersAreThinking {background-image: url(Headers/heres_others_think_now.gif); width: 354px; height: 14px;} 
#ShareTheseMoments {background-image: url(Headers/share_these_moments.gif); width: 154px; height: 14px;}
#FeaturedHallmarkMoment {background-image: url(Headers/featured_hallmark_moment.gif); width: 196px; height: 14px;}
#BehindTheScenes {background-image: url(Headers/behind-the-scenes.gif); width: 220px; height: 16px;}
#RelatedVideos {background-image: url(Headers/related-videos.gif); width: 133px; height: 16px;}
div#ILike, div.submitILike { font-size:12px; }