/* 
styles for eCards.co.uk

*/

/* global */
body  {margin: 0px; color: rgb(100,100,100); font: 13px tahoma;}
img   {border: 0px;}
a {color: rgb(68,166,216); text-decoration: none;}
a:hover {text-decoration: underline;}

h1        {font-size: 20px; color: rgb(68,166,216); font-weight: normal; display: block; border-bottom: 4px solid rgb(68,166,216); }
h2        {font-size: 18px; color: rgb(120,118,119); font-weight: normal; display: block;}
.contain  {width: 960px; margin: auto; position: relative;}
.clear    {clear: both;}





/* header */
#header {height: 145px; background: white url(../../imgs/head-bg.jpg) repeat-x center top;}
#waves  {position: absolute; top: 130px; height: 25px; width: 100%; background: url(../../imgs/waves.png) repeat-x center top;}
#waves2 {position: absolute; top: 130px; height: 25px; width: 100%; background: url(../../imgs/waves-green.png) repeat-x center top;}
#logo   {float: left;}
#free-ecards-nav{float: right; margin-top: 55px;}
#printed-cards-nav{float: right; margin-top: 55px;}
#loginZone  {position: absolute; top: 5px; right: 0px;}


/* home */ 
.SWFcontain     {position: relative; width: 457px; background-image: url(../../imgs/splashButBG.gif); padding-left: 13px; padding-top: 24px; height: 276px;}
#SWFcontain1    {background-image: url(../../imgs/splashButBG1.gif);}
#SWFcontain2    {background-image: url(../../imgs/splashButBG2.gif);}
.homeStars      {position: absolute; right: -15px; top: -10px; z-index: 200;}
#eCardSWF       {position: absolute; z-index: 1;}
#printSWF       {position: absolute; z-index: 1;}


