/* Created for CardShop.ie */
/* Copyright 2008 OSD Ltd, Sligo, Ireland - www.osd.ie */
/*** All page content except for footer ***/
#content {
 margin: 0 auto;
 position: relative;
 height: auto !important;
 height: 100%;
 min-height: 100%;
 background: #cccccc url("/images/bg/background.gif") top center repeat-y;
 width: 890px; }

/*** Top menu and logo ***/
#header {
 clear: both;
 position: relative;
 height: auto;
 margin: 0 auto;
 width: 833px;
 border: 1px solid #ffffff; }
#header h1 {
 float: left;
 margin: 0 0 0 0.05em;
 text-align: left;
 padding: 0;
 display:compact;
 font: normal 66px century gothic, verdana, sans-serif;
 color: #3399ff;
 border: none; }
#header h1 a, #header h1 a:hover {
 color: #3399ff;
 text-decoration: none; }
#header h1 span { color: #ff66cc; }
#header h4 {
 position: relative;
 display:inline;
 float: right;
 top: 30px;
 width: 400px;
 margin: 5px 0px 0px 0px;
 padding: 0px;
 text-align: right;
 font: italic 18px verdana, sans-serif;
 color: #333333; }
#header h5 {
 margin: 0.5em 0.5em 0 0.75em !important;
 display:compact;
 text-align: left;
 padding: 0;
 font: italic 15px century gothic, verdana, sans-serif;
 color: #333333;
 border: none;
 vertical-align:bottom; }
 
table.small { 
 margin-top: 5px;
 float: right; 
 font: normal 11px Verdana, Arial, Helvetica, sans-serif;
 text-align: left;
 width: 380px; }

/*** Buttons - login, sign up, etc ***/
#btns {
 float:right;
 width: auto;
 font-size:16px;
 line-height:normal;
 text-align:center; }
#btns ul {
 margin: 5px 0px 0px 0px;
 padding: 0px;
 list-style:none; }
#btns li {
 display:inline;
 margin: 0px;
 padding:0;
 font-weight:bold; }
#btns a {
 float:left;
 background:url("/images/button-info-left.jpg") no-repeat left top;
 margin: 0px 5px 0px 1px;
 padding:0px 0px 0px 10px;
 text-decoration:none; }
#btns a span {
 float:left;
 display:block;
 background:url("/images/button-info.jpg") no-repeat right top;
 padding:3px 17px 6px 5px;
 margin: 0px 0px 0px;
 color:#ff33cc;
 text-align:center; }
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#btns a span { float:none; }
/* End IE5-Mac hack */
#btns a:hover span { color:#ff33cc; }
#btns a:hover { background-position:0% -28px; }
#btns a:hover span { background-position:100% -28px; }

.blue { color: #3399ff !important; }
.pink { color: #ff33cc !important; }

/*** Top Block Menu ****/
#menu_top {
 margin: 0 auto;
 width: 833px;
 height:44px;
 background: #ffffff url("/images/bg/menu.gif") top left repeat-x;
 clear:both; }
#menu_top ul {
 margin:0px;
 padding:0px;
 float:left;
 width:100%; }
#menu_top ul li { display:inline; }
#menu_top ul li a {
 padding: 4px 12px 8px 12px;
 font: normal 17px verdana, sans-serif;
 color: #fff;
 text-decoration:none;
 float:left;
 border-right: 1px solid #2390ff; }
#menu_top ul li a:hover {
 background: url("/images/bg/mouseover.gif") top left repeat-x;
 color:#ffffff; }
#menu_top li a.current {
 background: url("/images/bg/mouseover.gif") top left repeat-x;
 color:#fec8ec;
 text-decoration:none; }

