/*---------------------------------------------------- SCREEN.CSS SITE: www.allkids.co.uk CREATED: Tue 27.04.10 @ 16:05 AUTHOR: Kean Richmond ----------------------------------------------------*/ @import url("reset.css"); /*--- 00. Common Elements ---------------------------------------------------------------------------*/ body {background:url(/img/_bkg.jpg) top center repeat-x #75BF50; color:#666666; font-family:Arial, Helvetica, sans-serif; font-size:62.5%;} a {color:#60AED7;} a:hover {color:#D14B45; text-decoration:none;} /*--- 01. Headings ---------------------------------------------------------------------------*/ h1 { color:#63B5DF; font-family:"Arial Rounded MT Bold", Arial, Helvetica, sans-serif; font-size:3.0em; margin:15px 0 11px 0; } h2 { color:#63B5DF; font-family:"Arial Rounded MT Bold", Arial, Helvetica, sans-serif; font-size:3em; margin:15px 0 11px 0; display: inline; } h3 { color:#56829E; font-family:"Arial Rounded MT Bold", Arial, Helvetica, sans-serif; font-size:1.8em; margin:15px 0 11px 0; } /*--- 02. Main Layout Elements ---------------------------------------------------------------------------*/ #main_container {margin:0 auto; position:relative; width:980px;} #content_container {margin-top:151px; padding-top:0; position:relative; -moz-border-radius:0 0 25px 25px; -webkit-border-top-left-radius:0px; -webkit-border-top-right-radius:0px; border-radius:0 0 25px 25px;} #index #content_container {margin-top:501px; position:relative;} #content_container_inner {padding:0 10px 80px 10px; -moz-border-radius:0 0 15px 15px!important; -webkit-border-top-left-radius:0px!important; -webkit-border-top-right-radius:0px!important; border-radius:0 0 15px 15px!important;} /*--- 03. Header ---------------------------------------------------------------------------*/ #header {left:0; position:absolute; top:-151px; width:980px;} #index #header {top:-501px;} #logo {display:block; float:left; margin:13px 0 0 20px;} #hdr_nav {float:right;} #hdr_nav li {float:left; margin:16px 20px 17px 0;} #hdr_nav a {background:url(/img/_nav_header.png) no-repeat; display:block; height:68px; text-indent:-9999px; width:160px;} #hdr_nav #nav_parentcentre a:hover {background-position:0 -68px;} #hdr_nav #nav_parenting a {background-position:-160px 0;} #hdr_nav #nav_parenting a:hover {background-position:-160px -68px;} #hdr_nav #nav_kids a {background-position:-320px 0;} #hdr_nav #nav_kids a:hover {background-position:-320px -68px;} #search {background:#EAF7FE; background:rgba(255,255,255,0.5); clear:both; height:100%; overflow:hidden; padding:10px 20px; -moz-border-radius:25px 25px 0 0; -webkit-border-top-left-radius:25px; -webkit-border-top-right-radius:25px; border-radius:25px 25px 0 0;} #search form {float:right;} #search label {display:none;} #search input {float:left;} #search input[type='text'] {background:url(/img/_spyglass.png) 9px 9px no-repeat #FFFFFF; font-size:11px; margin:-1px 20px -1px 0; padding-left:28px; width:364px;} /*--- 04. Banner ---------------------------------------------------------------------------*/ #banner_container {clear:both; margin:-1px 0 11px 0; position:relative; top:1px;} #banner_container .section_inner {height:100%; padding:10px; overflow:hidden;} #banner {float:left; height:300px; position:relative; width:700px;} #banner a {display:block; height:300px; position:relative; text-indent:-9999px; width:700px; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px;} #banner_001 {background:url(/img/_banner_001.jpg) no-repeat;} #banner_002 {background:url(/img/_banner_002.jpg) no-repeat;} #banner_003 {background:url(/img/_banner_003.jpg) no-repeat;} #banner_004 {background:url(/img/_banner_004.jpg) no-repeat;} #banner_005 {background:url(/img/_banner_005.jpg) no-repeat;} #promo {background:url(/img/_banner_topright_childrensbedrooms.jpg) no-repeat; display:block; float:right; height:100px; margin:0 0 20px 0; text-indent:-9999px; width:220px;} /*#promo:hover {background-position:0 -100px;}*/ #dealoftheweek {display:block; float:right; height:180px; position:relative; text-decoration:none; width:220px;} #dealoftheweek span {background:url(/img/_overlay.png) no-repeat; display:block; left:0; height:180px; position:absolute; top:0; width:220px;} /*--- 06. Common Content Elements ---------------------------------------------------------------------------*/ .section_outer {background:#EAF7FE; background:rgba(255,255,255,0.5); padding:10px; -moz-border-radius:25px; -webkit-border-radius:25px; border-radius:25px;} .section_inner {background:#FFFFFF; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px;} #content {float:right; padding:43px 0 0 0; position:relative; width:700px;} #index #content {padding:0;} #text-region {float:left; width:460px;} #text-region p {font-size:1.2em; line-height:1.5em; padding:9px 0;} #text-region ul, #text-region ol {margin:10px 40px;} #text-region ul {list-style:disc;} #text-region ol {list-style:decimal;} #text-region li {font-size:1.2em; line-height:1.5em; padding:5px 0;} #breadcrumb {background:url(/img/_divide_dotted.gif) bottom left repeat-x; color:#999999; height:18px; left:0; font-size:1.1em; padding:13px 0; position:absolute; top:0; width:100%;} #breadcrumb a {text-decoration:none;} /*--- 07. Left Column ---------------------------------------------------------------------------*/ #left-column {float:left; width:220px;} #left-column h6 {background:url(/img/_heading_tag_treatyourkids.png) no-repeat; height:71px; margin:1px 0 0 -20px; text-indent:-9999px; width:242px;} #nav {margin:9px 0 0 0; width:160px;} #nav li {border-bottom:1px dotted #CCCCCC; position:relative;} #nav a {color:#666666; display:block; font-size:1.2em; font-weight:bold; line-height:1.1em; padding:8px 0; text-decoration:none;} #nav a:hover {color:#60AED7;} /*#nav ul {background:#E9F7FD; display:none; left:170px; margin:0 0 20px 0; padding:10px; position:absolute; top:0; width:150px; -moz-border-radius:10px; border-radius:10px;} #nav ul li {border:0; border-top:1px dotted #CEE3EC;} #nav ul a {color:#999999; font-size:1.1em; padding-left:10px;} #nav ul ul {margin:0;} #nav ul ul a {font-weight:normal; padding-left:10px;}*/ #nav ul {} #nav ul li {border:0; border-top:1px dotted #CCCCCC;} #nav ul a { color:#999999; font-size:1.1em; padding-left:10px; } #nav ul ul {margin:0;} #nav ul ul a {font-weight:normal; padding-left:10px;} #nav .no-border {border:0;} #nav .no-border li {border:0; border-bottom:1px dotted #CCCCCC;} #nav a.kids-activities {background:#FCEC95; color:#B4A243; margin:10px 0 0 0; padding:8px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; text-shadow:1px 1px 1px #FFFFFF;} #nav a.kids-activities:hover {background:#E1D072; color:#FFFFFF; text-shadow:1px 1px 1px rgba(0,0,0,0.5);} #nav a.parenting {background:#FFE5AD; color:#BC9C56; margin:10px 0 0 0; padding:8px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; text-shadow:1px 1px 1px #FFFFFF;} #nav a.parenting:hover {background:#E2C381; color:#FFFFFF; text-shadow:1px 1px 1px rgba(0,0,0,0.5);} #left-column #promo {float:none; margin:30px 0 0 0;} /*--- 08. Right Column ---------------------------------------------------------------------------*/ #right-column {background:url(/img/_divide_dotted.gif) repeat-y; float:right; margin:10px 0 0 0; padding:0 0 20px 10px; text-align:center; width:210px;} #index #right-column {text-align:left;} #right-column h3 { background:url(/img/_rule_short.png) bottom center no-repeat; color:#006699; margin:6px 0 15px; padding-bottom:14px; text-align:center; font-size: 14px; font-weight: bold; } #right-column h4 { color:#FF6666; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; float: none; text-align: center; } #specials {margin:0 auto 40px auto; width:197px;} #specials li {background:url(/img/_specials_bkg.png) no-repeat; font-size:1.8em; font-weight:bold; height:100%; overflow:hidden; padding:5px; text-align:center;} #specials li.alt {background-position:0 -75px;} #specials a {color:#66889E; text-decoration:none;} #specials a:hover {color:#D14B45;} #specials li span {display:block; margin:20px 0 0 0;} #specials li img {float:left; height:65px; margin:0 5px 0 0; width:65px;} #specials li.alt img {float:right; margin:0 0 0 5px;} #weekly-offers {margin:4px 0 0 10px; width:197px;} #weekly-offers li {border-bottom:1px dotted #CCCCCC; font-size:1.1em; padding:8px 0;} #weekly-offers a {color:#66889E; display:block; font-weight:bold; font-size:1.1em; text-decoration:none;} #weekly-offers a:hover {color:#D14B45;} /*--- 09. Index Page ---------------------------------------------------------------------------*/ #index h1 {background:url(/img/_heading_welcometoallkids.png) no-repeat; font-size:3.0em; height:35px; margin:23px 0 18px 0; text-indent:-9999px;} #news, #stuff_to_do {clear:both; padding:6px 0 0 0;} #stuff_to_do h2 { color:#D14B45; font-size: 2.5em; display: inline; line-height: 20px; } #stuff_to_do h6 { font-size: 1.5em; font-weight: bold; color: #63B5DF; } #news h2 a {color:#D14B45; font-weight:normal;} #news ul, #stuff_to_do ul {list-style:none; margin:0;} #news li, #stuff_to_do li {float:left; font-size:1em; margin:3px 0 0 0; width:220px;} #stuff_to_do li {float:none; margin:0 0 5px 0; width:100%;} #news li:first-child {margin-right:20px;} #news p, #stuff_to_do p {clear:left; font-size:1.1em; line-height:1.2em; padding:7px 0 6px;} #news a {color:#E77570; font-weight:bold; text-decoration:none;} #news a:hover {color:#60AED7;} #news h6 {font-size:1.4em; margin:3px 0 0 0;} .news-date {background:#E77570; color:#FFFFFF; float:left; font-size:1.2em!important; font-weight:bold; height:30px; line-height:1.25em!important; margin:0 10px 10px 0; padding:5px 0!important; text-align:center; text-transform:uppercase; width:40px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;} .news-date span {display:block; font-size:1.4em;} /*--- 10. Centre Column ---------------------------------------------------------------------------*/ #centre-column {float:left; font-size:1.2em; width:460px;} #content .wide-column {width:auto;} #centre-column h1 { font-size:2em; font-weight: bold; line-height: 20px; } #centre-column h2 { color:#D14B45; font-size:1.6em; line-height: 20px; display: inline; } #centre-column p {padding:9px 0;} #centre-column ul {margin:20px 0;} #centre-column li {background:url(/img/_bullet_star.png) 0 5px no-repeat; padding:9px 0 9px 30px;} #centre-column li p {padding:0;} .category-list li, .products li {background:url(/img/_divide_dotted.gif) bottom left repeat-x!important; height:100%; overflow:hidden; padding:10px 0 14px 0!important;} .category-list a {display:block; font-size:1.2em; font-weight:bold; margin:0 0 5px 0; text-decoration:none;} .category-list img, .products img {float:right; margin:0 0 6px 20px;} .category-list h3, .products h3 {margin-top:0;} .category-list .catsnippet a {display:inline; font-size:1em; font-weight:normal; margin:0; text-decoration:underline;} .products {margin:0px 0 40px 0!important;} .products li {padding:10px 0 20px 0!important;} .products h3 { font-family:Arial, Helvetica, sans-serif; font-size:1.2em; font-weight:bold; color: #FOFOFO; } .products h3 a {text-decoration:none;} .products .link_variable {margin:10px 0 0 0;} #news-archive h1 {color:#D14B45;} #news-archive #centre-column ul {list-style:none; margin:0;} #news-archive #centre-column li {background:0; float:left; font-size:0.85em; height:200px; margin:3px 10px 0 0; padding:0; width:220px;} #news-archive #centre-column p {clear:left; font-size:1.1em; line-height:1.2em; padding:7px 0 6px;} #news-archive #centre-column a {color:#E77570; font-weight:bold; text-decoration:none;} #news-archive #centre-column a:hover {color:#60AED7;} #news-archive #centre-column h6 {font-size:1.4em; margin:3px 0 0 0;} #news-article-date {color:#999999; font-size:0.9em!important; font-weight:bold; padding:0!important;} #snippet {background:url(/img/_divide_dotted.gif) bottom left repeat-x!important; font-weight:bold; margin:20px 0; padding:10px 0;} .special_text {color:#D14B45; font-weight:bold;} /*--- 49. Links & Buttons ---------------------------------------------------------------------------*/ .link_variable { background:#FFCC00; color:#333333; display:block; float:left; font-size:1em; font-weight:bold; padding:3px; text-decoration:none; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; border: thin solid #666666; } .link_variable:hover { background:#FF9933; color:#006699; } /*--- 50. Footer ---------------------------------------------------------------------------*/ #footer {height:100%; overflow:hidden; padding:0 0 40px 0;} #footer-nav {float:left; margin:0 0 0 21px;} #footer-nav li {float:left; margin:0 8px 0 0;} #footer-nav a {background:url(/img/_footernav.png) no-repeat; display:block; height:75px; text-indent:-9999px; width:37px;} #footer-nav a:hover {background-position:0 -123px;} #footer-nav a#ftrnav-access {background-position:-74px 0; height:123px;} #footer-nav a#ftrnav-access:hover {background-position:-74px -123px;} #footer-nav a#ftrnav-contact {background-position:-111px 0; height:90px;} #footer-nav a#ftrnav-contact:hover {background-position:-111px -123px;} #footer-nav a#ftrnav-privacy {background-position:-148px 0; height:86px;} #footer-nav a#ftrnav-privacy:hover {background-position:-148px -123px;} #footer-nav a#ftrnav-disclaimer {background-position:-185px 0; height:109px;} #footer-nav a#ftrnav-disclaimer:hover {background-position:-185px -123px;} #copyright {color:#FFFFFF; float:right; font-size:1.1em; line-height:1.4em; margin:17px 21px 0 0; text-align:right;} #copyright a {color:#FFFFFF; text-decoration:none;} #copyright a:hover {color:#792483;} /*--- 51. Form Elements ---------------------------------------------------------------------------*/ label {color:#8AAABF; float:left; font-weight:bold; margin:10px 0 0 0; width:100px;} input[type='text'] {border:1px solid #D8E8EF; color:#666666; font-family:Arial, Helvetica, sans-serif; font-size:12px; padding:8px; width:250px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;} input[type='text']:focus {border-color:#60AED7;} input[type='submit'] {background:#D14B45; border:0; color:#FFFFFF; cursor:pointer; font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; height:30px; width:100px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;} input[type='submit']:hover {background:#60AED7;} .form-align {margin-left:100px;} #p_security {clear:both; display:none; height:0px; visibility:hidden;} #p_security label {float:none; padding:0 0 4px 0; text-align:left; width:auto;} #p_security .input_box {display:block; float:none;} /*--- 52. Response Elements ---------------------------------------------------------------------------*/ #msg_response {background:url(/img/response_bkg.jpg) #FFFFFF repeat-x; border:1px solid #CCCCCC; clear:both; cursor:pointer; font-family:Arial, Helvetica, sans-serif; font-size:11px!important; font-weight:bold; line-height:1.3em; margin:20px 0; padding:1px; position:relative; zoom:1; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;} #msg_response a {color:#333333;} #msg_response a:hover {text-decoration:none;} #msg_response span {background:url(/img/response_close.gif) no-repeat; height:11px; position:absolute; right:10px; top:8px; width:10px;} #msg_response div {padding:6px 46px; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;} .msg_error {background:url(/img/response_error.jpg) left center no-repeat; color:#B7220A;} .msg_success {background:url(/img/response_success.jpg) left center no-repeat; color:#0F8915;} /*--- 53. Skip Link ---------------------------------------------------------------------------*/ #skip_link {float:left; margin:0 0 0 -9999px; text-decoration:none;} #skip_link:focus {background:#333333; border-bottom:1px solid #FFFFFF; border-right:1px solid #FFFFFF; color:#FFFFFF; font-size:11px; margin:0; padding:3px 7px 3px 5px; position:relative; z-index:1000;} /*--- 54. Clearfix Elements ---------------------------------------------------------------------------*/ .clearfix:after {clear:both; content:"."; display:block; height:0; line-height:0; visibility:hidden;} .clearfix {display:inline-block;} html[xmlns] .clearfix {display:block;} * html .clearfix {height:1%;} #paging {clear:both; float:left; left:50%; margin:40px 0; position:relative;} #paging li {background:none!important; float:left; margin:0 2px; padding:0!important; position:relative; right:50%;} #paging li a, #paging li span {background:#F3F3F3; display:block; padding:5px 7px; text-decoration:none; -moz-border-radius:3px; border-radius:3px;} #paging li span {color:#999999;} #paging li.page span {background:#60AED7; color:#FFFFFF;} /*--- 100. Filter ---------------------------------------------------------------------------*/ #adv-filter {float:right; margin:10px 0 0 0; padding:0 0 20px 0; width:220px;} #productfilter fieldset {position:relative;} #productfilter h4 {background:#63B5DF; color:#FFFFFF; font-family:"Arial Rounded MT Bold", Arial, Helvetica, sans-serif; font-size:1.8em; padding:10px 10px 9px 10px;} #productfilter ul {background:#E9F7FD; padding:9px 0 10px 0;} #productfilter li {height:100%; overflow:hidden; padding:5px 51px 4px 18px; position:relative;} #productfilter input[type='checkbox'] {cursor:pointer; float:left; margin:1px 5px 0 0;} #productfilter label {color:#999999; cursor:pointer; float:left; font-size:1.2em; margin:0;} #productfilter label span {color:#CCCCCC; font-weight:normal; position:absolute; right:18px;} #productfilter input[type='submit'] {margin-top:20px;} #productfilter li.hide, #productfilter li.view-all {background:#FFFFFF; color:#63B5DF; cursor:pointer; height:auto; overflow:auto; padding:3px 4px; position:absolute; right:10px; top:11px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;} #productfilter li.hide:hover, #productfilter li.view-all:hover {opacity:0.7;} #clear-all {float:left; font-size:1.1em; margin:10px 0 0 0;} #product-filter-selected {margin-bottom:9px;} #productfilter #product-filter-selected h4 {background:none; color:#63B5DF; padding:0 0 2px 0;} #product-filter-selected span {background:url(/img/clear-close.png) right 4px no-repeat #B7DAF1; background:url(/img/clear-close.png) right 4px no-repeat, -ms-linear-gradient(bottom, rgb(200,227,244) 0%, rgb(183,218,241) 50%, rgb(200,227,244) 100%); background:url(/img/clear-close.png) right 4px no-repeat, -moz-linear-gradient(bottom, rgb(200,227,244) 0%, rgb(183,218,241) 50%, rgb(200,227,244) 100%); background:url(/img/clear-close.png) right 4px no-repeat, -o-linear-gradient(bottom, rgb(200,227,244) 0%, rgb(183,218,241) 50%, rgb(200,227,244) 100%); background:url(/img/clear-close.png) right 4px no-repeat, -webkit-linear-gradient(bottom, rgb(200,227,244) 0%, rgb(183,218,241) 50%, rgb(200,227,244) 100%); background:url(/img/clear-close.png) right 4px no-repeat, linear-gradient(bottom, rgb(200,227,244) 0%, rgb(183,218,241) 50%, rgb(200,227,244) 100%); border:1px solid #8AC3E8; color:#5093B8; cursor:pointer; display:block; float:left; font-size:1.1em; margin:0 5px 5px 0; padding:3px 31px 3px 4px; text-shadow:0 1px 0 rgba(255,255,255,0.75); -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.3); -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.3); box-shadow:inset 0 1px 0 rgba(255,255,255,0.3);} #product-filter-selected span:hover {background:url(/img/clear-close.png) right -59px no-repeat #F1B9B7; background:url(/img/clear-close.png) right -59px no-repeat, -ms-linear-gradient(bottom, rgb(244,198,197) 0%, rgb(241,185,183) 50%, rgb(244,198,197) 100%); background:url(/img/clear-close.png) right -59px no-repeat, -moz-linear-gradient(bottom, rgb(244,198,197) 0%, rgb(241,185,183) 50%, rgb(244,198,197) 100%); background:url(/img/clear-close.png) right -59px no-repeat, -o-linear-gradient(bottom, rgb(244,198,197) 0%, rgb(241,185,183) 50%, rgb(244,198,197) 100%);background:url(/img/clear-close.png) right -59px no-repeat, -webkit-linear-gradient(bottom, rgb(244,198,197) 0%, rgb(241,185,183) 50%, rgb(244,198,197) 100%); background:url(/img/clear-close.png) right -59px no-repeat, linear-gradient(bottom, rgb(244,198,197) 0%, rgb(241,185,183) 50%, rgb(244,198,197) 100%); border-color:#E88D8A; color:#B85051;}