/*----------------------------------------------------- Browser Reset -----------------------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } /*----------------------------------------------------- IE6 Browser Upgrade Notice -----------------------------------------------------*/ #upgrade-browser { font-family: "Century Gothic", Helvetica, Arial, sans-serif; color:#000; padding:20px; background: #fff url(../imgs/ie6-warning/grad.png) repeat-x bottom left } #upgrade-browser p { font-size:12px; background:url(../imgs/ie6-warning/warning-icon.png) no-repeat; padding-left:35px; margin:0} #upgrade-browser a { text-decoration:underline; font-weight:bold; color:#000} #upgrade-browser a:hover, #upgrade-browser a:focus { text-decoration:none; color:#000;} /*----------------------------------------------------- Type -----------------------------------------------------*/ h1,h2,h3,h4,h5,h6 { font-family:"Century Gothic", Arial, Helvetica, sans-serif;} h1 {font-size:34px; } h2 {font-size:24px; color:#2a2b2d; margin-bottom:10px} h3 {} h4 {} h5 {} p {} ul {} ol {} li {} blockquote { font-size:16px; padding-bottom:5px } cite { font-size:11px; margin-bottom:20px; display:block; color:#999; font-weight:normal} cite:before { content: "- "; } strong {font-weight:bold;} em {font-style:italic;} abbr, acronym {border-bottom:1px dotted #666;} /*----------------------------------------------------- Forms Elements -----------------------------------------------------*/ input, select, textarea { font: 16px "Century Gothic", Helvetica, Arial, sans-serif; /*border: solid 1px #ccc;*/} label { color:#2A2B2D;} legend {} /*----------------------------------------------------- Global Layout -----------------------------------------------------*/ .clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;} * html .clearfix { zoom: 1; } /* IE6 */ *:first-child+html .clearfix { zoom: 1; } /* IE7 */ .cboth {clear:both;} .hide {display:none} .indent { display:block; overflow:hidden; text-indent:-9999px} .fl { float:left} .fr {float:right} img {display:block} body { font: 12px "Century Gothic", Helvetica, Arial, sans-serif; color:#fff; background:#4d4e53;} #wrapper, #wrapper1 { width:940px; max-width: 100%; margin: 0 auto; background:#fff} #header{ height:122px; background:url(../imgs/head-bg1.jpg) no-repeat; position:relative; z-index:999; font-family: "Century Gothic", Helvetica, Arial, sans-serif;} #header a { color:#9a9b9c;} #header a {text-decoration:none; color:#9a9b9c;} #header a:visited {text-decoration:none; color:#9a9b9c} #header a:hover, #main-nav a:focus {text-decoration:none; color:#fff} #header a:active {text-decoration:none; color:#fff} #header .social, #footer .social {position: absolute; right: 10px; top: 85px;} #header .social li, #footer .social li{display: inline-block; width: 30px; height: 30px;} #header .social a, #footer .social a {width: 30px; height: 30px; display: block;} #header .social li:hover, #footer .social li:hover {opacity: 0.8;} #header .social li.facebook, #footer .social li.facebook {background:url(../imgs/fb.png) no-repeat; text-indent: -99999px; padding-right: 10px;} #header .social li.twitter, #footer .social li.twitter {background:url(../imgs/tw.png) no-repeat; text-indent: -99999px} #footer { clear:both; background:#e1e1de; height:180px; font-family: "Century Gothic", Helvetica, Arial, sans-serif; position:relative; color:#747578} #footer ul, #footer .testimonial { position:absolute; top:30px } #footer ul { left:30px; font-size:11px} #footer li.big { font-size:14px} #footer li.sm { padding-top:42px} #footer li span { font-weight:bold} #footer .testimonial {left:400px; font-size:18px; font-weight:bold; width:auto; padding-right: 30px;} #footer a {color:#747578; text-decoration:none} #footer a:hover { text-decoration:underline} #wp { clear:both; height:110px; font-family: "Century Gothic", Helvetica, Arial, sans-serif; position:relative; color:#747578} #wp .footer-logos { float: left; text-align: left; margin: 10px 0 0 30px; } #wp .footer-logos a.trustpay-logo { display: block; margin-bottom: 10px; text-align: right; } #wp .footer-logos a.trustpay-logo img { display: inline-block; } /*#wp .rbs-logo, #wp .credit-cards { position:absolute;} #wp .rbs-logo {top:5px; left:110px;} #wp .credit-cards {top:62px; left:30px;}*/ #wp .reg-details { width: 60%; float:right; text-align:right; margin: 20px 30px 0 0} #logo, #main-nav, #utility-nav, #login-but { position:absolute; top:20px;} #logo {display:block; overflow:hidden; text-indent:-9999px; background:url(../imgs/header-spr.png) no-repeat 0 0; height:84px; width:70px; left:30px} #main-nav { left:160px } #main-nav li { font-size:16px; font-weight:bold; line-height:20px} #main-nav li.current a { color:#fff} #utility-nav { left:400px; width:320px } #utility-nav li { float:left; width:160px; line-height:15px; font-size:11px} #utility-nav li.current a { color:#fff} #login-but {display:block; overflow:hidden; text-indent:-9999px; background:url(../imgs/header-spr.png) no-repeat 0 -84px; height:40px; width:186px; right:20px} #login-but:hover { background-position: 0 -124px} .section { width:313px; max-width: 33.3333%; float:left; background:#2a2b2d} .section h2 { font-size:18px; margin-bottom:15px} .section li { float:left} .section p { padding:15px 0; min-height:75px; text-align:justify} .section h2 a:hover { text-decoration:none; /*border-bottom: solid 1px #fff*/} .school a {color:#26a9e0} .school a:visited {color:#26a9e0} .school a:hover {color:#fff} .nursery a {color:#e53e86} .nursery a:visited {color:#e53e86} .nursery a:hover {color:#fff} .private a {color:#dec40e} .private a:visited {color:#dec40e} .private a:hover {color:#fff} .school { border-top: solid 3px #26a9e0;} .nursery { border-top: solid 3px #e53e86; background-position: -313px 0} .private { border-top: solid 3px #dec40e; width:314px; background-position: -626px 0} .section .inside { padding:20px; height:176px; position:relative} .school .inside { border-right: solid 1px #404142;} .private .inside { border-left: solid 1px #404142;} .section .inside ul { position:absolute; bottom:20px; left:20px} .section .login { background:url(../imgs/icon-spr.png) no-repeat; padding-left:15px;} .school .login { background-position: 0 1px} .nursery .login { background-position: 0 -22px} .private .login { background-position: 0 -45px} /*.section ul { position:absolute; bottom:20px; left:20px}*/ .section li a { background:url(../imgs/icon-spr.png) no-repeat; padding-left:25px; margin-right:15px; height:18px; line-height:18px; display:block; float:left} .school li a { background-position: 0 -69px} .nursery li a { background-position: 0 -87px} .private li a { background-position: 0 -105px} .ps .section .inside { height:176px} .ff .section .inside{ height:206px} .ps .section {background:#2a2b2d url(../imgs/shoots-sec-bg.jpg) no-repeat 0 0; padding-top:132px;} .ff .section {background:#2a2b2d url(../imgs/shoots-sec-bg.jpg) no-repeat 0 0; padding-top:132px;} .ps .nursery, .ff .nursery { background-position: -313px 0} .ps .private, .ff .private { background-position: -626px 0} .inside:hover { background:#000} #intro { padding:20px 30px;background:#26a9e0} #intro h1 { margin-bottom:5px; color:#fff;} #intro h1 span { font:10px "Century Gothic", Helvetica, Arial, sans-serif; text-transform:uppercase; display:block; font-weight:normal; color:#d4eef9} #intro p { font-size:18px; color:#d4eef9} #intro a { color:#fff} .ps #intro, .ff #intro{ background:#616366} .ps #intro p, .ff #intro p { color:#cacac8} #sub-nav { border-bottom: solid 1px #e1e1de; padding-bottom:19px; width:100%; overflow:hidden;} #sub-nav li {float:left;} #sub-nav li a { float:left; font: 12px "Century Gothic", Helvetica, Arial, sans-serif; margin-right:20px; height:29px; line-height:29px; display: block; color:#9a9b9c} #sub-nav li a:hover { color:#2a2b2d; text-decoration:none} #sub-nav li.current a { background: url(../imgs/snr.png) no-repeat right 0; padding-right: 12px; color:#fff} #sub-nav li.current a span { background: url(../imgs/snl.png) no-repeat left 0; padding-left: 12px; display:block; height:29px} #content{ padding: 20px 30px 50px; color:#666 /*9a9b9c*/} /*#content a:focus {outline: 1px dotted #ccc;}*/ #content p { color: #747578; line-height: 1.29; font-weight: 500; margin-bottom: 15px; } #content ul { margin-bottom:20px; line-height:1.4} .content p { color: #747578; font-weight: 500; margin-bottom: 20px; line-height:1.4; } .withoutcontentID { padding: 30px; } #left-col { width:205px; float:left } #left-col h2 { margin-bottom:10px} #left-col h3 { color:#2a2b2d; margin-bottom:3px; font-size:14px} #left-col p { font-size:12px} #left-col .modules p { font-size:11px} #left-col p.intro { font-size:14px; color:#2a2b2d /*747578*/; font-weight:bold} #right-col { width:580px; float:right; overflow:hidden } /*#right-col h2 { font-size:14px; color:#26a9e0;}*/ #left-colnews { width:580px; float:left } #left-colnews h2 { margin-bottom:10px} #left-colnews h3 { color:#2a2b2d; margin-bottom:3px; font-size:14px} #left-colnews p { font-size:12px} #left-colnews .modules p { font-size:11px} #left-colnews p.intro { font-size:14px; color:#2a2b2d /*747578*/; font-weight:bold} #right-colnews { width:205px; float:right; overflow:hidden } /*----------------------------------------------------- Colourways These are defined by adding class to body tag e.g. -----------------------------------------------------*/ /* Pink #e53e86 */ a.pink { color:#e53e86} .pink #logo {background-position: -70px 0} .pink #login-but { background-position: 0 -164px} .pink #login-but:hover { background-position: 0 -204px} .pink #intro { background:#e53e86} .pink #intro p, .pink #intro h1 span { color:#fad8e7} .pink #sub-nav li.current a, .pink .gallery #sub-nav li.current a{ background-position: right -29px} .pink #sub-nav li.current a span, .pink .gallery #sub-nav li.current a span{ background-position: left -29px} .pink #right-col h2, .pink .shoots #right-col li h2, .pink .process #right-col li h2, .pink .frames #right-col li h2{ color:#e53e86;} .pink a {text-decoration:none; color:#e53e86;} .pink a:visited {text-decoration:none; color:#e53e86} .pink a:hover{text-decoration:underline; color:#e53e86} .pink a:active {text-decoration: underline; color:#e53e86} /* Yellow #dec40e */ a.yellow { color:#dec40e} .yellow #logo {background-position: -140px 0} .yellow #login-but { background-position: 0 -244px} .yellow #login-but:hover { background-position: 0 -284px} .yellow #intro { background:#dec40e} .yellow #intro p, .yellow #intro h1 span { color:#f8f3cf} .yellow #sub-nav li.current a, .yellow .gallery #sub-nav li.current a{ background-position: right -58px} .yellow #sub-nav li.current a span, .yellow .gallery #sub-nav li.current a span{ background-position: left -58px} .yellow #right-col h2, .yellow .shoots #right-col li h2, .yellow .process #right-col li h2, .yellow .frames #right-col li h2{ color:#dec40e;} .yellow a {text-decoration:none; color:#dec40e;} .yellow a:visited {text-decoration:none; color:#dec40e} .yellow a:hover{text-decoration:underline; color:#dec40e} .yellow a:active {text-decoration: underline; color:#dec40e} /*----------------------------------------------------- Home -----------------------------------------------------*/ .home #header { background:url(../imgs/tran-bg.png) repeat} #slides { height:488px; width:940px; max-width: 100%; margin-top:-122px; overflow:hidden} /*----------------------------------------------------- Photographic Shoots Section -----------------------------------------------------*/ /* Shoots Page */ .shoots #right-col ul { border-bottom: solid 1px #e1e1de; margin-bottom:20px; width:100%; overflow:hidden; line-height:normal} .shoots #right-col ul:last-child { border:none; margin-bottom:0} /*.shoots #right-col ul.last { border:none; margin-bottom:0}*/ .shoots #right-col li { float:left; width:280px; margin-right:20px; position:relative} .shoots #right-col li:nth-child(even) { margin-right:0} .shoots #right-col li.last { margin-right:0} .shoots #right-col li h2 { margin:10px 0 5px; font-size:14px; color:#26a9e0;} .shoots #right-col li span { display:block; font-weight:bold; color:#747578;} .shoots .pics { overflow:hidden; width:280px; height:135px} .shoots #right-col li:hover {} a.next { position:absolute; top:10px; right:10px; z-index:100; background: url(../imgs/next-ic.png) no-repeat top left; width:17px; height:17px; display:block; text-indent:-9999px; overflow:hidden} /*a.next:hover { background-position: bottom left}*/ /* Process Page */ .process #right-col li {border-bottom: solid 1px #e1e1de; margin-bottom:20px; padding-bottom:20px; width:100%; overflow:hidden; line-height:normal} .process #right-col li:last-child { border:none; margin-bottom:0} .process #right-col li div { float:left; width:270px} .process #right-col li div p { text-align:justify} .process #right-col li img { float:right} .process #right-col li h2 { margin-bottom:5px; font-size:14px; color:#26a9e0;} /* FAQ's Page */ .faqs #right-col h2 { margin-bottom:20px;} .faqs #right-col h3 { font-size:16px; color:#747578} /* Gallery */ .gallery h1 { font-size:14px; color:#fff; float:right; padding-top:5px} .gallery #sub-nav { border-bottom:none; padding:0; float:left; width:auto} .gallery #content { background:#2a2b2d} .gallery #sub-nav li.current a { background: url(../imgs/snr-dark.png) no-repeat right 0;} .gallery #sub-nav li.current a span { background: url(../imgs/snl-dark.png) no-repeat left 0;} .gallery #sub-nav li a:hover { color:#fff} #flash-gallery { background:#000; height:438px; width:880px; margin-bottom:20px; clear:both} .gal-menu { float:left; margin-right:20px} .gal-menu h2 {margin-bottom:0} .gal-menu h2 a { background:url(../imgs/gal-nav.png) no-repeat; height:29px; width:205px; text-indent:-9999px; overflow:hidden; display:block; margin:0} .gal-menu h2.sgg a { background-position: 0 0;} .gal-menu h2.ng a { background-position: -205px 0;} .gal-menu h2.psg a { background-position: -410px 0;} .gal-menu h2.sgg a:hover, .gal-menu h2.sgg.active a { background-position: 0 -29px;} .gal-menu h2.ng a:hover, .gal-menu h2.ng.active a { background-position: -205px -29px;} .gal-menu h2.psg a:hover, .gal-menu h2.psg.active a { background-position: -410px -29px;} .gallery .gal-menu ul { margin:10px 0 0 0;} .gallery .gal-menu ul li {line-height:20px; text-indent:12px} .gallery .gal-menu ul a { color:#9A9B9C; text-decoration:none } .gallery .gal-menu ul a:hover { color:#fff; text-decoration:none} /*----------------------------------------------------- Frames & Finishes Section -----------------------------------------------------*/ .frames #right-col li {border-bottom: solid 1px #e1e1de; margin-bottom:20px; padding-bottom:20px; width:100%; overflow:hidden; line-height:normal;} .frames #right-col li:last-child { border:none; margin-bottom:0} .frames #right-col li div.copy { float:right; width:280px} .frames #right-col li h2 { margin-bottom:5px; font-size:14px; color:#26a9e0;} .frames #right-col li span { display:block; font-weight:bold; color:#747578} .frames #right-col li div.pics { float:left; width:280px} .frames #right-col li .holder { height:200px; width:280px; margin-bottom:10px; position:relative} .frames #right-col li div.pics .thumb { float:left; border: solid 1px #e1e1de; margin-right:20px;} .frames #right-col li div.pics .thumb:hover {border: solid 1px #ccc;} .frames #right-col li div.pics .thumb:last-child { margin-right:0} .frames #right-col li .enlarge { position:absolute; bottom:10px; right:10px; display:block; height:13px; width:13px; text-indent:-9999px; overflow:hidden; background:url(../imgs/mag-glass.png) no-repeat top left} .frames #right-col li .enlarge:hover { background-position: bottom left} .retouching #right-col { margin-right:-30px} .retouching #right-col img {} /*----------------------------------------------------- Others -----------------------------------------------------*/ .contact #left-col p.intro { font-size:24px} .about-us #content p, .jobs #content p { width:580px; max-width: 100%; font-size:14px} .about-us .sig { margin:30px 0 0 17px} .jobs #content li { list-style:disc inside; font-size:14px;} .sitemap #content .col { width:280px; float:left; margin-left:20px} .sitemap #content .col:first-child { margin-left:0} .sitemap #content li.cat { font-size:16px; color:#747578; font-weight:bold} .sitemap #content li li { font-size:12px; font-weight:normal} .sitemap #content ul { margin-left:20px; list-style: circle outside; padding-top:10px} .sitemap #content ul.top { margin-left:0; list-style: none; padding-top:0} /*.news #content a { font-size:16px}*/ .news-art { border-bottom: solid 1px #E1E1DE; margin-bottom:20px} .news-art img { margin:-20px 0 20px -30px} .news-art h2 { } .subjects {} .subjects th {border-bottom: solid 3px #ccc; padding: 0 0 5px 0; color:#000} .subjects td { border-bottom: solid 1px #e1e1de; padding: 10px 0; vertical-align:middle} .subjects input { border:none} /*----------------------------------------------------- Forms -----------------------------------------------------*/ fieldset label em { color:#F00 } fieldset p { width:100%; overflow:hidden} fieldset p.check { padding-left:140px; width: auto;} fieldset p.check label { width: auto; padding:1px 0 0 0; margin: 0 0 0 10px; text-align:left} fieldset span.note { width:auto; padding: 7px 0 0 140px; clear:both; display:block} fieldset label { width:120px; margin-right:20px; float:left; padding-top:12px; } fieldset input[type="text"], fieldset input[type="password"] { float:left; width:375px; border: solid 1px #ccc; padding:10px; background-color: #fff;} input.text { float:left; width:375px; border: solid 1px #ccc; padding:10px;} fieldset select { float:left; width:100%; max-width: 396px; border: solid 1px #ccc; padding:10px;} .checkoutForm fieldset select { width:99%; } .checkoutForm fieldset { border:0 !important; } .formFieldSet {background-color:#f5f5f5 !important; border:solid 1px #ccc; float:left; width:100%; margin-bottom:20px;} table.subjects tr th, table.subjects tr td { padding: 10px 5px !important;} fieldset textarea { float:left; width:375px; border: solid 1px #ccc; padding:10px; height:200px} fieldset input[type="text"]:focus, input.text:focus, fieldset textarea:focus {border: solid 1px #999;} input.text:focus, fieldset textarea:focus {border: solid 1px #999;} fieldset input[type="radio"] { width:auto; margin:0 10px 0 0; float:left;} input.radio { width:auto; margin:0 10px 0 0; float:left;} fieldset input[type="checkbox"] { width:auto; float:left;} input.checkbox { width:auto; float:left;} /* Send */ .contact input[type="submit"] { width:73px; height:33px; background:url(../imgs/buttons/send.png) no-repeat 0 0; border:none; cursor:pointer; padding:0; margin: 0 0 0 140px} .contact input.submit { width:73px; height:33px; background:url(../imgs/buttons/send.png) no-repeat 0 0; border:none; cursor:pointer; padding:0; margin: 0 0 0 140px} /* Login */ .login input[type="submit"] { width:76px; height:33px; background:url(../imgs/buttons/login.png) no-repeat 0 0; border:none; cursor:pointer; padding:0; margin: 0 0 0 0} .accountLogin input[type="submit"], .forgetAccount input[type="submit"],.g-recaptcha { width: 100%;background-color: #26a9e0;border-radius: 4px;color: white;border: none;cursor: pointer;padding: 8px 12px;margin: 0 0 0 0; text-align: center;} .login /* Submit */ .spec-login input[type="submit"] { width:86px; height:33px; background:url(../imgs/buttons/submit.png) no-repeat 0 0; border:none; cursor:pointer; padding:0; margin: 0 0 0 140px} .spec-login input.submit { width:86px; height:33px; background:url(../imgs/buttons/submit.png) no-repeat 0 0; border:none; cursor:pointer; padding:0; margin: 0 0 0 140px} .consultation input[type="submit"] { width:73px; height:33px; background:url(../imgs/buttons/send.png) no-repeat 0 0; border:none; cursor:pointer; padding:0; margin: 0 0 0 140px} .consultation input.submit { width:73px; height:33px; background:url(../imgs/buttons/send.png) no-repeat 0 0; border:none; cursor:pointer; padding:0; margin: 0 0 0 140px} .yellow .consultation input[type="submit"] { width:73px; height:33px; background:url(../imgs/buttons/send-y.png) no-repeat 0 0; border:none; cursor:pointer; padding:0; margin: 0 0 0 140px} .yellow .consultation input.submit { width:73px; height:33px; background:url(../imgs/buttons/send-y.png) no-repeat 0 0; border:none; cursor:pointer; padding:0; margin: 0 0 0 140px} .pink .consultation input[type="submit"] { width:73px; height:33px; background:url(../imgs/buttons/send-p.png) no-repeat 0 0; border:none; cursor:pointer; padding:0; margin: 0 0 0 140px} .pink .consultation input.submit { width:73px; height:33px; background:url(../imgs/buttons/send-p.png) no-repeat 0 0; border:none; cursor:pointer; padding:0; margin: 0 0 0 140px} .forget input[type="submit"] { width:73px; height:33px; background:url(../imgs/buttons/send.png) no-repeat 0 0; border:none; cursor:pointer; padding:0; margin: 0 0 0 140px} .forget input.submit { width:73px; height:33px; background:url(../imgs/buttons/send.png) no-repeat 0 0; border:none; cursor:pointer; padding:0; margin: 0 0 0 140px} .divForgottenGalleryLogin input[type="button"] { width: 220px; height: 33px; background-color: #26a9e0 !important; border-radius: 3px; color: white; border: none; cursor: pointer; padding: 0; margin: 10px 0 0 0 } .divForgottenGalleryLogin h3 { font-size: 15px; color: #2a2b2d; } a { text-decoration: none; color: #26a9e0; } a:visited {text-decoration:none; color:#26a9e0} a:hover {text-decoration:underline; color:#26a9e0} a:active {text-decoration: underline; color:#26a9e0} /*a:focus {outline: 1px dotted #fff;}*/ .logout-but, .button.logout-but { background-image: url("../imgs/logout.png"); background-repeat: no-repeat; background-size: 10px; background-position: left 12px center; position: absolute; float: right; display: block; right: 10px; margin: 15px 0 0 0; color: #ffffff !important; padding: 6px 15px 6px 30px; } #account-link { font-size:11px; position:absolute; bottom:20px; right:20px} .accountlink { font-size:11px; position:absolute; bottom:20px; right:20px} .loginSelect li { float:left; margin-left:20px} .loginSelect li:first-child { margin-left:0} label.checkbox input[type="checkbox"] {display:none;} label.checkbox span { /*float: right;*/ display:inline-block; border:1px solid #CCC; border-radius:0px; width:30px; height:30px; background:white; vertical-align:middle; margin:5px; position: relative; transition:width 0.1s, height 0.1s, margin 0.1s; } label.checkbox :checked + span { background:white; width:30px; height:30px; margin: 5px; } label.checkbox :checked + span:after { content: '\2714'; font-size: 22px; position: absolute; top: -2px; left: 6px; color: gray; } input[type="submit"]{ border: none; cursor: pointer; padding: 0;} #footer ul:last-child{margin-top: 85px; } .checkbox-text{ width: 542px; } .update-email-button{ background: url('../imgs/buttons/continue.png') no-repeat; width: 105px; height: 35px; } .checkbox{ margin: 20px 5px; } #login-but-mobile{ display: none; position:absolute; top: 85px; left:30px; z-index: 2; } #btnSubmitMobile{ display: none; } #header .return-button { display: none; position: absolute; bottom: 45px; right: 10px; padding: 5px 10px; border-radius: 20px; } fieldset.addaccountform p span { display: block !important; float: left; } fieldset.addaccountform .checkbox-text label.checkbox :checked + span:after { top: -6px; left: 2px; } .half-panel { width: 50%; } .f-none { float: none; } .f-left { float: left; } .f-right { float: right; } .grayBackground { padding: 10px 0 10px 10px; background: #f5f5f5 !important; padding-top: 5px !important; } .generalButton { width: 120px; height: 33px; background-color: #26a9e0; border-radius: 3px; color: white; border: none; cursor: pointer; padding: 0; margin: 0 0 0 0 } #logout.logout-but { margin: 10px 10px 0 0 !important; } .accountLogin #ReactivationLink {padding: 0px 10px 0 10px; width: 20%; background: none; color: #26a9e0; font-size: 14px;} .button { display: inline-block; background-color: #26a9e0; font: 14px "Century Gothic", Helvetica, Arial, sans-serif; color: #ffffff !important; padding: 6px 15px; border-radius: 50px; box-sizing: border-box; cursor: pointer; } .button.md { font-size: 16px; padding: 10px 15px; } .button:hover { text-decoration: none; } .button.bg-blue { background-color: #26a9e0; color: #ffffff !important; } .button.bg-blue:hover { color: #000000 !important; } .my-account-button { float: right; margin: 10px 10px 0 0; color: #ffffff !important; } .home .my-account-button { position: absolute; right: 0; } .mb1 { margin-bottom: 1em; } .mb2 { margin-bottom: 2em; } .mb3 { margin-bottom: 3em; } .mb4 { margin-bottom: 4em; } .mb5 { margin-bottom: 5em; } .accountLogin h3 { margin-bottom: 15px; font-size: 19px; font-weight: 500; line-height: 1.26; letter-spacing: normal; color: #666; } .accountLogin .check-box input[type="checkbox"] { width: 25px; height: 25px; display: inline-block; vertical-align: middle; margin: 0 10px; border: solid 1px #ccc; } .accountLogin fieldset.login-form-block label { width: 210px; padding: 0; font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: normal; color: #747578; } .accountLogin fieldset.login-form-block span { float: left; } .accountLogin input.login-button, .accountLogin input#btnSubmit, .accountLogin input#btnSubmitMobile { margin-bottom: 15px; } .accountLogin .forgat-password a { color: #26a9e1; font-weight: 500; } .with-left-icon { padding-left: 30px; background-repeat: no-repeat; background-position: left 10px center; } .left-white-arrow { background-image: url('../imgs/left-arrow-white.png') !important; background-size: 12px !important; } .left-white-arrow-small { background-image: url('../imgs/left-arrow-white.png'); background-size: 6px; } .with-right-icon { padding-right: 30px; background-repeat: no-repeat; background-position: right 10px center; } .right-white-arrow { background-image: url('../imgs/right-arrow-white.png') !important; background-size: 12px !important; } .right-white-arrow-small { background-image: url('../imgs/right-arrow-white.png'); background-size: 6px; } .with-textbefore-icon:before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 10px; background-image: url('../imgs/left-arrow-white.png'); background-size: 6px; background-repeat: no-repeat; background-position: center; } .with-textafter-icon:before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 10px; background-image: url('../imgs/right-arrow-white.png'); background-size: 6px; background-repeat: no-repeat; background-position: center; } .add-edit-account p { margin-bottom: 15px; } .add-edit-account label { margin: 0 0 3px 0 !important; padding: 0; } .add-edit-account input+span { float: left; } .add-edit-form p:last-child { margin: 0 !important; } .add-edit-form .half-column div p:last-child { margin: 0 !important; } #content .error-message { font-size: 12px; color: #ff0000 !important; margin-top: 3px !important; } .accountLogin h3.with-additional-click { margin: 0; } .with-additional-click img, .with-additional-click span { display: inline-block; vertical-align: middle; } .with-additional-click span { margin: 3px 0; } .addremovegallery a { font-size: 11px; } .w100 { width: 100%; } .mb15 { margin-bottom: 15px; } .text-center { text-align: center; } .footer-bootm-links { float: left; background: #e1e1de; width: 100%; line-height: 18px; padding: 20px 30px; color: #747578; text-decoration: none; box-sizing: border-box;} .footer-bootm-links a { color: #747578; text-decoration: none; } .halfwidthcolumn .half-column { box-sizing: border-box; } .halfwidthcolumn .half-column label, .halfwidthcolumn .half-column input { width: 100%; box-sizing: border-box; } #ActivateAccountText { word-break: break-all; } #ActivateAccountText a { display: block; padding-top: 8px; } /*------------------------ Responsive design ------------------------*/ @media only screen and (max-width: 991px) { #right-col { width: 500px; } } @media only screen and (max-width: 767px) { #wrapper, #wrapper1, .section, #slides, #slides img{ width: 100%; max-width: 100%; } #main-nav, #utility-nav{ display: none; } #dropdown-button { margin: 6px 10px;} #login-but{ left: 35px; top: 85px; } #logo{ height: 60px; } .dropdown-menu{ float: right; top: 90px; margin-left: -85px;} .dropdown-menu li a{ color: black !important; } #slides{ margin-top: 0px; } #header{ height: 150px; } #footer{ height: auto; } #footer ul, #footer .testimonial { position:relative; top:0px; left: 0px;} .section .inside { padding-left: 30px; height: 190px;} .section .inside ul { left:30px; } #footer .testimonial { background:#e1e1de; left: 0px; width: 100%; padding: 20px 30px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} #footer ul{padding: 20px 30px;} #footer ul:last-child{ margin-top: 0px; } /*#footer ul:nth-child(even){ background-color: white;}*/ #wp .reg-details { background:#ffffff; float: left; text-align: left; margin: 0; padding: 20px 30px; box-sizing: border-box; width: 100%; } /*#wp .rbs-logo { top: 50px;} #wp { height: 215px; } #wp .rbs-logo { top: 130px; } #wp .credit-cards { top: 165px; }*/ body, #footer ul{ font-size: 14px; } .section h2{ font-size: 26px; margin-bottom: 0px;} .inside li{ font-size: 22px; width: 100%; margin-bottom: 10px;} .inside .login{ display: none; } #login-but{ display: none; } #login-but-mobile { display: block; height: 55px; width: calc(100% - 60px); background-color:#556067; border-radius: 10px; color: white !important; font-weight: bold; font-size: 36px; text-align: center;} #login-but-mobile img { margin: 10px 15px;} #login-but-mobile span {position: relative; top: -47px; float: right; right: 15px; } #footer, #wp{ font-weight: bold; } #header{background: #000000;} .small-header{ height: 100px !important; } fieldset input[type="text"], fieldset input[type="password"] { width: 100%; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} /* #btnSubmitMobile, .login input[type="submit"] { background-repeat: no-repeat; border-radius: 5px; background-color: #26a9e1; height: 33px; background-image: url(http://localhost:11667/assets/imgs/buttons/arrow-icon-login.png); width: auto; min-width: 120px; background-size: 24px 40px; background-position: right 15px bottom 10px; text-align: left; padding: 0 15px; font-size: 16px; color: white; }*/ #btnSubmitMobile{ display: block;} #btnSubmit{ display: none; } .contact #btnSubmit, .consultation #btnSubmit { display: block; margin: 0; } #content { padding: 20px 30px 20px; } #content:first-child { font-size: 20px;} #content label{ width: 100%; margin-bottom: 5px; } fieldset select { width: 100%; max-width: 100%; } #content p.check label{ width: auto;} #content .note{ padding-top: 20px; margin-left: 20px;} .t18px{ font-size: 18px; } .t20px{ font-size: 20px; } /*#content > p {margin-bottom: 5px; }*/ #footer .social { top: -15px; right: 0px;} .checkbox-text{ width: 100%; margin-bottom: 15px !important;} .checkbox { margin-top: -40px; margin-left: 55px;} .update-email-button{ margin-top: 20px; background: url('../imgs/buttons/continue-mobile.png') no-repeat !important; width: 325px; height: 85px;} .buttons input { font-size: 16px !important; } .forget input.submit { margin: 10px 0 0 0; font-size: 0; } .forget #content:first-child p{margin-bottom: 0px;} .forget #content h3{ margin-bottom: -10px; } .forget h1{ font-size: 33px; } .checkbox-text label {float: left;} .twitter { margin-top: 18px; position: relative; left: 5px; } .section .inside { padding: 20px 30px;} #tbLogin, #tbPassword, #email { padding: 15px 10px;} #header .return-button { bottom: 22px; left: 10px; right: auto; margin-right: -75px; } .half-panel { width: 94%; } #left-col, #right-col { width: 100%; } .shoots #right-col li { width: 100%; } #logout.logout-but { margin: 95px 10px 0 0 !important; } #intro { padding: 10px 30px; } #intro h1 { font-size: 28px; } #masthead.masthead-mobilemenu ul { font-size: 0; display: flex; align-items: center; } #masthead.masthead-mobilemenu ul li { flex: 1; background: #2298c9; } #masthead.masthead-mobilemenu ul li.current { flex: 1; background: #ffffff; } #masthead.masthead-mobilemenu ul li a { margin: 0; text-align: center; line-height: 16px; font-weight: 500; padding: 10px 20px; box-sizing: border-box; } #wp .footer-logos { width: 100%; background-color: #fff; text-align: left; margin: 0; line-height: 21px; padding: 20px 30px; box-sizing: border-box; } #wp .footer-logos a.trustpay-logo { text-align: left; } #wp .footer-logos img { position: relative; top: auto; left: auto; } .td767 { display: none; } .btn.basket-icon { padding-left: 30px; background-image: url('../imgs/icon-cart-empty.png'); background-repeat: no-repeat; background-size: 20px; background-position: left center;} .btn.basket-icon.full { background-image: url('../imgs/icon-cart-full.png'); } .btn.basket-icon.empty { background-image: url('../imgs/icon-cart-empty.png'); } .my-account-button { display: none; } .button { border-radius: 4px;} .form.mobile-full-width { margin: auto -30px; padding: 30px !important; border: 0 !important; } } @media only screen and (min-width: 768px) { .accountLogin fieldset.bg-gray { background-color: #f5f5f5; padding: 10px; } .accountLogin fieldset.login-form-block label { width: 220px; } .accountLogin .check-box input[type="checkbox"] { width: 18px; height: 18px; } .accountLogin input[type="submit"], .accountLogin input#btnSubmit, .accountLogin input#btnSubmitMobile, .forgetAccount input[type="submit"], .forgetAccount input#btnSubmit, .forgetAccount input#btnSubmitMobile ,.g-recaptcha{ width: 150px; padding: 10px 15px; font-size: 16px; } .add-edit-form.half-width { width: 45%; } .halfwidthcolumn .half-column { width: 48.5%; float: left; } .halfwidthcolumn .half-column:first-child { margin-right: 3%; } } @media only screen and (max-width: 767px) { .accountLogin #ReactivationLink { width: 100% !important; text-align: left; padding: 0; padding-top: 6px; padding-bottom: 6px; } #content .error-message { margin-left: 0; } } #content .error-message { margin-left: 20px; } @media only screen and (max-width: 767px) { #content .error-message { margin-left: 0 !important; } }