/*** Left Expanding Menu ***/
.menu_left {
 width: 135px;
 background: #ffffff;
 margin: 0px 0px 0px 0px;
 padding: 2px 0px 4px 4px;
 display:block;
 text-decoration: none;
 font-size: 13px;
 color: #666666;
 font-weight: bold;
 border-bottom: 1px solid #dfdfdf; } 
a.menu_left:hover {
 width: 135px;
 background: url("/images/bg/submenu-mouseover.gif") repeat-x !important;
 cursor: pointer !important;
 color: #ffffff;
 margin: 0px 0px 0px 0px;
 padding: 2px 0px 4px 4px;
 display:block;
 text-decoration: none; } 
.submenu_left {
 width: 123px;
 background: #c3e1ff;
 display: block;
 margin: 0px;
 padding: 3px 8px 3px 8px;
 font-size: 11px;
 font-weight: normal;
 border-bottom: 1px solid #c3e1ff; }
#mymenu1 {
 width: 139px;  
 border-top: 1px solid #dfdfdf;
 border-bottom: 1px solid #dfdfdf;
}
a.submenu_left:hover {
 background: #fc27b5;
 padding: 2px 8px 3px 8px;
 color: #ffffff;
 text-decoration: none;
 font-weight: bold;
 border-top: 1px solid #ffffff;
 border-bottom: 1px solid #ffffff; }
.hide { display: none; }
.show{ display: block; }
a.subactive {
 width: 123px;
 display: block;
 background: #fc27b5;
 padding: 2px 8px 3px 8px;
 color: #ffffff;
 text-decoration: none;
 font-weight: bold;
 border-top: 1px solid #ffffff;
 border-bottom: 1px solid #ffffff; }
a.subactive:hover {
 background: #fc27b5;
 padding: 2px 8px 3px 8px;
 color: #ffffff;
 text-decoration: none;
 font-weight: bold;
 border-top: 1px solid #ffffff;
 border-bottom: 1px solid #ffffff; }

/*** Breadcrumbs ***/
#breadcrumbs {
 clear: both;
 float: left;
 width: 100%;
 margin-bottom: 1em; }
#breadcrumbs span { float: right; }
#breadcrumbs a { text-decoration: underline; }
#breadcrumbs a:hover { text-decoration: none; }

/*** Page Content ***/
#page {
 clear: both;
 margin: 0 auto 5em auto;
 text-align: left;
 width: 833px; }
#columns { margin: 0 auto; }
/* Column widths */
.width { width: 833px; }
.widthPad { width: 825px; }
.width24 { width: 20%; }
.width28 { width: 27%; }
.width40 { width: 45%; }
.width50 { width: 47%; }
.width45 { width: 51%; }
.width73 { width: 73%; }
.width75 { width: 75%; }
.width90 { width: 95%; margin: 2px 5px; }

.borders { border: 1px solid #dedede; background: #ffffff;}

.topright {
 float: right;
 font: bold 12px Verdana, Arial, Helvetica, sans-serif !important;
 margin-top: 5px; }
.topright a { text-decoration: underline; }
.topright a:hover { text-decoration: none; }

.bottomleft {
 float: left;
 font: bold 12px Verdana, Arial, Helvetica, sans-serif !important;
 margin-top: 5px; }
.bottomleft a { text-decoration: underline; }
.bottomleft a:hover { text-decoration: none; }

#links {
 position: relative;
 margin: 0px auto;
 padding: 0px;
 font: normal 12px verdana, sans-serif;
 color: #333333; }

/*** Large Buttons - next step, etc ***/
.btns_lge { 
 font-size:20px;
 line-height:normal; }
.btns_lge ul {
 margin: 0px;
 padding: 0px;
 list-style:none; }
.btns_lge li {
 display:inline;
 margin: 0px;
 padding:0;
 font-weight:normal; }
.btns_lge a { 
 float:left;
 background:url("/images/btns-lge-left.jpg") no-repeat left top;
 margin: 0px 5px 0px 1px;
 padding:0px 0px 0px 10px;
 text-decoration:none;
 text-align:center; }
.btns_lge_a { 
 width:200px;
 float:left;
 background:url("/images/btns-lge-left.jpg") no-repeat left top;
 margin: 0px 5px 0px 1px;
 padding:0px 0px 0px 10px;
 text-decoration:none;
 text-align:center; }
.btns_lge a span {
 float:left;
 display:block;
 background:url("/images/btns-lge.jpg") no-repeat right top;
 padding:6px 10px 12px 10px;
 margin: 0px 0px 0px;
 color:#ff33cc;
 text-decoration:none !important; }
/* Commented Backslash Hack hides rule from IE5-Mac \*/
.btns_lge a span { float:none; }
/* End IE5-Mac hack */
.btns_lge a:hover span { color:#ff33cc; }
.btns_lge a:hover { background-position:0% -46px; text-decoration:none !important; }
.btns_lge a:hover span { background-position:100% -46px; }

.btns_lge img { float: left; padding: 11px 10px 0px 0px; }
.btns_lge .grey { color:#666666; font-size:17px; padding: 10px 10px 13px 0px;}

.aleft {  align:left; }
.aright {  align:right; }

/*** Large Buttons - next step, etc ***/
input.btn {
 width: auto;
 font-size:20px;
 line-height:normal;
 background:url("/images/btns-lge.jpg") no-repeat left top;
 text-align:center;
 color:#ff33cc;
 padding:0px 3px 4px 3px;
 border: 1px solid #cccccc;
}
input.btn:hover { 
 background-position:0% -46px;
 color: #3399ff;
 outline: 1px solid #999999;
}
input.btn img { float: left; padding: 11px 10px 0px 0px; }
input.btn .grey { color:#666666; font-size:17px; padding: 10px 10px 13px 0px; }
.pinkbg { background: #ffe9f7; padding: 2px;}

/*** Cards ***/
#cards {
 width: 580px;
 margin: 0px 0px 50px 10px;
 text-align: center; }
#cards ul {
 margin: 0px 0px 10px 0px;
 padding:0px;
 float:left;
 width:auto;
 border: 0px solid #000000; }
#cards ul li { 
 display:inline;
 margin-bottom: 20px;
 float:left; }
#cards ul li a {
 padding: 4px 12px 8px 12px;
 font: bold 12px verdana, sans-serif;
 color: #666666;
 text-decoration:underline;
 float:left; }
#cards ul li a:hover {
 color:#666666;
 text-decoration:none; }
#cards img {
 border: 1px solid #666666; }

/*** Footer ***/
#footer {
 clear: both;
 background: #cccccc url("/images/bg/background.gif") top center repeat-y;
 width: 890px;
 margin: 0 auto;
 height: 70px; }
#footer #bg {
 position: relative;
 margin: 0 auto;
 width: 833px;
 border-top: 1px solid #cccccc; }
#footer #bg ul {
 float: right;
 margin: 2em 1em 0 0;
 padding: 0; }
#footer #bg ul li {
 display: inline;
 list-style: none; }
