*{ -moz-box-sizing:border-box; box-sizing: border-box; } .clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; visibility: hidden; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } html, div, span, applet, object, iframe, h2, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } body { background-color: lightgrey; margin: 0; padding: 0; border: 0; } .date { color: #343434; font-family: Verdana, Geneva, sans-serif; font-size: 9px; font-weight:200; text-align: left; } .topnavwrap { background-position:right; background-color: white; margin:0 auto; width:1024px; border:0px 0px 0px 0px; padding:0px 0px 0px 0px; } .searchwrap { margin:0 auto; width:1024px; height:35px; background-color:; padding:5px 5px 5px 5px; border:0px 0px 0px 0px; } .searchbox { float:left; width:300px; height:25px; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; border: 0px 0px 0px 0px; } .socialbuttons { float:right; width:190px; height:25px; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; border: 0px 0px 0px 0px; } .textbox { background: white url(images/searchicon.png) no-repeat 4px 4px; border: 1px solid grey; outline:0; padding-left: 25px; height:25px; width: 275px; } .social ul { font-size:0; margin: 0; padding: 0; } .social ul li{ float:right; display: inline; margin:0px 0px 0px 0px; padding:0px 7px 0px 0px; border:0px 0px 0px 0px; } .topnav { background-color:#7ec9e1; background-image: url("http://www.reflectdesign.com/images/topnavbackground.png"); background-repeat: no-repeat; background-position: right top; width:1024px; padding:5px 5px 5px 5px; margin:0 auto; } .navwrap { background-color: ; width:1024px; padding:15px 5px 10px 5px; margin:0 auto; } /* nav */ .nav { position: relative; margin: 0px 0; } .nav ul { margin: 0; padding: 0; } .nav li { margin: 0 5px 0px 0; padding: 0; list-style: none; display: inline-block; } .nav a { padding: 3px 19px; text-decoration: none; color: #999; line-height: 100%; } .nav a:hover { color: #000; } .nav .current a { background: #999; color: #fff; border-radius: 5px; } /* right nav */ .nav .left ul { text-align: left; } .footerwrap { margin:0 auto; padding:10px 10px 10px 10px; background-color:white; width:1024px; border-style: solid; border-top: 1px solid lightgrey; } .footer { margin:0; border:0px; width:75%; font-family:"Arial", Helvetica, sans-serif; font-size:14px; color:grey; } .contact{ list-style-type: none; margin: 0; padding: 0; border: 0; float:left; font-family:"Arial", Helvetica, sans-serif; font-size:14px; color:grey; } .contact li { display:inline; margin:0px 25px 0px 0px; } .footerwindow1 { margin: 0; padding:10px 0px 0px 0px; border: 0; width:70%; float:left; } .footerwindow2 { margin:0; padding:0; border: 0; width:5%; float:left; height:25px; color:white; } .footerwindow3 { margin: 0; padding:0; border: 0; width:25%; float:left; height:25px; } .footerwindow4 { color:grey; font-family:"Arial", Helvetica, sans-serif; font-size:12px; margin: 0; padding:25px 0px 0px 0px; border: 0; width:100%; float:left; height:50px; } .footerwindow3 ul { font-size:0; margin: 0; padding: 0; } .footerwindow3 ul li{ float:right; display: inline; margin:0px 0px 0px 0px; padding:0px 12px 0px 0px; border:0px 0px 0px 0px; } .contentwrap { width:1024px; background-color:white; margin:0px auto; padding:20px 20px 20px 20px; } .singlepagetitle { width:100%; margin:0; padding:10px; color:#363636; font-family:Verdana; font-size:18px; text-decoration:none; } .singlepagegallerywrap { background-color:white; width:61%; float:left; padding: 0px 10px 0px 0px; margin:0; } .singlepageinfowrap { width:39%; float:left; margin:0; padding: 0px 0px 0px 10px; } .singlepagegallerywraptwo { width:100%; float:left; padding: 0px 0px 0px 0px; margin:0; } .singlepageinfowraptwo { width:100%; float:left; margin:0; padding: 0px 0px 0px 10px; } .singlepageimgprewrap { margin:0; width:100%; padding:0; padding-left:5%; } .singlepageimgprewrapb { width:17%; padding:0; display:block-inline; margin:10px 4px 4px 4px; } .singlepagemainimage { background-color:white; margin-bottom:15px; padding:0px; width:100%; float:left; } .singlepagemainimageb { width:100%; display:block; } .informationtab, .informationtwotab, .purchaseoptionstab { width:100%; height:auto; padding:12px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin:0; margin-bottom:20px; float:left; border: 1px solid lightgrey; } .informationtabtwo, .informationtwotabtwo, .purchaseoptionstabtwo { width:32%; height:325px; padding:12px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin:0; margin-bottom:20px; margin-top:15px; float:left; border: 1px solid lightgrey; } .informationtwotabtwo { margin-right:15px; margin-left:15px; } .socialshare { width:100%; float:left; } .infotabp { margin:0; padding:0; color: #343434; font-family:"Arial", Helvetica, sans-serif; font-size: 15px; text-align: left; } .downloadnowbtn { -moz-box-shadow:inset 0px 1px 3px 0px #fbafe3; -webkit-box-shadow:inset 0px 1px 3px 0px #fbafe3; box-shadow:inset 0px 1px 3px 0px #fbafe3; background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ff5bb0), color-stop(1, #ef027d)); background:-moz-linear-gradient(top, #ff5bb0 5%, #ef027d 100%); background:-webkit-linear-gradient(top, #ff5bb0 5%, #ef027d 100%); background:-o-linear-gradient(top, #ff5bb0 5%, #ef027d 100%); background:-ms-linear-gradient(top, #ff5bb0 5%, #ef027d 100%); background:linear-gradient(to bottom, #ff5bb0 5%, #ef027d 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bb0', endColorstr='#ef027d',GradientType=0); background-color:#ff5bb0; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; border:1px solid #ee1eb5; display:inline-block; cursor:pointer; color:#ffffff; font-family:Arial; font-size:15px; font-weight:bold; padding:11px 23px; text-decoration:none; text-shadow:0px -1px 0px #c70067; width:100%; text-align:center; } .downloadnowbtn:hover { background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ef027d), color-stop(1, #ff5bb0)); background:-moz-linear-gradient(top, #ef027d 5%, #ff5bb0 100%); background:-webkit-linear-gradient(top, #ef027d 5%, #ff5bb0 100%); background:-o-linear-gradient(top, #ef027d 5%, #ff5bb0 100%); background:-ms-linear-gradient(top, #ef027d 5%, #ff5bb0 100%); background:linear-gradient(to bottom, #ef027d 5%, #ff5bb0 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef027d', endColorstr='#ff5bb0',GradientType=0); background-color:#ef027d; } .downloadnowbtn:active { position:relative; top:1px; } .aboutetc { background-color:white; width:100%; border:0; margin:0px; margin-top:12px; } /* MEDIA QUERY FOR 991 to 768 SCREEN STARTS HERE !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/ @media (max-width: 980px) { .contentwrap { width:99%; padding:20px 20px 20px 20px; } .headerwrap { width:99%; height:107px; margin:0 auto; border:0; padding:0px 10px 0px 10px; } .topnavwrap { width:99%; background-color: black; } .searchwrap { margin:0 auto; width:100%; background-color: white; padding:5px 5px 5px 5px; } .topnav { width:100%; padding:5px 5px 5px 5px; margin:0 auto; } .navwrap { background-color: white; width:100%; margin:0 auto; } .footerwrap { width:99%; } .fontpreviewwrap { width:30%; color:grey; margin:12px; } .fontinfo ul li{ background-size: 15px 15px; background-repeat: no-repeat; background-position: 0px center; padding-left: 19px; margin-bottom:20px; display:list-item; } } /* MEDIA QUERY FOR 950 SCREEN STARTS HERE !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/ @media (max-width: 950px) { .singlepageimgprewrap { padding-left:4%; } } /* MEDIA QUERY FOR 900 SCREEN STARTS HERE !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/ @media (max-width: 900px) { .singlepageimgprewrap { padding-left:4%; } } /* MEDIA QUERY FOR 850 SCREEN STARTS HERE !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/ @media (max-width: 850px) { .informationtabtwo, .informationtwotabtwo, .purchaseoptionstabtwo { width:100%; height:auto; padding:12px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color:#363636; margin:0; margin-bottom:7px; margin-top:7px; float:left; border: 1px solid lightgrey; } .informationtwotabtwo { margin-right:0px; margin-left:0px; } } /* MEDIA QUERY FOR 850 SCREEN STARTS HERE !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/ @media (max-width: 850px) { .singlepageimgprewrap { padding-left:3%; } } @media screen and (max-width: 790px) { .nav { position: relative; min-height: 40px; } .nav ul { width: 100%; padding: 5px 0; position: absolute; top: 0; left: 0; border: solid 1px #aaa; background: #fff url(images/icon-menu.png) no-repeat 10px 11px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.3); } .nav li { display: none; /* hide all