h1, h2, h3 {text-shadow: none !important;} #DSG_wrapper {max-width: 1240px; height: auto; margin:0 auto 0 auto; padding:0; overflow: hidden;} #DSG_wrapper img { max-width: 100%; } #DSG_wrapper h1 {color: #52445d; font-size: 1.6em;} #DSG_wrapper h2 { background: url("https://currys-ssl.cdn.dixons.com/css/themes/cooking_recipes/img/purple-stitch-header.png") no-repeat scroll left center transparent; color: #FFFFFF; font-size: 1.4em; font-weight: 400; height: 65px; padding: 20px 0 0 40px; width: 100%; margin: 0 0 0 -14px;} #DSG_wrapper h3 { background: url("https://currys-ssl.cdn.dixons.com/css/themes/cooking_recipes/img/cream-stitch-header.png") no-repeat scroll left center transparent; color: #52445d; font-size: 1.4em; font-weight: 400; height: 65px; padding: 20px 0 0 40px; width: 100%; margin: 0 0 0 -14px;} #DSG_wrapper p {color: #524f49; font-size: 1.1em; font-weight: 400; line-height: 1.2em; } #DSG_wrapper header#top-image {width: 100%;} #DSG_wrapper #cooking-icons-strip {width:100%; background: url('https://currys-ssl.cdn.dixons.com/css/themes/cooking_recipes/img/cooking-icons-strip.png') no-repeat left top; height: 69px; margin: 15px 0 0; } #DSG_wrapper #top-container {width: 98%; height: auto; margin:0 0 0 15px; padding: 25px 25px 0; background: #e5e1d6 url('img/texture-bg.jpg') repeat; float: left; } /*Middle section*/ #DSG_wrapper .title-container-purple {width: 98%; height: auto; margin:0 0 0 15px; background: #e5e1d6 url('img/texture-bg.jpg') repeat; float: left; padding-right: 1px;} #DSG_wrapper nav#device-type {width: 98%; height: auto; margin:0 0 20px 15px; background: #e5e1d6 url('img/texture-bg.jpg') repeat; float: left; padding-right: 1px;} #DSG_wrapper nav#device-type ul {margin:0 0 0 50px;} #DSG_wrapper nav#device-type a {width: 100%; padding: 0;} #DSG_wrapper nav#device-type li {background-color: rgba(255,255,255,0.5); width:22%; float: left; margin: 0 30px 20px 0 ;} #DSG_wrapper nav#device-type li .bottom-box {background: rgb(45,36,53); /* Old browsers */ background: -moz-linear-gradient(left, rgba(45,36,53,1) 0%, rgba(82,68,93,1) 34%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(45,36,53,1)), color-stop(34%,rgba(82,68,93,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(45,36,53,1) 0%,rgba(82,68,93,1) 34%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(45,36,53,1) 0%,rgba(82,68,93,1) 34%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(45,36,53,1) 0%,rgba(82,68,93,1) 34%); /* IE10+ */ background: linear-gradient(to right, rgba(45,36,53,1) 0%,rgba(82,68,93,1) 34%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d2435', endColorstr='#52445d',GradientType=1 ); /* IE6-9 */ float: left; width: 100%;} #DSG_wrapper nav#device-type li p {border: 1px dashed #968a9f; margin: 5px; padding: 10px; color: #ffffff; font-size: 1.5em; font-weight: 400;} /*Bottom section*/ #DSG_wrapper .title-container-cream {width: 98%; height: auto; margin:0 0 0 15px; background-color: #F4F3EF; float: left; } #DSG_wrapper nav#extra-features {width: 98%; height: auto; margin:0 0 20px 15px; background: #F4F3EF; float: left;} #DSG_wrapper nav#extra-features ul {margin:0 0 0 50px;} #DSG_wrapper nav#extra-features a {width: 100%; padding: 0;} #DSG_wrapper nav#extra-features li {background-color: rgba(255,255,255,0.5); width:14%; float: left; margin: 0 30px 20px 0 ;} #DSG_wrapper nav#extra-features li .bottom-box {background-color:#fae492; float: left; width: 100%; } #DSG_wrapper nav#extra-features li p {border: 1px dashed #968a9f; margin: 5px; padding: 10px; color: #52445d; font-size: 1.1em; font-weight: bold; height:55px; } /*Desktop*/ @media only screen and (min-width: 0px) and (max-width: 1240px){ #DSG_wrapper nav#device-type {width:99%;} #DSG_wrapper nav#device-type li {width: 21%;} #DSG_wrapper .title-container-purple {width: 99%;} #DSG_wrapper .title-container-cream {width: 99%;} #DSG_wrapper nav#extra-features {width:99%;} #DSG_wrapper nav#extra-features li {width: 13%;} #DSG_wrapper nav#extra-features li p { font-size: 0.95em; font-weight: bold; height: 45px;} } /*Tablet with left nav*/ @media only screen and (min-width: 0px) and (max-width: 997px){ #DSG_wrapper h1 {font-size: 1.4em;} #DSG_wrapper p { font-size: 1em; line-height: 1.2em;} #DSG_wrapper nav#device-type ul {margin-left: 20px;} #DSG_wrapper nav#device-type li {width: 43%;} #DSG_wrapper nav#extra-features ul {margin-left: 20px;} #DSG_wrapper nav#extra-features li {width: 26%;} #DSG_wrapper nav#extra-features li p { font-size: 0.95em; font-weight: bold; height: 37px;} } /*Large mobile*/ @media only screen and (min-width: 0px) and (max-width: 766px){ #DSG_wrapper h2 {font-size: 1.2em; font-weight: bold; } #DSG_wrapper h3 {font-size: 1.2em; font-weight: bold; } #DSG_wrapper nav#device-type li {width: 42%;} #DSG_wrapper nav#extra-features li {width: 40%;} } /*Mobile*/ @media only screen and (min-width: 0px) and (max-width: 479px){ #DSG_wrapper h2 {background: none; color: #52445d; font-size: 1.4em; font-weight: bold; width: 80%;} #DSG_wrapper h3 {background: none; color: #52445d; font-size: 1.4em; font-weight: bold; width: 80%;} #DSG_wrapper nav#device-type li {width: 90%;} #DSG_wrapper nav#extra-features li {width: 90%;} } /* Bake Off */ #DSG_wrapper #respcolumns .Bake_off { background-color:#f5e0c9;margin-top:20px;} #DSG_wrapper .Bake_off article{padding:10px 20px 20px 20px} #DSG_wrapper #respcolumns .grid_3 p{padding:5px;font-family:helvetica,arial,sans-serif;font-size:13px} #DSG_wrapper #respcolumns .grid_3 {margin-top:20px;background:#fff;padding:5px;text-align:center} #DSG_wrapper .Bake_off a{font-family:helvetica, arial, sans-serif; font-size: 15px;text-decoration: none;color: #00B3B0;font-weight: bold;line-height: 120%; -webkit-transition: all ease-out 400ms; -moz-transition: all ease-out 400ms; -o-transition: all ease-out 400ms; transition: all ease-out 400ms;} #DSG_wrapper .Bake_off a:hover { padding-left: 5px;text-decoration: none;color: #000;} #DSG_wrapper .Bake_off img{text-align:center} #DSG_wrapper .Bake_off li{list-style-type:none;} #DSG_wrapper *{ box-sizing:border-box; -moz-box-sizing:border-box;} #DSG_wrapper .wrapper{ width: 92%; margin: 0 auto;} .greenelement{ background:#5ec79e; color:#fff;} .violetelement{ background:#e5e1d6; color:#fff;} #DSG_wrapper .clearfix:before, .clearfix:after { content: ""; display: table; } #DSG_wrapper .clearfix:after { clear: both; } #DSG_wrapper .clearfix { zoom: 1; } #DSG_wrapper .Bake_off li .bottom-box {background: rgb(45,36,53); /* Old browsers */ background: -moz-linear-gradient(left, rgba(45,36,53,1) 0%, rgba(82,68,93,1) 34%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(45,36,53,1)), color-stop(34%,rgba(82,68,93,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(45,36,53,1) 0%,rgba(82,68,93,1) 34%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(45,36,53,1) 0%,rgba(82,68,93,1) 34%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(45,36,53,1) 0%,rgba(82,68,93,1) 34%); /* IE10+ */ background: linear-gradient(to right, rgba(45,36,53,1) 0%,rgba(82,68,93,1) 34%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d2435', endColorstr='#52445d',GradientType=1 ); /* IE6-9 */ float: left; width: 100%;} #DSG_wrapper .Bake_off li p {border: 1px dashed #968a9f; margin: 5px; padding: 10px; color: #ffffff; font-size: 1em; font-weight: 400;font-family:helvetica, arial, sans-serif;} /**************************************** ***************************************** MEDIAQUERIES ***************************************** ****************************************/ @media only screen and (min-width: 800px) { #DSG_wrapper .wrapper{ max-width: 1200px; margin: .75em auto;} #DSG_wrapper #content { float:left; width:65%;} #DSG_wrapper #content.wide-content{ float:none; width:100%;} #DSG_wrapper .grid_1 { width: 5%; } #DSG_wrapper .grid_2 { width: 13.333333333333%; } #DSG_wrapper .grid_3 { width: 21.666666666667%; height:380px } #DSG_wrapper .grid_4 { width: 30%; } #DSG_wrapper .grid_5 { width: 38.333333333333%; } #DSG_wrapper .grid_6 { width: 46.666666666667%; } #DSG_wrapper .grid_7 { width: 55%; } #DSG_wrapper .grid_8 { width: 63.333333333333%; } #DSG_wrapper .grid_9 { width: 71.666666666667%; } #DSG_wrapper .grid_10 { width: 80%; } #DSG_wrapper .grid_11 { width: 88.333333333333%; } #DSG_wrapper .Bake_off { width: 96.666666666667%; } #DSG_wrapper .grid_1, #DSG_wrapper .grid_2, #DSG_wrapper .grid_3, #DSG_wrapper .grid_4, #DSG_wrapper .grid_5, #DSG_wrapper .grid_6, #DSG_wrapper .grid_7, #DSG_wrapper .grid_8, #DSG_wrapper .grid_9, #DSG_wrapper .grid_10, #DSG_wrapper .grid_11, #DSG_wrapper .Bake_off { margin-left: 1.6666666666667%; margin-right: 1.6666666666667%; float: left; margin-bottom:0px; }