#footer #bg ul li a {
 float: left;
 padding: 0 1em 1em 1em;
 font: normal 11px verdana, sans-serif;
 line-height: 1em;
 color: #a0a0a0; }
#footer #bg ul li a.last {
 padding-right: 0;
 border-right: 0; }
#footer #bg ul li a:hover { color: #fe3d87; }
#footer #bg img {
 position: absolute;
 top: 6%;
 left: 10px; }

/*** Homepage Offers ***/
.offer {
 float: left;
 width: 100%;
 position: relative;
 margin-bottom: 1em;
 border: 1px solid #cccccc;
 background: #eff7ff; }
.offer .title {
 display: block;
 padding: 0 0 2px 0;
 margin: 0;
 font: normal 25px century gothic, verdana;
 color: #ff3399;
 letter-spacing: -1px; }
.offer p {
 margin: 0 0 0 0;
 padding: 0.5em 0.5em;
 font: normal 13px verdana; }
.offer img {
 float: right;
 padding: 0 0 0 2px; }
.offer a {
 color: #ff3399;
 text-decoration: underline; }

.bluebg {
 float: left;
 width: 100%;
 position: relative;
 padding: 1em;
 background: #eff7ff; 
}
.bluebg2 {
 float: left;
 width: 100%;
 position: relative;
 padding: 1em;
 background: #eff7ff;
}
.bluebg3 {
 float: left;
 width: 86%;
 position: relative;
 padding: 2em 1em 1em 1em;
 background: #eff7ff; 
 height:50px;
}
.bluebg4 {
 float: left;
 width: 86%;
 position: relative;
 padding: 1em 1em 1em 1em;
 background: #eff7ff; 
 height:70px;
}
.bluebg5 {
 float: left;
 width: 86%;
 position: relative;
 padding: 0em 1em 1em 1em;
 background: #eff7ff; 
 height:50px;
}
.bluebghead {
 float: left;
 width: 86%;
 position: relative;
 padding: 1em;
 background: #eff7ff; 
 height:20px;
}
.bluebg_card {
 float: center;
 border: 0px solid #666666;
 margin: 0px; 
}
.card_front_small { 
 background: #ffffff;
 border: 1px solid #666666;
}
.personal {
 background: #eff7ff url("/images/icons/icon-account.jpg") right bottom no-repeat;
 height:100px;
}
.history {
 background: #eff7ff url("/images/icons/icon-history.jpg") right bottom no-repeat;
 height:100px;
}
.credits {
 background: #eff7ff url("/images/icons/icon-credits.jpg") right bottom no-repeat;
 height:100px;
}
.address {
 background: #eff7ff url("/images/icons/icon-address.jpg") right bottom no-repeat;
 height:100px;
}
.messages {
 background: #eff7ff url("/images/icons/icon-messages.jpg") right bottom no-repeat;
 height:100px;
}
.remind {
 background: #eff7ff url("/images/icons/icon-reminders.jpg") right bottom no-repeat;
 height:100px;
}

.scrl {
 margin: 0px;
 overflow: auto;
 width:86%;
 height:360px;
}
.scr2 {
 margin: 0px;
 overflow: auto;
 width:86%;
 height:auto;
}

/*** Personalise left boxes ***/
#personalise_box {
 float: left;
 height: 370px;
 width: 520px;
 position: relative;
 padding: 5px;
 background: #ffffff;
 border: 1px solid #000000; 
}
#box_in_left {
 width: 250px;
 height: 362px;
 float: left;
 border: 1px solid #666666; 
}
#box_in_right_top {
 float:right;
 margin: 20px 6px 11px 0px;
 width: 225px;
 height: 30px;
 border: 1px solid #999999;
 padding: 5px;
 text-align:left; 
 font: normal 11px Verdana, Arial, Helvetica, sans-serif;
 overflow: hidden;
 line-height:100%;
}
#box_in_right_top:hover { border: 1px solid #fc27b5; }

