/* -----------------------------------------------------------------------

   MGRT screen stylesheet

----------------------------------------------------------------------- */
body {padding:10px 0 0 0;margin:0}
h1,h2 {font-size:1.5em;line-height:1.1em;color:#003B5C; background-color:#e6ecef; padding:3px; font-size:18px}
a {color:#bd1a70; text-decoration:none}
h4 {font-weight:bold; font-size:1.1em}
input, select, textarea {font-family:"Helvetica Neue", Helvetica, Arial, sans-serif}

.emph {padding:3px; font-size:1.2em; line-height:1.3em}
.minicontainer {width:560px;margin:0 auto;}

fieldset label.text {float:left; width:210px; margin-right:30px}
fieldset#subscription label.error {display:block; margin-left:240px}

.name {text-transform:capitalize}

/* header bits */
#adNav {padding-top:20px}
#banner {float:right; width:468px; height:60px; margin-bottom:20px}


/* Navigation bar */
#Nav {position:relative; float:right; width:697px;height:21px}
#Nav ul {position: absolute; top: 0px; right: 0px; width: 697px; height: 21px; padding: 0; margin: 0;}
#Nav li {list-style: none; margin: 0; padding: 0; display: inline;}
#Nav li a:link, #Nav li a:visited, #Nav li a:hover {outline: 0; display: block; position: absolute; background-image: url('/images/template/navbar.png'); background-repeat: no-repeat; top: 0px; overflow: hidden; font-size: 1px; line-height: 1px; color: #fff; height: 0; padding: 21px 0 0 0; cursor:pointer; z-index:1}
/* regular links */
#Nav .li1 a {left: 0; width: 69px;}
#Nav .li2 a {left: 69px; width: 151px; background-position: -69px 0}
#Nav .li3 a {left: 220px; width: 143px; background-position: -220px 0}
#Nav .li4 a {left: 363px; width: 139px; background-position: -363px 0}
#Nav .li5 a {left: 502px; width: 134px; background-position: -502px 0}
#Nav .li6 a {left: 641px; width: 61px; background-position: -636px 0}
/* hover/current states */
#Nav .li1 a:hover, #Nav .li1 a.current {background-position: 0 -21px}
#Nav .li2 a:hover, #Nav .li2 a.current {background-position: -69px -21px}
#Nav .li3 a:hover, #Nav .li3 a.current {background-position: -220px -21px}
#Nav .li4 a:hover, #Nav .li4 a.current {background-position: -363px -21px}
#Nav .li5 a:hover, #Nav .li5 a.current {background-position: -502px -21px}
#Nav .li6 a:hover, #Nav .li6 a.current {background-position: -636px -21px}
/* sorry, couple of ie6 fixes */
#Nav li a {cursor: pointer; background:inherit}

/* pink bar & footer */
#pinkbar, #footer {width:100%; clear:both; display:block}
#pinkbar {background-color:#bd1a70;margin:10px 0 20px 0; padding:6px 0; }
#pinkbar p {margin:0;padding:0}
#pinkbar, #pinkbar a {color:white}
#pinkbar a {font-weight:bold; text-decoration:underline}
#pinkbar form {margin:0;padding:0}
#pinkbar h1, #pinkbar h2 {color:white; background-color:#bd1a70; margin:0}
#loginlinks {text-align:right}

#footer {background-color:#e6ecef; margin:20px 0 0 0;padding:10px 0; }
#footer, #footer a {color:#003b5c}
#footer a {text-decoration:none;font-weight:bold}
#footer a:hover, #footer a:active {text-decoration:underline}
#footer ul {list-style:none;padding:10px 0; margin:0}
#footer ul li {display:inline;margin:0 5px 0 0; padding:0 5px 0 0}

/*search boxes*/
input.search {float:left;margin:0 0 0 3px;padding:6px 0 6px 6px;height:26px;border:none;background:url('/images/template/input_bg.png') top left no-repeat; padding:6px; font-size:16px; font-weight:bold; color:#666}
input.searchbutton {float:left;border:0; width:40px; height:38px; margin:0; padding:0; background: transparent url('/images/template/input_search_bg.png') top left no-repeat}
.postcodeinput {width:158px}

#postcodebox, #Postcodes, #reg_postcodes {position:relative}
#Postcodes p.error, #reg_postcodes p.error {position:absolute; top:40px; left:0px; width:240px; background:url("/images/icons/cross.png") no-repeat 5px 0px; padding-left: 22px;padding-bottom: 2px;font-weight: bold;color: #EA5200;}
#Postcodes input.mag {background:transparent url('/images/template/input_search_bg.png') top left no-repeat; border:none; width:40px; height:38px; text-indent:-999em; overflow:hidden}

/* 'browse' accordion styles */
dl#toyselect {border:1px solid #dedede; padding:5px}
dl#toyselect dt {background-color:#4b001f; color:white; padding:3px; margin:0 0 3px 0; cursor:pointer}
dl#toyselect dd {padding:3px; margin:0}


/* form styles */

#loginbox {display:none; text-decoration:right}
#loginbox div.label, #postcodebox div.label { position: relative; float: left; margin-right: 3px; clear: left}
#loginbox label, #postcodebox label { position: relative; float: left; margin-right: 3px; clear: left; width:120px}
#loginbox label.over,  #postcodebox label.over { color: #aaa; position: absolute; top: 10px; left: 10px}
#loginbox input.text {width:140px}

label.error {background:url("/images/icons/cross.png") no-repeat 5px 0px; padding-left: 22px;padding-bottom: 2px;font-weight: bold;color: #EA5200;}
label.checked {background:url("/images/icons/tick.png") no-repeat 5px 0px}


/*wishlist*/
.rightbox, #wishlist {background-color:#e6ecef; padding-bottom:5px; margin-bottom:10px}
.rightbox h3, #wishlist h3 {background-color:#00aeef; color:white; padding:7px 3px; margin:0}
.rightbox ul {list-style-type:none; margin:0 2% 5px 2%}
.rightbox ul li {padding:0; margin:0; border-bottom:1px solid #d5dbde}
.rightbox ul li a {display:block;width:96%; padding:1px 2%}
.rightbox ul li a:hover {background-color:white}

#wishlist p {margin:10px 5px}
#wishlist ul {list-style:none; margin:5px; padding:0}
#wishlist ul li {position:relative; padding:3px 20px 5px 3px; margin:5px 0 0 0; border-bottom:1px solid #d5dbde}
#wishlist ul li span.threeplus {padding:1px 3px; margin-left:3px; background-color:#d00; color:white; text-align:center; font-weight:bold; -moz-border-radius:5px; -webkit-border-radius:5px}
#wishlist ul li span.oversize {padding:1px 3px; margin-left:3px; background-color:#00aeef; color:white; text-align:center; font-weight:bold; -moz-border-radius:5px; -webkit-border-radius:5px}
#wishlist .deletelink {position:absolute; right:3px; top:5px}

.rightbox h4 {margin:5px 10px; border-bottom:1px solid #d5dbde}
.photoright {float:right; margin:0 1em 1em 1em}



/*#browsetoys ul, #needhelp ul {list-style-type:none; margin:0 2% 5px 2%}
#browsetoys ul li, #needhelp ul li {padding:0; margin:0; border-bottom:1px solid #d5dbde}
#browsetoys ul li a, #needhelp ul li a {display:block;width:96%; padding:1px 2%}
#browsetoys ul li a:hover {background-color:white}*/


.inlist {padding:3px 3px 3px 20px; background:transparent url('/images/icons/tick.png') left no-repeat}

/*add toy button*/
a.confirmlink, a.addlink {display:block; width:170px; padding-left:30px; height:32px; line-height:32px; font-size:12px; font-weight:bold; color:#333; background:url('/images/template/add_toy_bg.png') top left no-repeat; text-decoration:none}
a.confirmlink:hover, a.addlink:hover {background-position:0 -32px; color:#000}
.formbutton {border:none; background:transparent url('/images/template/form_button.png') top left no-repeat; text-align:center; width:150px; height:31px; line-height:31px; cursor:pointer;font-size:12px; font-weight:bold; color:#333;}
.formbutton:hover {background-position:0 -31px}


/*homepage 'kwicks' */
#how_it_works {margin:-1px; border:1px solid #333}
.kwicks {list-style: none;position: relative;margin: 0;padding: 0;height:230px}
.kwicks li {float:left; width:80px; height: 230px; display: block; overflow: hidden; padding:0; cursor:pointer; margin: 0px}
#kwick_1 p em, #kwick_2 p em, #kwick_3 p em, #kwick_4 p em, #tenreasons p em {font-style: normal; font-size:18px; margin-bottom:7px}
#kwick_1 p, #kwick_2 p, #kwick_3 p, #kwick_4 p, #tenreasons p {font-size:16px; font-weight:bold; color: #003b5c; line-height:1.2}
#kwick_1 {background: #d58a24 url('/images/template/kwicks/step1.jpg') top left no-repeat}
#kwick_2 {background: #00aeef url('/images/template/kwicks/step2.jpg') top left no-repeat}
#kwick_3 {background: #bd1a70 url('/images/template/kwicks/step3.jpg') top left no-repeat}
#kwick_4 {background: #003b5c url('/images/template/kwicks/step4.jpg') top left no-repeat}
#kwick_2 p, #kwick_3 p {position:absolute; top:26px; left:100px; width:160px;}
#kwick_1 p {position:absolute; top:180px; left:100px; width:260px;}
#kwick_4 p {position:absolute; top:100px; left:100px; width:160px;}
#kwick_1 p, #kwick_2 p, #kwick_3 p, #kwick_4 p {color:white}
#kwick_4 a {display:block;background-color:#bd1a70; color:white; padding:5px; margin:15px 0 0 -5px; -moz-border-radius:3px; -webkit-border-radius:3px}
#kwick_4 a:hover {background-color:white; color:#bd1a70}
/*kwick/ten reasons common copy styles */


/*ten reasons panel */
/*#reason-1 {background:url('/images/template/reasons/reason1.jpg') -10px -30px no-repeat}
#reason-2 {background:url('/images/template/reasons/reason2.jpg') -20px -20px no-repeat }
#reason-3 {background-color:#33cc44}
#reason-2 p { color:#ffdfdf}
#reason-3 p { color:#deffde}
#reason-5 p { color:#cc0033} */
#tenreasons {position:relative; height:140px}
#tenreasons em {color:#bd1a70}
#tenreasons div.text {position:relative; margin:15px 0 0 40px; width:360px}

#tenreasons_banner {position:relative;width:468px; height:60px}
#tenreasons_banner em {color:#bd1a70}
#tenreasons_banner div.text {position:relative; margin:5px; width:450px}

/* toy page */
a.thumb {border:1px solid #dedede; margin:2px 2px 2px 0; width:99px; height:99px; display:block; float:left}
a.thumb:hover {border-color:#ccc}


/* ethical icons */
ul.ethics {float:left;width:100%;clear:both;list-style:none;padding:0; margin:0 0 10px 0}
ul.ethics li {float:left; padding:3px; margin:4px 4px 0 0}
ul.ethics li img {float:left; display:inline}


/* faqs accordion */
dl#faqs dt {color:#bd1a70; font-size:1.3em; line-height:1.1em; margin-bottom:.25em; padding:5px 2px; cursor:pointer}
dl#faqs dt.selected {background-color:#bd1a70; color:white}
dl#faqs dd {margin:0 0 1em 0; padding:2px}

/* tooltips */
#tooltip {position: absolute; z-index: 3000; border: 1px solid #003B5C; background-color: #e6ecef; padding: 5px; -moz-border-radius:5px; -webkit-border-radius: 5px;}
#tooltip h3, #tooltip div { margin: 0}
#tooltip h3 {font-size:1.2em}
#tooltip div {font-size:1em}

/* blog */
.blogdate {border-bottom:1px solid #000; padding:5px; color:#666; margin-bottom:10px}
.bloghead {border-bottom:1px solid #000;font-size:1.3em; font-weight:bold; padding:2px 0 2px 10px; margin:0 0 10px -10px}

#playtips,#batteries {display:none}
img.package {float:left; margin:0 10px 10px 0}
a.mgrtbutton, a.activate {display:block;width:210px; padding:5px 15px 9px 25px; margin:10px auto; color:#444; font-size:12px; font-weight:bold; text-align:center}
a.mgrtbutton {background:url('/images/template/button_bg.png') top left no-repeat}
a.activate {background:url('/images/template/activate_button.png') top left no-repeat}
a.mgrtbutton:hover, a.activate:hover {background-position:0 -32px; color:white}

/* undo stuff which breaks the lovely worldpay crap */
div.worldpay {margin-top:.5em;padding-top:.5em;border-top:2px solid #e6ecef}
div.worldpay table {width:auto; margin-left:auto; margin-right:auto}
div.worldpay td {padding:2px; margin:0px; text-align:center}

/* more evil phil stuff */
div#voucher_entry { margin-top: 8px; margin-bottom: 20px }
div#voucher { padding: 0px 8px 8px 40px; min-height: 40px; height: auto !important; height: 40px }
div#voucher.ok { background: url('/images/template/voucher_ok.png') top left no-repeat; colour: #060 }
div#voucher.error { background: url('/images/template/voucher_error.png') top left no-repeat; color:#f00; font-weight: bold }

/* mainly box selection form */
table.lined { border: 1px solid #C3D9FF; border-bottom: none }
table.lined td { border-bottom: 1px solid #C3D9FF }
table.lowheads th { vertical-align: bottom }
table.bigstrong strong { font-size: 1.5em }

/* oversize toys */
div.toypic { position:relative; float:left }
span.oversizestamp { position:absolute; width:80px; height:50px; text-indent:-5000px; background: url(/images/template/oversize.png) transparent no-repeat; background-attachment:scroll; z-index:10; left:auto; bottom:auto; top:30px; right:0px; background-position:0px 0px }
span.countsas2 { background-position:0px -50px }
span.countsas3 { background-position:0px -100px }
span.countsas4 { background-position:0px -150px }