/*BARCLAYCARD CREDIT CARD CSS*/

/*CONTENTS~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*
1.GENERAL
2.STATIC PAGE ELEMENTS
3.CONTENT
*/

/*1.GENERAL CLASSES~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
html {}
body {font-size:62.5%;font-family:Verdana, Arial, Helvetica, sans-serif;background:transparent url(../images/ui/bg.jpg) repeat-y fixed center center;color:#003366;line-height:1.4;height:100%;}

/*headers~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
h1, h2, h3, h4, h5, h6 {position:relative;}
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {position:absolute; top:0px; left:0px;}
h1 {font-size:2em; height:30px; color:#00a1e4; padding-bottom:10px;}
h1 span {height:30px; width:100%;}
h2 {font-size:1.2em; height:18px; color:#56517a;}
h2 span {height:18px; width:100%;}
h3 {font-size:1.6em; height:18px; color:#56517a; padding-bottom:12px;}
h3 span {height:19px; width:176px;}
h4 {font-size:1.1em; color:#2f3f6f; font-weight:bold;}
h5 {padding-bottom:6px;}

 #content h1 span {background:transparent url('../images/ui/view_things.gif') no-repeat top left;} 
#content h1 span {background:transparent url('../images/ui/stamp-out-paper-statements.gif') no-repeat top left;}
#content h1 span.simpler {background:transparent url('../images/ui/the_quicker_simpler.gif') no-repeat top left; margin-left:0px; height:80px;}

#left h2 span {background:transparent url('../images/ui/the_new_way_to_manage.gif') no-repeat top left;}
#right h2 span {background:transparent url('../images/ui/watch_the_demo.gif') no-repeat top left;}

h3#personal span {background:transparent url('../images/ui/personal.gif') no-repeat top left;}
h3#business span {background:transparent url('../images/ui/business.gif') no-repeat top left;}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

a {color:#00a1e4;text-decoration:none; position:relative;}
a:hover {text-decoration:underline;}
a span {position:absolute; top:0px; left:0px;}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

strong {font-weight:bold;}
em {font-style:italic;}

ul.ticks {width:490px; list-style: none outside url('../images/ui/tick.gif'); font-size:1.2em; line-height:1.4em; padding:6px 0px 0px 40px;}
ul.ticks li {padding:0px 0px 5px 0px;}
ul.ticks li span { font-size:0.9em; }
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {display: block;}


/*2.STATIC PAGE ELEMENTS~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#wrapper {width:952px;margin:0px auto;}

/*header*/
#header {height:150px; position:relative; overflow:hidden;}
#header a#logo {float:left; height:150px; width:240px;}
#header a#logo span {width:240px; height:150px; position:absolute; top:0px; left:0px; background:transparent url('../images/ui/logo.gif') no-repeat top left;}
#header div.nav-box {float:left; width:177px; min-height:85px; height:auto !important; height:85px; padding:26px 16px 8px 10px;}
#header div.nav-box p {font-size:1.2em; line-height:1.25em;}
#header div.nav-active {background:#f5f6fa url('../images/ui/personal_gradient.gif') bottom left no-repeat;}
#head-extra {width:212px; float:right; padding:10px 2px 0px 0px; }
#head-extra p {text-align:right; padding:0px 0px 20px 0px; font-size:1.1em; line-height:1.2em;}
#login-reg {width:180px; height:42px; padding:8px 8px 8px 8px; background:transparent url('../images/ui/your_barclaycard_account_bg.gif') top left no-repeat; float:right; position:relative;}
#login-reg a#login {position:absolute; top:26px; left:9px;}
#login-reg a#register {position:absolute; top:26px; left:100px;}
#login-reg a span {width:87px; height:23px; position:absolute; top:0px; left:0px;}
a#login span {background:transparent url('../images/ui/login.gif') top left no-repeat;}
a#register span {background:transparent url('../images/ui/register.gif') top left no-repeat;}

#content {margin:0px 0px 20px 0px; padding:0px 19px 0px 10px; overflow:hidden;}