#box_in_right_middle {
 float:right;
 margin: 6px 6px 6px 0px;
 width: 225px;
 height: 215px;
 border: 1px solid #999999; 
 padding: 5px;
 font: normal 11px Verdana, Arial, Helvetica, sans-serif;
 color: #666666;
 overflow: hidden;
 line-height:100%;
}
#box_in_right_middle:hover { border: 1px solid #fc27b5; }

#box_in_right_bottom {
 float:right;
 margin: 6px 6px 6px 0px;
 width: 225px;
 height: 30px;
 border: 1px solid #999999; 
 padding: 5px;
 font: normal 11px Verdana, Arial, Helvetica, sans-serif;
 color: #666666;
 overflow: hidden;
 line-height:100%;
}
#box_in_right_bottom:hover { border: 1px solid #fc27b5; }

#box_in_left_review {
 width: 250px;
 height: 362px;
 float: left;
 border: 1px solid #666666; 
}
#box_in_right_top_review {
 float:right;
 margin: 20px 6px 11px 0px;
 width: 225px;
 height: 30px;
 border: 1px solid #999999;
 padding: 5px;
 text-align:left; 
 font: normal 11px Verdana, Arial, Helvetica, sans-serif;
 overflow: hidden;
 line-height:100%;
}
#box_in_right_middle_review {
 float:right;
 margin: 6px 6px 6px 0px;
 width: 225px;
 height: 215px;
 border: 1px solid #999999; 
 padding: 5px;
 font: normal 11px Verdana, Arial, Helvetica, sans-serif;
 color: #666666;
 overflow: hidden;
 line-height:100%;
}
#box_in_right_bottom_review {
 float:right;
 margin: 6px 6px 6px 0px;
 width: 225px;
 height: 30px;
 border: 1px solid #999999; 
 padding: 5px;
 font: normal 11px Verdana, Arial, Helvetica, sans-serif;
 color: #666666;
 overflow: hidden;
 line-height:100%;
}