/* middle */
#bread      {height: 24px; margin-top: 15px; padding: 5px; background-color: #F5F3F4; border: 1px solid #EBE9EA; border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; margin-bottom: 10px; margin-left: 6px; margin-right: 8px;}
#bread h1   {display:inline; border: none;}
#leftSide    {width: 220px; float: left;}
.stayLeft    {float: left;}
#rightSide   {float: right; width: 730px;}
#rightSide li {margin-left: 1em;}
.catBox     {margin-bottom: 10px; margin-left: 6px;}
.catBox ul  {list-style: none; margin: 0px; padding: 0px;}
.catBox li a   {font-size: 14px; display:block; height: 20px; list-style: none; margin: 0px; padding: 5px; padding-left: 20px; background: url(../../imgs/cat-bg-item.gif) repeat-x; color: rgb(125,125,125);}
.catBox .head  {background: url(../../imgs/cat-bg-head.gif) repeat-x; height: 24px; color: rgb(56,150,200); font-size: 20px; padding: 5px; padding-top: 5px; padding-left: 10px; }
.catBox .bottom a {background: #F5F3F4 url(../../imgs/cat-bg-bottom2.gif) no-repeat; background-position: bottom;}
.catBox a:hover {background: url(../../imgs/cat-bg-item-over.gif) repeat-x; color: white; font-weight: bold; text-decoration: none; line-height: 20px;}
.catBox .bottom a:hover {background: #F5F3F4 url(../../imgs/cat-bg-bottom2-over.gif) no-repeat;  color: white; font-weight: bold; text-decoration: none; line-height: 20px;}
.catBox .navOn a {background: url(../../imgs/cat-bg-item-over.gif) repeat-x; color: white; font-weight: bold; text-decoration: none; line-height: 20px;}
.catBox .bottomOn a {background: #F5F3F4 url(../../imgs/cat-bg-bottom2-over.gif) no-repeat;  color: white; font-weight: bold; text-decoration: none; line-height: 20px;}
#ecardsInfo   {margin: 15px; margin-top: 40px; margin-bottom: 40px; padding: 5px;}
.rightBlock   {margin-left: 15px; margin-right: 15px;}
.whatis       {margin-right: 15px; text-align: right; font-size: 13px; margin-bottom: 15px;}
.whatis a     {color: rgb(150,150,150);}
#whatisPC,#whatisDC {width: 450px; padding: 10px;}

/* facebook */
#FBbirthdays  {background: white url(../../imgs/FBbirthdays-bg.gif); height: 73px; width: 707px; margin-bottom: 15px; padding-top: 16px;}
#FBbday01     {float: left; display: inline; background: white url(../../imgs/FBbirthdays-01.gif); height: 59px; width: 405px; margin-left: 100px;}
#FBbday02     {float: left; display: inline; margin-left: 20px; margin-top: 20px;}
#FBbday03     {margin-left: 110px;}
.fbFri {float: left; padding: 5px; width: 138px; height: 50px;} .fbPic {float: left; width: 60px;} .friendD {float: left; width: 72px;} .friendName {font-size: 12px;} .friendBday {font-size: 11px; font-style: italic;}
#FBrandoms  {background: white url(../../imgs/FBbrand-bg.gif); height: 73px; width: 707px; margin-bottom: 15px; padding-top: 16px;}
/*#FBrand01     {float: left; display: inline; background: white url(../../imgs/FBrand-01.gif); height: 59px; width: 405px; margin-left: 100px;}
*/


/* Card list */
#cardList {}
.cardThumbC{float: left; display: inline; margin-left: 10px; margin-bottom: 10px;}
.cardThumb {width: 222px; height: 135px; background: white url(../../imgs/card-thumb-bg.png); padding-top: 10px; padding-left: 11px; position:relative;}
.cardName {margin-left: 12px; width: 200px; height: 22px;}
.pagePrev {float: left;}
.pageNext {float: right;}
.faceStar {position: absolute; top: -5px; right: -5px; width: 46px; height: 46px; background: url(../../imgs/star-faceit.png);}
.seasButton {margin-left: 1px;}

/* Preview / send page */
#previewZone  {width: 690px; float: left; display: inline; background: rgb(231,241,242) url(../../imgs/pCard-bg.jpg) center bottom no-repeat; margin-left: 5px; padding-top: 25px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin-bottom: 15px;}
#ecardcontainer {width: 468px; height: 370px; margin: auto; background-image: url(../../imgs/preview-ecard-bg.jpg); padding: 10px; }
#ecardcontainer2 {width: 620px; margin: auto;}
#ecardcontainer3 {width: 400px; margin: auto;}
#rplyCard     {margin-left: 400px;}
#fbLike       {float: left; margin-left: 110px; padding-top: 0px;}
#fbLike2       {float: left; margin-left: 5px; padding-top: 7px;}
#fbLike3       {float: left; margin-left: 40px; padding-top: 0px;}
#actionsSide  {margin-right: 40px; width: 215px; float: right; display: inline; }
.actionBlock  {width: 215px; padding: 10px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; background-color: rgb(245,243,244); margin-bottom: 5px; text-align: left; color: rgb(120,118,119); font-size: 14px;}
.inFieldLine {text-align: center; border-bottom: 1px dashed rgb(217,214,215); margin-top: 5px; margin-bottom: 5px;}
.inField    {margin-bottom: 8px; text-align: center;}
.textbox   {width: 200px; border: 1px solid rgb(220,218,219); padding: 4px; color: rgb(120,118,119); border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px;}
.textarea  {width: 200px; border: 1px solid rgb(220,218,219); padding: 4px; color: rgb(120,118,119); border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px;}
select     {color: rgb(120,118,119); padding: 3px;}
.dropBox   {width: 206px;}
.badInput  {border: 1px solid red;}
#cardMsg  {font-size: 16px; font-style: italic; width: 490px; margin: auto; padding: 5px;}
#cardMsgFrom  {font-size: 16px; font-style: italic; font-weight: bold; width: 490px; margin: auto; padding: 5px;}
.nextStep   {font-size: 20px; color: rgb(103,167,43); text-decoration: none; display: block; cursor: pointer; float: left;}
.nextStepD  {text-decoration: none; color: rgb(120,118,119); display: block; padding-bottom: 2px; padding-top: 6px; margin-left: 10px; cursor: pointer;  float: left; display: inline; }
.actionBlock .block2    {border-top: 1px dashed rgb(217,214,215); padding-top: 8px;  margin-top: 8px;}
.actionBlock .block1    {padding-bottom: 5px; height: 22px; width: 100%; cursor: pointer;}
.sendBlock    {margin-top: 5px;}
#termsBox {font-size: 9px; text-align:justify;}
#recipDetails .block2   {display: none;}
#ecardMsg .block2       {display: none;}
.badMsg   {font-size: 11px; color: red;}
#bookmarkList li {list-style: none; float: left; margin-right: 25px; display: inline; }

#coreg_message {margin-top: 20px;}
.reg_error {font-size: 20px; color: rgb(229,24,55);}
#coregs_container_ds table{text-align: center; width: 100%;}
#coreg_message  {font-size: 20px; color: rgb(68,166,216); font-weight: normal; display: block; border-bottom: 1px solid rgb(68,166,216); margin-bottom: 20px;}

catToolBar form{padding: 0; margin: 0;}



/* aPanel */
#aPanel {width: 640px; float: left; display: inline;  background: rgb(245,243,244); margin-left: 5px; padding: 25px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px;}
#ratings_panel {}
#tags_panel,#share_panel,#info_panel {}
#tagsText a  {font-size: 18px; margin-right: 12px;}
#panelTabs  {width: 700px; margin-left: 20px;}
#panelTabs #tab_rate  {height: 33px; width: 162px; float: left; background-image:url('../imgs/tab_rate.gif'); cursor: pointer; }
#panelTabs #tab_tag   {height: 33px; width: 162px; float: left; background-image:url('../imgs/tab_tag.gif'); cursor: pointer; }
#panelTabs #tab_share {height: 33px; width: 162px; float: left; background-image:url('../imgs/tab_share.gif'); cursor: pointer; }
#panelTabs #tab_info  {height: 33px; width: 162px; float: left; background-image:url('../imgs/tab_info.gif'); cursor: pointer; }
#panelTabs .tabon     {background-position:0px 0px;}
#panelTabs .taboff    {background-position:0px -33px;}
#panelTabs .taboff:hover   {background-position:0px 0px;}

/* ratings panel */
.ratingBox {margin-left: auto; margin-right: auto; width: 300px;}
.ratingBox .rating-text {color: grey; text-align: center; font-size: 16px;}
.ratingBox .status {color: grey; text-align: center;}
.ratingBox ul {margin: 0px; padding: 0px; margin-left: 32px;}
.ratingBox li {float: left; list-style: none; margin: 0px; padding: 0px;}
.starFull {background-image: url(../imgs/star_full.png); display:block; width: 48px; height: 48px;}
.starHalf {background-image: url(../../imgs/star_half.png); display:block; width: 48px; height: 48px;}
.starGrey {background-image: url(../../imgs/star_grey.png); display:block; width: 48px; height: 48px;}
/* comments panel */
.comment_box        {clear: both; padding: 10px; border-bottom: 1px solid rgb(209,209,209);}
.comment_photo      {float: left; height: 30px; width: 50px; padding: 5px; } 
.comment_photo img  {height: 30px; width: 30px;} 
.comment_name       {margin-left: 60px; font-weight: bold;} 
.comment_date       {float: right; color: rgb(182,182,182); font-size: 11px;}
.comment_msg        {margin-left: 60px;}
#comment_addB       {float: right;} 
.comments_addB      {padding: 5px; height: 22px;}
#addCommentBox      {clear: both; padding: 10px; border-top: 1px solid rgb(255,154,0); border-bottom: 1px solid rgb(255,154,0); background-color: rgb(252,243,217);}
#comment_add_title  {font-size: 18px; margin-bottom: 10px;}
#comment_instructions{padding: 10px; margin: 5px; background-color: rgb(255,252,224)} 
#commentNotice     {padding: 10px; margin: 5px; background-color: rgb(255,252,224); color: rgb(145,64,0); display: none;}
.comment_left-col   {width: 200px; min-height: 20px; float: left; text-align: right; padding-right: 10px;}
.comment_right-col  {float: left;}
.comment_row        {clear: both; padding-top: 5px;}
#comment_name       {width: 220px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 5px; border: 1px solid rgb(150,150,150);}
#comment_msg        {width: 220px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 5px; border: 1px solid rgb(150,150,150);}
.comments_showMore  {text-align: center; padding: 5px;}
.comments_showing   {color: rgb(180,180,180); font-size: 12px;}
.comments_fbcBox    {float: right;}
.fb_link img  {width: 30px; height: 30px; } 


/* My Account area */
#content_wrapper_ds  {margin-top: 20px;}
#center_wrapper_ds3{width: 560px; margin: auto; }
#center_wrapper_ds3 .newh1  {color: white;}
#center_wrapper_ds3 .login  {color: white;}
.myCards {width: 100%}
.myCards td {padding: 2px; height: 16px; border-bottom: 1px solid white;}
.myCards .unread {background-color:rgb(255,217,217);}
.myCards .read {background-color:rgb(184,255,159);}
.fullContentBox {margin-top: 20px; margin-right: 15px; margin-left: 5px; padding: 10px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; background-color: #f7f7f7; margin-bottom: 5px; text-align: left; color: rgb(120,118,119); font-size: 14px;}



/* Footer */
#footContainA {margin: auto; margin-top: 20px; font-size: 12px; color: rgb(96,96,96); padding-bottom: 10px; background-color: rgb(194,222,231);}
#footContain  {margin: auto; font-size: 13px; color: rgb(96,96,96); padding-bottom: 20px; background-color: rgb(68,159,190);}
#footerA      {width: 900px; margin: auto; padding: 15px;}
#footer       {width: 930px; margin: auto;}
#footer a     {color: rgb(228,241,245);}
#footer h1    {font-size: 18px; margin: 0px; font-weight: normal; color: white; border: none;}
#footerTopA   {height: 16px; background: url(../../imgs/footWaveA.gif) repeat-x;}
#footerTop    {height: 16px; background: url(../../imgs/footWave.gif) repeat-x;}
#footerBot    {height: 16px; background: url(../../imgs/footer-bg-bot.gif) no-repeat;}
#footer1,#footer2,#footer3,#footer4   {padding: 10px; color: rgb(228,241,245); float: left; border-right: 1px solid rgb(4,139,187); height: 160px; width: 180px;}
#footer1  {width: 300px;}
#footer4 {border-right: none;}