/*footer*/
#footer {border-top:1px dotted #b2b4b4; padding:16px 0px 30px 0px; margin:0px 10px 0px 10px; line-height:1.3em;}
#footer ul {font-size:1.1em; float:left; width:184px; padding:0px 0px 16px 0px;}
#footer ul#wider {width:190px;}
#footer ul li h5 a {color:black; font-weight:bold;}
#footer p.legal {padding-bottom:20px;}
#footer p.legal, #footer p.legal a {color:#b2b4b4; text-align:left;}
#footer p.links {color:#00a1e4;}
#footer p.links a {padding:0px 20px 0px 20px; border-left:1px solid #00a1e4;}
#footer p.links a#first {padding-left:0px; border:none;}

/*3.CONTENT~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#left {width:555px; float:left; overflow:hidden;}
#left p {
	font-size:1.2em;
	padding-top: 4px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 12px;
}

#right { background:url('../images/ui/demo-bg.jpg') no-repeat center bottom; background-color:#f1f0f5; width:305px; height:285px; float:right; overflow:hidden; padding:20px 20px 16px 22px;}
#right p {font-size:1.2em; padding-top:2px;}
#right a span {width:177px; height:44px;}
#right ul { padding: 15px 0 0 5px}
#right ul li { background:url('../images/ui/play_button.gif') no-repeat 0 3px; display: block; height: 28px; padding:7px 0 0 35px; color:#666666; margin-top:2px; }
#right ul li a { font-size: 1.3em; font-weight:bold; color:#003366;}
/*#right .demo {background:url('../images/ui/demo.jpg') no-repeat top left; width:324px; height:241px; position: relative; margin: 10px 0 0 -4px;}*/

/*.full-demo { background:url('../images/ui/thumb-full-demo.gif') no-repeat 0 0; display: block; height: 28px; padding:7px 0 0 55px; }*/
/*.quick-tour { background:url('../images/ui/thumb-quick-tour.gif') no-repeat 0 0; display: block; height: 28px; padding:7px 0 0 55px; }*/

.offers {clear: both;padding: 20px 0 0 0;height:125px;font-size: 1.2em;}
.offers a { float: right; }

.offers .small{/*background:url('../images/ui/box_small.gif') no-repeat top left;*/ float:left; width: 215px; height: 110px; padding:15px 15px 0 15px; margin-right: 36px;}
/*.offers .small h3 { background:url('../images/ui/switch_to_online.gif') no-repeat; text-indent:-9999px; padding-bottom:6px;}
.offers .small a { padding-top: 7px;}
*/
.offers .medium{background:url('../images/ui/box_medium.gif') no-repeat top left; float:left; width: 230px; height: 110px; padding:15px 15px 0 14px; margin-left:10px; _margin-left:6px;}
.offers .medium h3 { background:url('../images/ui/already_registered.gif') no-repeat; text-indent:-9999px; padding-bottom:7px;}
.offers .medium a span { height: 24px; width: 106px; top: 0px; left: -67px;}


.offers .mediumCen{background:url('../images/ui/box_medium.gif') no-repeat top left; float:left; width: 230px; height: 110px; padding:15px 15px 0 14px; margin-left:10px; _margin-left:6px;}
.offers .mediumCen h3 { background:url('../images/ui/mybarclaycard_mobile.gif') no-repeat; text-indent:-9999px; padding-bottom:25px;}
.offers .mediumCen a span { height: 24px; width: 106px; top: 0px; left: -67px;}

.offers .large{

	background:url('../images/ui/box_large.gif') no-repeat top left;
	float:right;
	width: 315px;
	height: 110px;
	padding-top: 15px;
	padding-right: 15px;
	padding-bottom: 0;
	padding-left: 15px;
}
.offers .large h3 { background:url('../images/ui/get_started.gif') no-repeat; text-indent:-9999px; padding-bottom:7px;}
.offers .large p { color: #00a1e4;}
.offers .large a span { height: 24px; width: 104px; top:0px; left:-52px;}

a#login-btn span { background:url('../images/ui/login_btn.gif') no-repeat top left; }
a#register-btn span { background:url('../images/ui/register_btn.gif') no-repeat top left; }
#register-btn-green { width:100%;padding:1px 0 0 0;}
#register-btn-green p{float:left}
#register-btn-green span{float:right}