/*** Personalise right form ***/
#personalise_card {
 float: right;
 width: 240px;
 position: relative;
 padding: 2px; }
#personalise_card p {
 font: bold 1.1em Verdana, Arial, Helvetica, sans-serif;
 color: #666666; }
 
.cart {
 float: left;
 width: 800px;
 position: relative;
 padding: 1em;
 background: #f4f4f4;
 border-collapse:collapse;
 font-weight: bold;
 font-size: 12px; }
.cart_head {
 height: 31px;
 position: relative;
 padding: 1em;
 background: #f4f4f4 url("/images/cart-head.jpg") repeat-x;
 font-weight: bold;
 font-size: 15px; }
.cart_line { border-bottom: 1px solid #666666; height:1px; }
.cart_line_white { border-bottom: 1px solid #ffffff; height:1px; }

.cart_info { 
 font-weight: bold;
 font-size: 12px; 
}


/*** Submenu Styles ***/
.different_header {
 margin-left: 7px;
 padding: 0px 0px 18px 36px;
 background:url("/images/bg/submenu-header.gif") no-repeat;
 color: #ff66cc;
 font: normal 26px century gothic, sans-serif;
 line-height:0.9em; }
ul.different {
 margin: 0px 0px 0px 7px;
 padding: 0;
 background: url("/images/bg/submenu1.gif") repeat-y; }
ul.different li {
 list-style:none;
 margin: 0px;
 padding: 0px 22px 0px 24px;
 background-image: url("/images/tick.gif");
 background-repeat:no-repeat;
 background-position:5px 5px; }
ul.different li.footer {
 background: #ffffff url("/images/bg/submenu-footer.gif") no-repeat;
 padding: 20px 0px 0px 8px;
 height: 80px;
 margin: 0px; }
ul.different li a {
 display: block;
 /* Start hide from IE Mac \*/
 height: 1%;
 /* End hide from IE Mac */
 padding: 0px 5px 10px 9px;
 font-size: 17px;
 color: #666666; }
ul.different a:hover { color: #ff66cc; text-decoration: none; }

/*** Submenu Styles ***/
ul.info {
 margin: 0px;
 padding: 0; }
ul.info li {
 list-style:none;
 display: block;
 margin: 0px;
 padding: 0px 27px 10px 30px;
 background-image: url(../images/tick.gif);
 background-repeat:no-repeat;
 background-position:2px 0px;
 font-size: 17px;
 color: #ff66cc;
 height: 1%; }
ul.info ul {
 list-style:none;
 display: block;
 margin: 5px 0px 20px 40px;
 padding: 0px;
 background: none; }
ul.info li li {
 list-style:none;
 display: block;
 margin: 0px 0px 5px -37px;
 padding: 0px;
 background: none;
 font-size: 15px;
 color: #666666; }

/*** Generic Display ***/
.block { display: block; }
.clear { clear: both; }
.floatLeft { float: left; }
.floatRight { float: right; }
.alignLeft { text-align: left; }
.alignRight { text-align: right; }
.alignTop { vertical-align: top; }
.sm { margin: 0px; }
.sm2 { height: 85px; }

.error { 
 font: normal 12px Verdana, Arial, Helvetica, sans-serif;
 color: #FF0000;
}

.address_link { 
 text-decoration: underline;
}