/* CSS Document */ /* CSS BROWSER SELECTOR IS NOW ABLE TO ADJUST ALL BROWSERS VIA THIS ONE CSS FILE... THE ELEMENTS FOR ADJUSTMENT ARE... .ie .ie9 .ie8 .ie7 .ie6 .ie5 .gecko .ff2 .ff3 .ff3_5 .ff3_6 .opera .opera8 .opera9 .opera10 .konqueror .webkit .safari .safari3 .chrome .iron .win .vista .linux .mac .freebsd .ipod .iphone .ipad .webtv .j2me .blackberry .android .mobile .linux.gecko .win.gecko */ /* BODY ETC */ body{ font-family: Verdana, Arial, Helvetica, sans-serif; color: #006699; line-height: 1; margin: 0px; padding: 5px; color: #006699; background-color: #FFF; background-image:url(images/wood.jpg); background-repeat: repeat-x repeat-y; background-attachment: fixed; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 0px; border-left-width: 1px; border-bottom-style: groove; } /* BROWSER TESTING OPTION ONLY */ .ff2 #testelement {width:50px; height:30px; background-image:url(images/browser-test-squares-firefox.jpg);} .ff3 #testelement {width:50px; height:30px; background-image:url(images/browser-test-squares-firefox.jpg);} .ff3_5 #testelement {width:50px; height:30px; background-image:url(images/browser-test-squares-firefox.jpg);} .ff3_6 #testelement {width:50px; height:30px; background-image:url(images/browser-test-squares-firefox.jpg);} .ff7 #testelement {width:50px; height:30px; background-color:#990066;} .opera #testelement {width:50px; height:30px; background-image:url(images/browser-test-squares-opera.jpg);} .chrome #testelement {width:50px; height:30px; background-image:url(images/browser-test-squares-chrome.jpg);} .safari #testelement {width:50px; height:30px; background-image:url(images/browser-test-squares-safari.jpg);} .ie8 #testelement {width:50px; height:30px; background-image:url(images/browser-test-squares-ie8.jpg);} .ie9 #testelement {width:50px; height:30px; background-image:url(images/browser-test-squares-ie9.jpg);} .ie7 #testelement {width:50px; height:30px; background-image:url(images/browser-test-squares-ie7.jpg);} .ie6 #testelement {width:50px; height:30px; background-image:url(images/browser-test-squares-ie6.jpg);} .ie10 #testelement {width:50px; height:30px; background-image:url(images/browser-test-squares-ie10.jpg);} /* ////// ADDING A GRADIENT BACKGROUND IF REQUIRED //////////*/ /*SIMPLY ADD THIS DIV TO THE HTML*/ #content {margin-top:0; margin-bottom:0; margin-left:0; margin-right:0; width:100%; height:100%;background: #000000; /* Old browsers */ background: -moz-linear-gradient(top, #000000 0%, #0e0e0e 10%, #262626 20%, #4a4a4a 33%, #8f9190 55%, #929091 56%, #999999 58%, #989898 58%, #b8b8b8 68%, #b8b8b8 69%, #bbbbbb 69%, #bababa 69%, #d4d4d4 78%, #eaeaea 87%, #f2f2f2 92%, #f4f4f4 92%, #ffffff 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(10%,#0e0e0e), color-stop(20%,#262626), color-stop(33%,#4a4a4a), color-stop(55%,#8f9190), color-stop(56%,#929091), color-stop(58%,#999999), color-stop(58%,#989898), color-stop(68%,#b8b8b8), color-stop(69%,#b8b8b8), color-stop(69%,#bbbbbb), color-stop(69%,#bababa), color-stop(78%,#d4d4d4), color-stop(87%,#eaeaea), color-stop(92%,#f2f2f2), color-stop(92%,#f4f4f4), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #000000 0%,#0e0e0e 10%,#262626 20%,#4a4a4a 33%,#8f9190 55%,#929091 56%,#999999 58%,#989898 58%,#b8b8b8 68%,#b8b8b8 69%,#bbbbbb 69%,#bababa 69%,#d4d4d4 78%,#eaeaea 87%,#f2f2f2 92%,#f4f4f4 92%,#ffffff 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #000000 0%,#0e0e0e 10%,#262626 20%,#4a4a4a 33%,#8f9190 55%,#929091 56%,#999999 58%,#989898 58%,#b8b8b8 68%,#b8b8b8 69%,#bbbbbb 69%,#bababa 69%,#d4d4d4 78%,#eaeaea 87%,#f2f2f2 92%,#f4f4f4 92%,#ffffff 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #000000 0%,#0e0e0e 10%,#262626 20%,#4a4a4a 33%,#8f9190 55%,#929091 56%,#999999 58%,#989898 58%,#b8b8b8 68%,#b8b8b8 69%,#bbbbbb 69%,#bababa 69%,#d4d4d4 78%,#eaeaea 87%,#f2f2f2 92%,#f4f4f4 92%,#ffffff 100%); /* IE10+ */ background: linear-gradient(to bottom, #000000 0%,#0e0e0e 10%,#262626 20%,#4a4a4a 33%,#8f9190 55%,#929091 56%,#999999 58%,#989898 58%,#b8b8b8 68%,#b8b8b8 69%,#bbbbbb 69%,#bababa 69%,#d4d4d4 78%,#eaeaea 87%,#f2f2f2 92%,#f4f4f4 92%,#ffffff 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */} /* //////////////////////////// /////////////////// TYPOGRAPHY CODE HINTS /////////////////////////// 1. CONVERT YOUR FONT INTO THE FIVE TYPES: ttf, eot, woff, svg and otf 2. PUT THEM INTO 'FONTS' FOLDER IN THE ROOT 3. CHANGE THE URL AS SHOWN HERE - MAKE SURE SPELLING IS EXACT TO MATCH THE FONT FILE NAME 4. ADD THE FONT VIA 'FONT-FAMILY' RULE TO STYLE OR H1 etc. 5. PREVIEW BROWSER TO SEE THE FONT IN ACTION. 6. ALWAYS SUGGEST AN ALTERNATIVE FONT OR OLDER BROWSERS etc. @font-face { font-family:'alegreyaregular'; src: url('fonts/alegreyaregular/alegreyaregular.eot?#iefix') format('embedded-opentype'), url('fonts/alegreyaregular/alegreyaregular.woff') format('woff'), url('fonts/alegreyaregular/alegreyaregular.ttf') format('truetype'), url('fonts/alegreyaregular/alegreyaregular.svg#svgFontName') format('svg');} @font-face { font-family:'rotissemiserifstd'; src: url('fonts/rotis-semi-serif/rotissemiserifstd.eot?#iefix') format('embedded-opentype'), url('fonts/rotis-semi-serif/rotissemiserifstd.woff') format('woff'), url('fonts/rotis-semi-serif/rotissemiserifstd.ttf') format('truetype'), url('fonts/rotis-semi-serif/rotissemiserifstd.svg#svgFontName') format('svg');} h1{color: #d92231;font-size:22px;font-family: 'rotissemisansstd', serif, Times; text-align:left; line-height:20px;letter-spacing:0.04em;} h2{color: #d92231;font-size:17px;font-family: 'rotissemisansstd', serif, Times; text-align:left; line-height:18px;letter-spacing:0.04em;} .style24 {color:#ffffff;font-size:16px; font-family: 'rotissemisansstd', serif, Times; text-align:left; line-height:10px; letter-spacing:1px;} .style24 a:link {color: #ffffff;text-decoration: none;} .style24 a:visited {text-decoration: none;color: #ffffff;} .style24 a:hover {text-decoration: none;color: #ffcc00;} .style24 a:active {text-decoration: none;color: #ffffff;} ////////////////////////////////// ///////////////////////// //////////////////////////////////* /* TYPOGRAPHY */ @font-face { font-family:'alegreyaregular'; src: url('fonts/alegreyaregular/alegreyaregular.eot?#iefix') format('embedded-opentype'), url('fonts/alegreyaregular/alegreyaregular.woff') format('woff'), url('fonts/alegreyaregular/alegreyaregular.ttf') format('truetype'), url('fonts/alegreyaregular/alegreyaregular.svg#svgFontName') format('svg');} @font-face { font-family:'rotissemiserifstd'; src: url('fonts/rotis-semi-serif/rotissemiserifstd.eot?#iefix') format('embedded-opentype'), url('fonts/rotis-semi-serif/rotissemiserifstd.woff') format('woff'), url('fonts/rotis-semi-serif/rotissemiserifstd.ttf') format('truetype'), url('fonts/rotis-semi-serif/rotissemiserifstd.svg#svgFontName') format('svg');} @font-face { font-family:'rotissemisans'; src: url('fonts/rotis-semi-sans/rotissemisansstd.eot?#iefix') format('embedded-opentype'), url('fonts/rotis-semi-sans/rotissemisansstd.woff') format('woff'), url('fonts/rotis-semi-sans/rotissemisansstd.ttf') format('truetype'), url('fonts/rotis-semi-sans/rotissemisansstd.svg#svgFontName') format('svg');} h1{ color: #ec008c;font-size:23px;font-family:tahoma, "lucida sans unicode", sans-serif; font-weight:bold;text-align:left; line-height:28px;letter-spacing:0.04em;}/*TEXT SUBHEADLINE PINK*/ h2{ color: #3b3d3c;font:23px; font-family:Arial, Helvetica, sans-serif; font-weight:bold;text-align:left; line-height:30px;letter-spacing:0.1em;}/*TEXT TAGLINE BROWN*/ h3{ color: #ec008c;font-size:19px;font-family:tahoma, "lucida sans unicode", sans-serif; font-weight:normal;text-align:left; line-height:28px;letter-spacing:0.1em;}/*TEXT SUBHEADLINE PINK*/ h4{ font-size:70px; line-height:60px;font-family:Arial, Helvetica, sans-serif;color:#FFFFFF;font-weight:bold;letter-spacing:; } h5{ font-size:60px; line-height:50px;font-family:'gothammedium', 'gothamlight', Arial, Helvetica, sans-serif;color:#3b3d3c;font-weight:bold;letter-spacing:; } h6{ color: #ec008c;font-size:25px;font-family:tahoma, "lucida sans unicode", sans-serif; font-weight:bold;text-align:center; line-height:28px;letter-spacing:0.07em;}/*TEXT SUBHEADLINE PINK*/ /* AS USED IN TAGLINE*/ .style20 {color: #dacbbf;font-style:normal; font-family:Arial, Helvetica, sans-serif;font-size: 10px; text-align:center;} .style20 a:link {color: #dacbbf;text-decoration: none;} .style20 a:visited {text-decoration: none;color: #dacbbf;} .style20 a:hover {text-decoration: none;color:#ffffff;} .style20 a:active {text-decoration: none;color: #dacbbf;} /* AS USED IN TAGLINE*/ .style24 {color:#ffffff;font-size:13px; font-family: 'rotissemisans', verdana, sans-serif; text-align:left; line-height:10px; letter-spacing:1px;} .style24 a:link {color: #ffffff;text-decoration: none;} .style24 a:visited {text-decoration: none;color: #ffffff;} .style24 a:hover {text-decoration: none;color: #ffcc00;} .style24 a:active {text-decoration: none;color: #ffffff;} /* AS USED IN Titles*/ .style25 {color:#2b3680;font-size:28px;font-weight:bold; font-family: 'rotissemisans', verdana, sans-serif; text-align:left; line-height:10px; letter-spacing:1px;} .style25 a:link {color: #2b3680;text-decoration: none;} .style25 a:visited {text-decoration: none;color: #2b3680;} .style25 a:hover {text-decoration: none;color: #2b3680;} .style25 a:active {text-decoration: none;color: #2b3680;} /* AS USED IN Titles*/ .style28 {color:#2b3680;font-size:20px;font-weight:bold; font-family: 'rotissemisans', verdana, sans-serif; text-align:left; line-height:10px; letter-spacing:1px;} .style28 a:link {color: #2b3680;text-decoration: none;} .style28 a:visited {text-decoration: none;color: #2b3680;} .style28 a:hover {text-decoration: none;color: #2b3680;} .style28 a:active {text-decoration: none;color: #2b3680;} /* AS USED IN Footer contact details*/ .style27 {color:#ffffff;font-size:21px;font-weight:bold; font-family: 'rotissemisans', verdana, sans-serif; text-align:left; line-height:10px; letter-spacing:1px;} .style27 a:link {color: #ffffff;text-decoration: none;} .style27 a:visited {text-decoration: none;color: #ffffff;} .style27 a:hover {text-decoration: none;color: #ffcc00;} .style27 a:active {text-decoration: none;color: #fffff;} /* AS USED IN Text*/ .style26 {color:#666666;font-size:13px;font-weight:; font-family: 'rotissemisans', verdana, sans-serif; text-align:left; line-height:14px; letter-spacing:1px;} .style26 a:link {color: #666666;text-decoration: none;} .style26 a:visited {text-decoration: none;color: #666666;} .style26 a:hover {text-decoration: none;color: #e77c9a;} .style26 a:active {text-decoration: none;color: #666666;} /* STANDARD ROWS SET */ #row1 {width:100%; height:20px; margin:0; background:;} /* TOP BAR - NAVS AND SOCIAL MEDIA LINKS */ #row2 {width:100%; height:7px; margin:0;} /* A SPACER ONLY */ #row2inner {width:986px; height:7px; margin:0;background-color:#2b3680; margin:auto;} #row3 {width:100%; height:120px; margin:0;} /* TOP ADS BAR */ #row3inner {width:986px; height:120px; margin:0;background-color:#2b3680; margin:auto;} #row3z {width:100%; height:22px; margin:0;} /* TOP ADS BAR */ #row3zinner {width:986px; height:22px; margin:0;background-color:#2b3680; margin:auto;} #row3y {width:100%; height:1px; margin:0;} /* TOP ADS BAR */ #row3yinner {width:986px; height:1px; margin:0;background-color:#2b3680; margin:auto;} #row3f {width:100%; height:9px; margin:0;} /* TOP ADS BAR */ #row3finner {width:986px; height:9px; margin:0;background-color:#2b3680; margin:auto;} #row4 {width:100%; height:2px; margin:0;} /* A SPACER ONLY */ #row4inner {width:986px; height:7px; margin:0;background-color:#2b3680; margin:auto;} #row5 {width:100%; height:400px; margin:0;} /* MAIN LOGO GRAPHIC OR SLIDESHOW */ #row5inner {width:986px; height:400px; margin:0;background-color:#2b3680; margin:auto;} #row6 {width:100%; height:7px; margin:0;} /* A SPACER ONLY */ #row6inner {width:986px; height:7px; margin:0;background-color:#2b3680; margin:auto;} #row7 {width:100%; height:100%;margin:0; float:left; } /* MAIN CONTENT AREA */ #row7inner {width:986px; margin:0;background-color:#ffffff; margin:auto;} #row8 {width:100%; height:60px; margin:0; float:left;} /* A SPACER ONLY */ #row8inner {width:986px; height:60px; margin:0;background-color:#ffffff; margin:auto;} #row88 {width:100%; height:30px; margin:0; float:left;} /* A SPACER ONLY */ #row88inner {width:986px; height:30px; margin:0;background-color:#2b3680; margin:auto;} #row38 {width:100%; height:55px; margin-top:-15px; float:left;} /* A SPACER ONLY */ #row38inner {width:986px; height:55px; margin-top:-15px;background-color:#ffffff; margin:auto;} #row48 {width:100%; height:200px; margin:0; float:left;} /* A SPACER ONLY */ #row48inner {width:986px; height:200px; margin:0;background-color:#ffffff; margin:auto;} .weddingimage {width:311px; height:200px; float:left;} .weddingspace {width:13px; height:200px; float:left;} #row9 {width:100%; height:90px; margin:0; float:left;} /* FOOTER */ #row9inner {width:986px; height:90px; margin:0;background-color:#2b3680; margin:auto;} #row9inner1 {width:986px; height:70px; margin:0;background-color:#2b3680; margin:auto; float:left;} #row9inner2 {width:986px; height:20px; margin:0;background-color:#2b3680; margin:auto; float:left;} #row10 {width:100%; height:18px; margin:0; float:left;} /* TAGLINE */ #row10inner {width:986px; height:18px; margin:0;background-color:#2b3680; margin:auto;} #row11 {width:100%; height:10px; margin:0;float:left;} /* A SPACER ONLY */ #row11inner {width:986px; height:10px; margin:0;background-color:#2b3680; margin:auto;} /* INDIVIDUAL ROWS DETAIL - APPLIED TO THE 'INNER' ELEMENTS OF THE ROWS*/ #row5inner-l {width:973px; height:228px;background-color:#000000; float:left;} #row5inner-l-1 {width:13px; height:228px;background-color:#ffffff; float:left;} /* left space only */ #row5inner-l-2 {width:960px; height:228px;background-color:#000000; float:right;} /*main logo picture or slideshow space 960x170 */ #row5inner-r {width:13px; height:228px;background-color:#ffffff; float:right;} /* right space only */ #row7inner-l {width:660px; min-height:300px;background-color:#ffffff; float:left;} #row7inner-l-1 {width:13px; min-height:500px;background-color:#ffffff; float:left;} /* left space only */ #row7inner-l-2 {width:630px; max-height:480px; background-color:#ffffff; float:right; overflow:auto;} /* main content section - text input etc */ #row7inner-r {width:326px; min-height:500px;background-color:#ffffff; float:right;} #row7inner-r-1 {width:313px; min-height:500px;background-color:#ffffff; float:left;} #row7inner-r-1-a {width:13px; min-height:500px;background-color:#ffffff; float:left;} /* middle spacing only - between ads */ #row7inner-r-1-b {width:300px; min-height:500px;background-color:#ffffff; float:right;} /* ads row 300wide boxes here */ #row7inner-r-2 {width:13px; min-height:500px;background-color:#ffffff; float:right;} /* right space only */ #row9inner-l {width:973px; height:90px;background-color:#ffffff; float:left;} #row9inner-l-1 {width:13px; height:90px;background-color:#ffffff; float:left;} /* left space only */ #row9inner-l-2 {width:960px; height:90px;background-color:#ffffff; float:right;} /*footer detail here */ #row9inner-r {width:13px; height:90px;background-color:#ffffff; float:right;} /* right space only */ #tagline-text {width:986px; height:11px; vertical-align:middle;} /* //////////// ///////////////////// ///////////////////// //////////////////////////////// EXTRAS AND CODE ARE BELOW ////////////* /* ----------- NAV CODE AND RULES ---------------- --------------------------------------------------*/ /* use this html:----- NAV BUTTONS INPUT NAV BUTTONS END */ /* CATEGORIES HORIZONTAL NAV CSS ELEMENTS */ ul.categoriesnav { padding:0.2em 0.8em 0em 0.8em; list-style:none; text-align:center; width:80em; /* THIS ELEMENT CHANGES THE WIDTH OF THE WHOLE NAV ROW*/ background-color:; /*BACKGROUND COLOUR OF WHOLE ROW*/ display:inline; overflow:hidden; margin-top:2px; } ul.categoriesnav li {float:; display:inline;} /*CHANGES THE ORDER OF THE BUTTONS*/ ul.categoriesnav li + li {border-right: 0px solid #ffcc00; border-left: 0px solid #ffffff;} /*puts a border to right of buttons only with a preceding element ie not the last one*/ ul.categoriesnav a {display:inline; padding:0.2em 0.8em 0em 0.8em;/* THIS ELEMENT CHANGES THE width of the individual button or the space between */ line-height: 1.3em; background-color:;/*background colour of the individual button*/ text-decoration:none; color:#ffffff;/* THIS ELEMENT CHANGES THE NORMAL COLOUR */ border-right: 0px; border-color:#ffffff; border-right-style:; margin-top:10px;/* THIS ELEMENT PLACES IN THE LINE BETWEEN EACH BUTTON */ } ul.categoriesnav li:first-child a {background:none;} ul.categoriesnav a:hover, ul.categoriesnav a:focus {color:#FFCC00;}/* THIS ELEMENT CHANGES THE ROLLOVER COLOUR */ .safari .lastbutton {display:inline-table; border-right: 0px; border-color:#ffffff; padding: 0; } .lastbutton {border-right: 0px solid; border-color:#ffffff; padding: 0; } /* END HORIZONTAL NAV CSS*/ /* ----------- SLIDESHOW CODE AND RULES ---------------- -----///////////////// ////////////////////// /////////////---------------------------------------------*/ /* SLIDESHOW INPUT
end slideshow
end container SLIDESHOW END */ /* NOTE: GIFS CAN BE SMALLER THAN JPEGS BUT LOSE A LITTLE BIT OF THE QUALITY - TRY IT OUT..MIGHT HELP WITH FASTER DOWNLOADING ALSO: CHANGE THE SPEED OF THE SLIDESHOW VIA THE JS..*/ /* ------------------------------------------- SLIDESHOW ------------------------------------------- */ /* ADJUST SPEED OF SLIDES AND DURATION IN JQUERY.CYCLE.ALL.MIN.JS AT LINE 1006 - SPEED and LINE 1014 TIMEOUT */ #container { width: 986px; float:left;/* ADJUST WIDTH HERE AND BACK COLOUR TO SUIT */ position: relative; } div#slideshow { width: 986px; height: 400px; padding: 0px 0 0 0px;/* ADJUST WIDTH AND HEIGHT OF SLIDESHOW */ background:; margin-left:0px; margin-top:10px; overflow: hidden; /* Allows the slides to be viewed using scrollbar if Javascript isn't available */ position: relative; z-index: 0; } div#slideshow ul#nav { display: none; list-style: none; position: relative; top: 0px; z-index: 0; } div#slideshow ul#nav li#prev { float: left; margin: 0 0 0 0px; } div#slideshow ul#nav li#next { float: right; margin: 0 0px 0 0; } div#slideshow ul#nav li a { display: block; width: 80px; height: 80px; text-indent: 0px; } div#slideshow ul#nav li#prev a { background:url(images/prev.png);/* IGNORE THIS - DOESNT WORK ANYWAY */ } div#slideshow ul#nav li#next a { background: url(images/next.png);/* IGNORE THIS - DOESNT WORK ANYWAY */ } div#slideshow ul#slides { list-style: none; } div#slideshow ul#slides li { margin: 0 0 0px 0; } /* //////////////////////////////////////////// MOBILE MEDIA RULES EXAMPLES ///////////////////////// ///////////adjust elements for each one to adjust mobile screen displays - place this in a separate css file for mobiles only //////////*/ iPhone 2G, 3G, 3GS Portrait @media only screen and (min-width: 150px) and (max-width: 320px) and (orientation: portrait) and not (-webkit-min-device-pixel-ratio: 2) { /* CSS3 Rules for iPhone in Portrait Orientation */ } iPhone 2G, 3G, 3GS Portrait @media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) and not (-webkit-min-device-pixel-ratio: 2) { /* CSS3 Rules for iPhone in Portrait Orientation */ } iPhone 2G, 3G, 3GS Landscape @media only screen and (device-width: 480px) and (orientation: landscape) and not (-webkit-min-device-pixel-ratio: 2) { /* CSS3 Rules for iPhone in Landscape Orientation */ } iPhone 4, 4S Portrait @media only screen and (device-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) { /* CSS3 Rules for XX iPhone in Portrait Orientation */ } iPhone 4, 4S Landscape @media only screen and (device-width: 960px) and (orientation: landscape) and not (-webkit-min-device-pixel-ratio: 2) { /* CSS3 Rules for iPhone in Landscape Orientation */ } /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* Styles */ } /* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ } /********** iPad 3 **********/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { /* Styles */ } @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { /* Styles */ } /********** iPhone 4+ **********/ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { /* Styles */ } @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { /* Styles */ } @media screen and (min-height: 1px) and (max-height: 320px) and (orientation: landscape){ .style7 {font-size:0.77em; line-height:1.1em;} .style8 {font-size:0.5em;} .tagger {visibility:hidden;} body {line-height:50%;} #body {background-color:#FFFFCC; padding-bottom:40px;} .buttons6 {visibility:hidden;}.buttons5 {visibility:hidden;} #footer {height:40px;} #input {height:90%; max-height:90%; overflow:hidden;} .style6 {font-size:0.7em; line-height:0.3em;} .style77 {font-size:0.7em;line-height:0.3em;} .style88 {font-size:0.7em;line-height:0.3em;} .style9 {font-size:0.7em;line-height:0.3em;} .style10 {font-size:0.7em;line-height:0.3em;} } @media screen and (min-height: 1px) and (max-height: 320px) and (orientation: portrait){ .style7 {font-size:0.71em; line-height:1.1em;} .style8 {font-size:0.5em;} .tagger {visibility:hidden;} #body {background-color:#FFFFCC;} body {line-height:50%;} .style6 {font-size:0.7em;line-height:0.3em;} .style77 {font-size:0.7em;line-height:0.3em;} .style88 {font-size:0.7em;line-height:0.3em;} .style9 {font-size:0.7em;line-height:0.3em;} .style10 {font-size:0.7em;line-height:0.3em;} } @media screen and (min-height: 321px) and (max-height: 480px) and (orientation: landscape){ .style7 {font-size:0.77em; line-height:1.1em;} .buttons6 {visibility:hidden;}.buttons5 {visibility:hidden;} .style8 {font-size:0.5em;} #body {background-color:#FFFFCC;padding-bottom:40px;} #footer {height:40px;} #input {height:90%; max-height:90%; overflow:hidden;} .tagger {visibility:hidden;} .style6 {font-size:0.9em;} .style77 {font-size:0.9em;} .style88 {font-size:0.9em;} .style9 {font-size:0.9em;} .style10 {font-size:0.9em;} } @media screen and (min-height: 321px) and (max-height: 480px) and (orientation: portrait){ .style7 {font-size:0.7em; line-height:0.6em;} .style8 {font-size:0.5em;} #body {background-color:#FFFFCC;} .style6 {font-size:0.7em;} .style77 {font-size:0.7em;} .style88 {font-size:0.7em;} .style9 {font-size:0.7em;} .style10 {font-size:0.7em;} } @media screen and (min-height: 341px) and (max-height: 360px) { .style7 {font-size:0.82em; line-height:1.1em;} .style8 {font-size:0.6em;} #body {background-color:#FFFFCC;} .style6 {font-size:1.2em;} .style77 {font-size:1.2em;} .style88 {font-size:1.2em;} .style9 {font-size:1.2em;} .style10 {font-size:1.2em;} } @media screen and (min-height: 361px) and (max-height: 380px) { .style7 {font-size:0.86em; line-height:1.2em; } .style8 {font-size:0.6em;} #body {background-color:#FFFFCC;} .style6 {font-size:1.4em;} .style77 {font-size:1.4em;} .style88 {font-size:1.4em;} .style9 {font-size:1.4em;} .style10 {font-size:1.4em;} } @media screen and (min-height: 381px) and (max-height: 400px) { .style7 {font-size:0.9em; line-height:normal; } .style8 {font-size:0.75em;} #body {background-color:#FFFFCC;} .style6 {font-size:1.6em;} .style77 {font-size:1.6em;} .style88 {font-size:1.6em;} .style9 {font-size:1.6em;} .style10 {font-size:1.6em;} } @media screen and (min-height: 401px) and (max-height: 420px) { .style7 {font-size:0.94em; line-height:normal;} .style8 {font-size:0.75em;} #body {background-color:#FFFFCC; padding-top:3%; line-height:1em;} .style6 {font-size:1.8em;} .style77 {font-size:1.8em;} .style88 {font-size:1.8em;} .style9 {font-size:1.8em;} .style10 {font-size:1.8em;} } @media screen and (min-height: 421px) and (max-height: 440px) { .style7 {font-size:1em; line-height:normal;} .style8 {font-size:0.8em;} #body {background-color:#FFFFCC;padding-top:3%;line-height:1.2em;} .style6 {font-size:1.9em;} .style77 {font-size:1.9em;} .style88 {font-size:1.9em;} .style9 {font-size:1.9em;} .style10 {font-size:1.9em;} } @media screen and (min-height: 441px) and (max-height: 460px) { .style7 {font-size:1.1em; line-height:normal;} .style8 {font-size:0.8em;} #body {background-color:#FFFFCC;padding-top:3%;line-height:1.2em;} .style6 {font-size:2em;} .style77 {font-size:1.5em;} .style88 {font-size:2.2em;} .style9 {font-size:2.5em;} .style10 {font-size:2.4em;} } @media screen and (min-height: 461px) and (max-height: 480px) { .style7 {font-size:1.2em; line-height:normal;} .style8 {font-size:0.9em;} #body {background-color:#FFFFCC;padding-top:3%;line-height:1.2em;} .style6 {font-size:2.6em;} .style77 {font-size:2.1em;} .style88 {font-size:2.8em;} .style9 {font-size:3.1em;} .style10 {font-size:3.1em;} } @media screen and (min-height: 481px) and (max-height: 3000px) { .style7 {font-size:1.4em; line-height:normal;} .style8 {font-size:0.9em;} #body {background-color:#FFFFCC;padding-top:3%;line-height:1.2em;} .style6 {font-size:2.9em;} .style77 {font-size:2.4em;} .style88 {font-size:3.1em;} .style9 {font-size:3.4em;} .style10 {font-size:3.3em;} }