/* DIANE WRIGHT FINE ART style sheet */ /* BODY Styling */ body { background-color:#567728; margin:0;padding:0; color: #567728; font-size:16px; font-family:verdana,arial,sansserif; } html {box-sizing: border-box;} *, *:before, *:after{box-sizing: inherit;} .clearfix:before, .clearfix:after {content: " ";display: table;} .clearfix:after {clear:both;} img {max-width:100%;border:none;} #container {max-width:1000px;margin:0 auto;} #content {float:left;width:99.9%;margin:0;background:#f6fff4;} #topbar {float:left;padding:0;margin:0;width:100%;background:#f6fff4;} #logo, #logo2, #logo3 {width:100%;background-image:url('images/header1shim.jpg');background-repeat:repeat-x;} #log2 {display:none;} #logo2, #logo3 {background:#f6fff4;display:none;} #logoL {float:left;width:100%;clear:left;margin:0;margin-top:-4px; background:#f6fff4 url('images/header2.gif');background-repeat:no-repeat; } #logoL img {float:left;} /* ******************* NAVIGATION **************************** */ #menu1 {display:block;} #menu1 .c2 li {width:160px;} /* intermediate hamburger */ #menu2 {display:none;} #menu2 .n0 {min-width:84px;} #menu2 .n1 div {text-align:center;} /* menu1 main nav */ #navbar {display:block;height:42px;padding:0;margin:2px 0 0 160px;} .navbar {list-style-type:none;} .navbar ul {margin:0;padding:0;list-style-type:none;} .navbar ul li {position:relative;float:left;width:11.8%;margin-left:2px;background-color:#fff;text-align:center;} .navbar ul li.c1 {min-width:80px;} .navbar ul li a {display:block;width:100%;line-height:20px;text-decoration:none;color:#006000;font-family:arial,verdana;font-size:80%;font-weight:bold;border:1px solid #006000;} .navbar ul li a:hover{background-color:#A1FAA1;text-decoration:none;} .navbar .mainicon{background-image:url(http://dianewrightfineart.com/images/arrow_down.gif);background-repeat:no-repeat;background-position:center right;} /* second level */ .navbar ul li ul {position:absolute;display:block;z-index:1000;visibility:hidden;background-color:#0b9fc7;border:1px solid #283809;border-top:none;background-image:none;} .navbar ul li ul li {float:none;width:220px;display:list-item;text-indent:10px;margin:0;padding:0;background-color:#fff;} .navbar ul li ul li a {display:block;width:100%;line-height:36px;color:#006000;text-decoration:none;text-align:left;border:none;} .navbar ul li ul li a:before {content: url('images/arrow_right.gif');} .navbar ul li ul li.m {text-indent:5px;} .navbar ul li ul li.m a:before {content:' ';} .navbar ul li ul li a:hover {background-color:#dbfcdb;text-decoration:none;} .navbar .subicon {background-image:url(images/arrow_right.gif);background-repeat:no-repeat;background-position:center right;} .navbar .navInfoLine{line-height:36px;color:#fff;background-color:#aaa;border-top:1px solid green;border-bottom:1px solid green;} /* third + level */ .navbar ul li ul li ul{left:0;top:0;} /* button off state */ .navbar ul li.on {width:11.8%;height:22px;font:bold 80% arial;text-align:center;padding-top:2px;background-color:#dbfcdb;border:1px solid #006000;} .navbar ul li.on2 {background:#dbfcdb;background-image:none;} .navbar ul li.on.home, .navbar ul li.home, .navbar ul li.home a {width:80px;} /* min nav */ #dw_min {display:none;width:98%;height:40px;line-height:40px;margin-left:1%;background:#dbfcdb;border:1px solid #006000;border-radius:10px;} #dw_min a {display:block;color:#006000;font-family:verdana;font-size:14px;font-weight:bold;line-height:40px;text-indent:20px;text-decoration:none;} #dw_min img {float:right;margin:4px 30px 0 0;} #navMin {display:none;position:relative;z-index:1000;width:70%;height:0;top:-400px;border:1px solid #006000;} #navMin {margin:2px 0 0 20px;padding:0;list-style-type:none;opacity:0;} #navMin li {list-style-type:none;width:99%;height:12.5%;background-color:#fff;text-align:left;} #navMin li a {display:block;width:auto;line-height:50px;color:#006000;text-indent:20px;text-decoration:none;border:none;} #navMin li:hover {background-color:#c9bea7;} /* ******************* End NAVIGATION **************************** */ #leftbar, #leftbarMin {float:left;width:138px;margin:-24px 0 20px 3px;background:#fff;border:2px solid #567728;border-left:none;border-top:none;border-bottom-right-radius:15px;border-bottom-left-radius:15px;} #leftbarMin{display:none;width:96%;margin-left:2%;background:#CAC3B2;border:2px solid #567728;border-radius:15px;} .navbox0 {width:120px;margin:20px auto 0;background-color:#ffffff;font-size:12px;color:#567728;border:solid #006000 1px;text-align:center;} .leftBox {width:126px;margin:0 auto;padding:4px 0 10px 0;border:1px solid #fff;border-bottom:1px solid #006000;} .leftBox:hover {border:1px solid #006000;} .barHead {font-size:90%;background:#006000;color:#fff;border-radius:4px;margin:0 2px 4px;} #maincontent{float:right;width:800px;margin:25px 20px 0 0;} /* ANCHOR styling */ a {color:#567728; font-family:verdana,arial,sansserif; font-size:12pt; text-decoration:none;} a:hover {color:#006000;text-decoration:underline;} a.text, a.tut {font-size:10pt;text-decoration:none;} a.txt12 {font-size:12pt;text-decoration:none;} a.textul {text-decoration:underline;} a.textulb {font-size:10pt;text-decoration:underline;font-weight:bold;} a.text:hover, a.txt12 {color:#006000;text-decoration:underline;} a.tut:hover{color:#006000;text-decoration:none;} a.textul:hover{color:#006000;text-decoration:underline;} a.nav {color:#006000;font-family:arial;font-size:8pt;font-weight:bold;text-decoration:none;} a.art {color:#006000;font-size:8pt;font-weight:normal;text-decoration:none;} a.wip {color:#006000;font-size:9pt;font-style:normal;font-weight:normal;text-decoration:none;} a.wip:hover{color:#006000;} a.links {font-size:14px;text-decoration:none;} a.links:hover {text-decoration:none;} a.promo {color:#006000;font-size:8pt;font-style:normal;font-weight:normal;text-decoration:none;} a.web {color:#bbbbbb;font-size:9pt;text-decoration:underline;;font-family:arial} a.web:hover, a.web2:hover {color:#ffffff} a.web2 {color:orange;font-weight:bold;font-size:10pt;text-decoration:underline;font-family:arial;} a.copy {color:#999;text-decoration:underline;} a.gindex {color:#567728;font-size:10pt;font-weight:bold;text-decoration:none;} a.cntct {font-size:10pt;text-decoration:underline;} a.cntctb {font-size:10pt;text-decoration:underline;font-weight:bold;} a.cntct12 {font-size:12pt;text-decoration:underline;} a.cntct:hover, a.cntct12:hover {color:#ff0000} a.grn8b {font-size:8pt;text-decoration:none;font-weight:600;} a.grn8bu {font-size:8pt;text-decoration:none;font-weight:600;text-decoration:underline;} a.convTxt {color:#567728;font-size:9pt;border-bottom:1px dashed #567728;text-decoration:none;} a.convTxt12{color:#567728;font-size:12pt;border-bottom:1px dashed #567728;text-decoration:none;} a.conv10u {color:#567728;font-size:10pt;border-bottom:1px dashed #567728;} a.conv10u:hover{text-decoration:none;} a.ul {text-decoration:underline;} a.convRed9{font-size:9pt;color:red;text-decoration:none;border-bottom:1px dashed #ff0000;} /* TEXT styling */ .grn8 {font-size:8pt;font-weight:normal} .grn8i {font-style:italic;font-size:8pt;} .grn9 {font-size:8pt;color:#567728;} .grn9b {font-weight:bold;font-size:9pt;} .grn10 {font-size:10pt;color:#567728;font-weight:normal;} .grn10i {font-style:italic;font-size:10pt;} .grn10b {font-weight:bold;font-size:10pt;color:#567728;} .grn11 {font-weight:normal;font-size:11pt;color:#567728;} .grn11bi {font-style:italic;font-size:11pt;color:#567728;font-weight:bold;} .grn11b {font-weight:bold;font-size:11pt;color:#567728;} .grn11bu {font-weight:bold;font-size:11pt;color:#567728;text-decoration:underline;} .grn12 {font-size:12pt;color:#567728;} .grn12b {font-weight:bold;font-size:12pt;color:#567728;} .grn13b {font-weight:bold;font-size:13pt;color:#567728;} .grn14b {font-weight:bold;font-size:14pt;color:#567728;} .grn24b {font-weight:bold;font-size:24pt;color:#567728;} .blk8i {font-style:italic;font-size:8pt;color:#000;} .index {border:1px solid #567728;} .copy {float:left;width:100%;color:#bbb;font-size:9pt;font-family:arial;text-align:center;margin-bottom:50px;} .copyright{font-size:12pt;text-align:center;} .foto {line-height:26px;background-color:#ffffdc;border: solid #006000 1px;text-align:center;} /* GLOBAL Gallery styling */ #galspace {float:left;padding-top:5px;width:100%;} .thumbstack {float:left;width:178px;margin:0 4px 0 8px;} #thumbs {position:relative;float:left;margin-bottom:5px;width:176px;height:520px;overflow:auto;} #scroll {display:none;float:left;width:154px;line-height:30px;background:url('images/scrolldown.gif') center no-repeat;text-align:center;} .artboxx {max-width:156px;height:150px;margin-bottom:6px;border:1px solid #006000;background-color:#fff;} .artbox {max-width:156px;max-height:200px;margin-bottom:6px;padding-top:2px;text-align:center;background-color:#fff;border:1px solid #006000;} .artbox img {border:1px solid #aeaeae;} .art {color:#006000;font:normal 8pt verdana;text-decoration:none;} #galheadr {float:left;width:99%;margin:10px 5px;text-align:center;} #galNav {width:186px;float:left;padding-top:5px;} #galheadMin {display:none} .galhead {color:#777;font:bold 18pt arial;text-align:center;letter-spacing:1px;} #cartView {float:right;width:180px;text-align:center;} #viewPP {margin-top:5px;} .gallery {float:left;width:60px;margin-left:3px;font-family:arial;font-size:10pt;font-weight:bold;color:#006000;} .galon {list-style-type:none;} .galon ul {margin:0;padding:0;list-style-type:none;} .galon ul li {float:left;width:16px;text-align:center;margin-left:1px;border:1px solid #006000;background-color:#ffffff;} .galon ul li a {display:block;color:#006000;width:100%;text-align:center;text-decoration:none;font:bold 9pt arial;} .galon ul li a:hover{background-color:#999;color:#fff;text-decoration:none;} .galon ul li.galdim {display:inline;float:left;width:7px;height:12px;border:none;} .galon ul li.galoff {float:left;width:16px; color:#676257;background:#006000;border:1px solid #006000;text-align:center;padding:0 2px;margin:0 1px;font:bold 9pt arial;color:#fff;} .layout, .layout_v, .layout_h {float:left;width:780px;height:650px;} #nextnav {float:left;width:156px;padding-top:5px;} .nextbox {list-style-type:none;} .nextbox ul {margin:0;padding:0;list-style-type:none;} .nextbox ul li {float:left;display:inline;width:75px;background-color:#ffffff;border:1px solid #006000;text-align:center;} .nextbox ul li a {display:block;color:#006000;text-align:center;text-decoration:none;font:bold 8pt arial;} .nextbox ul li a:hover{background-color:#dbfcdb;text-decoration:none;} .nextbox ul li.nextdim{background-color:#fff;text-align:center;border:1px solid #999;color:#999;font:bold 8pt arial;text-align:center;} .screen {float:none;display:block;width:601px;min-height:546px;margin:0 auto;padding-top:10px;border:0;} .screen_v {float:left;display:inline;width:406px;min-height:546px;margin:0 10px 0 84px;padding-top:10px;border:0;} .screen_h {float:none;display:block;width:591px;min-height:440px;margin:0 auto;padding-top:5px;} #infoboxes_v {float:left;display:none;display:inline;} #infoboxes_h {display:none;margin:0 auto;margin-top:3px;width:608px;height:200px;padding-left:5px;} #infobox, #infoboxv {height:370px;width:94%;margin:0 auto;padding:20px 10px 0 10px;background-color:#fff;text-align:left;font-size:100%;color:#502812;overflow:auto;} #infoboxv {height:470px;} .infotxt {font-size:11pt;color:#006000;} .display {border:1px solid #006000;background-color:#fff;} .displayoff {border:none} .picimg, .picimg_v, .picimg_h {max-width:100%;text-align:center;} .picimg_v {height:500px;} .picimg_h {height:402px;} #pboxh, #dboxh, #oboxh {float:left;width:190px;text-align:center;margin-top:10px;} #dboxh {width:218px;text-align:left;} #pboxh, #pboxh, #oboxh, #obox {line-height:16px;} #details, #pdetails, #odetails {width:180px;margin:0 auto;} #details {text-align:left;padding-top:5px;} .datahead {width:100%;font-weight:bold;background-color:#006000;color:#f6fff4;line-height:12pt;text-align:center;} .datatxt {color:#567728;font-family:verdana;font-size:8pt;padding:4px;} #iconh {width:115px;height:20px;float:left;display:inline;padding-left:5px;} #iconv {top:10px;margin-left:6px;margin-bottom:6px;width:120px;height:23px;text-align:left;} #txtline {float:left;width:366px;line-height:20px;text-align:center;} .screen_v #txtline {width:100%;text-align:center;} #infoRow {width:100%;height:26px;text-align:center;} #extLink {float:left;width:100%;} #linkGen {float:right;width:640px;height:16px;border:none;} #linkData {width:100%;height:16px;border:none;font:normal 8pt arial;color:blue;text-align:center;background:none;} #linkG {float:right;width:40px;border:1px solid #aeaeae;margin:5px 20px 0 5px;text-align:center;} #linkG a {display:block;width:100%;line-height:18px;} .linkG {font-size:9pt;font-family:verdana;color:#aeaeae;text-decoration:none;} #linkG:hover, .linkG:hover {background:#000;color:#fff;text-decoration:none;cursor:pointer;} #copyrt {display:block;clear:both;text-align:center;margin-bottom:30px;} .title {font-size:90%;color:#567728;} /* #printpromo{float:left;width:140px;margin:15px 0 0 3px;padding:3px;background:#fff;border:2px solid #006000;text-align:center;} a.prntpromo{font-size:8pt;color:#567728;} */ /* OTHER styling */ .must {font-size:8pt;color:#ff0000;} .pageHead {font:bold 16pt arial;color:#006000;margin:40px 0 20px;text-align:center;} .subHead {font-weight:bold;font-size:12pt;color:#567728;margin:-10px 0 20px;text-align:center;} .copyright {margin:80px 0 40px 0;line-height:24px;} .display {background-color:#ffffff;border:1px solid #006000;} /* BUTTONS styling */ .btnBox1 {width:110px;height:20px;background-color:#dbfcdb;border:1px solid #006000;text-align:center;} .btnBox1 a {display:block;color:#006000;text-decoration:none;font-family:arial;font-size:90%;font-weight:bold;} .btnBox1:hover {background-color:#fff;} .btnBox {width:400px;height:16px;margin:0 auto;list-style-type:none;clear:both;} .btnBox ul {margin:0;padding:0;list-style-type:none;} .btnBox ul li {display:inline;float:left;width:120px;margin:0 2px;background-color:#fff;border:1px solid #006000;text-align:center;padding:1px 0;} .btnBox ul li a {display:block;color:#006000;text-align:center;text-decoration:none;font:bold 9pt arial;text-decoration:none;} .btnBox ul li a:hover{background-color:#dbfcdb;text-decoration:none;} .btnBox ul li.dim {background-color:#fff;text-align:center;border:1px solid #006000;color:#b89797;font:bold 9pt arial;} .btnBox2 {width:110px;height:20px;margin:6px auto 0;background:#dbfcdb;border:1px solid #006000;text-align:center;} .btnBox2 a {display:block;width:100%;color:#006000;text-decoration:none;font-family:arial;font-size:90%;font-weight:bold;} .btnBox2:hover {background-color:#fff;} .btnBox3 {width:200px;margin:30px auto;background-color:#dbfcdb;border:2px solid #006000;} .btnBox3 a {display:block;line-height:40px;font-size:10pt;font-weight:bold;text-decoration:none;text-align:center;} /* ----- round corners --------------- */ .rc6, #convert, .btnBox1, .btnBox2, .bookhedr, .display { -moz-border-radius: 6px; -webkit-border-radius: 6px; -o-border-radius: 6px; -ms-border-radius: 6px; border-radius:6px; } .rc10, .tutBox, .foto, .captxt, .screen, .screen_v, .screen_h, .btnBox3 { -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius:10px; } .rc16, .menuskin, #newPro { -moz-border-radius: 16px; -webkit-border-radius: 16px; -o-border-radius: 16px; -ms-border-radius: 16px; border-radius:16px; } #content { border-bottom-left-radius:16px; border-bottom-right-radius:16px; } /* ----- drop shadows ------------------- */ .ds5, .display, .tutBox:hover, .screen, .screen_v, .screen_h, #viewPP:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.6); } .ds20, .menuskin, #newPro:hover, .btnBox3:hover, .navbar ul li ul, #navMin { -moz-box-shadow: 0 0 20px #333; -webkit-box-shadow: 0 0 20px #333; -o-box-shadow: 0 0 20px #333; -ms-box-shadow: 0 0 20px #333; box-shadow: 0 10px 20px #333; } .ds15, .btnBox1:hover, .btnBox2:hover, .navbox0:hover, .leftBox:hover, .gal_array img:hover, #waterMark:hover, #newPro, .btnBox3, #indexbox:hover, #printpromo:hover { -moz-box-shadow: 0 0 15px #666; -webkit-box-shadow: 0 0 15px #666; -o-box-shadow: 0 0 15px #666; -ms-box-shadow: 0 0 15px #666; box-shadow: 0 0 15px #666; } hr {color:#567728;} ul {list-style-type:square;} form {display:inline;} .center {text-align:center;} .b {font-weight:bold;} .u {border-bottom:1px solid #567728;} .show {display:block;} .unshow {display:none;} /* CAPTCHA styling */ .captxt {margin:10px 5px;line-height:20px;color:#111;font-size:8pt;text-align:center;background:#ccc;padding:2px 0;} .captxt img {border:1px solid #ff5900;} #foto .capcode {width:130px;height:25px;display:inline-block;border:1px solid #ff5900;color:#666;margin:0 10px 0 0;vertical-align:top;text-transform:uppercase;text-indent:16px;font-weight:bold;letter-spacing:8px;font-size:150%;padding-top:2px;} /* CURRENCY CONVERTER STYLING */ .defttl {color:yellow;background-color:#006000;line-height:20px;font-size:10pt;font-family:verdana;font-weight:600;text-align:center;} .defbox {color:#006000;font-size:11px;font-family:verdana;line-height:15px;text-align:center;} a.deflink {color:#7c0000;font-size:12px;font-family:verdana;text-align:center;font-weight:normal} a.deflink2 {color:#ff5900;font-size:11px;font-family:verdana;text-align:center;font-weight:normal;} a.deflink3 {color:#ff5900;font-size:11px;font-family:verdana;text-decoration:underline;font-weight:normal;} .menuskin {position:absolute;width:180px;border:2px solid green;background-color:#fffffc;z-index:100;text-align:center;padding:5px;visibility:hidden;} .menuskin a {text-decoration:none;} /* ********** Global MEDIA QUERIES ************ */ @media screen and (max-width: 1000px) { #container {max-width:100vw;} #content {max-width:99.9%;} #maincontent {float:left;width:75%;margin-left:20px;} /* ---------- gallery ----------- */ #cartView {width:100px;margin-right:5px;} #galheadr {width:98%;margin:10px 1% 4px 1%;} #thumbs {width:138px;} .thumbstack {width:148px;margin:0 4px 0 8px;} #scroll {width:130px;} #nextnav {width:136px;} .nextbox ul li {width:65px;} .artbox img {max-width:99%;} .layout {width:60%;height:550px;} .layout_v {width:580px;} .layout_h {width:600px;} .screen {width:336px;height:530px;} .screen_v {width:336px;min-height:550px;} .screen_h {width:580px;min-height:440px;} .screen_v, .screen_h {margin:0 10px 0 20px;padding:5px;} #pboxh {margin-left:10px;} #dboxh {width:206px;} } @media screen and (max-width: 920px) { /* menu2 inter hamburger */ #logo {background:#f6fff4;} /* remove logo shim */ #logoL {margin:8px 0 0 0;background:#f6fff4;} #menu1, #log1, #log3 {display:none;} #menu2, #log2 {display:block;} #menu2 .n1 li {width:130px;} #navbar {margin:0 0 0 30px;} .navbar ul li, .navbar ul li.on {width:17%;} #leftbar {margin:0 0 0 3px;border-top:2px solid #567728;border-radius:15px;} } @media screen and (max-width: 800px) { #maincontent {width:70%;} #menu2 .n1 li {width:130px;} #menu2 .n1 ul {margin-left:-20px;} /* ---------- gallery ----------- */ #galhead {width:350px;} .artbox, .artboxx {max-width:136px;} .layout {width:500px;height:550px;} .layout_v, .layout_h {width:500px;height:640px;} .screen_v {width:300px;min-height:520px;margin:0 10px 0 0;} .screen_h {width:496px;min-height:440px;margin:0 10px 0 0;} .picimg_v {max-width:100%;height:480px;} .picimg_h {max-width:100%;height:400px;} .screen_h #txtline{line-height:20px;text-indent:20px;text-align:left;} #infoboxes_h {width:420px;margin:0 auto; } #pboxh {margin-left:0;} #dboxh {width:190px;} #linkGen {width:440px;} } @media screen and (max-width: 680px) { .navbar ul li a, .navbar ul li.on {font-size:80%;} .navbar ul li ul a{font-size:80%;} .navbar ul li.on.home {width:60px;height:42px;padding-top:12px;} .navbar ul li.home, .navbar ul li.home a {width:60px;height:42px;} .navbar ul li a {line-height:40px;} .navbar ul li ul li a {line-height:40px;} .navbar ul li, .navbar ul li.on {width:16.5%;} #menu2 .n0 li {width:180px;} #menu2 .n0 ul {margin-left:-20px;} #menu2 .n1 ul {margin-left:-30px;} #leftbar {margin-top:20px;} #maincontent {width:65%;} /* ---------- MINI gallery ----------- */ #galheadr {width:98%;margin:10px 1% 4px;} #galheadMin {display:block;float:left;width:100%;clear:both;margin-top:6px;text-align:center;} #cartView {width:100px;margin-right:5px;} .thumbstack {width:96%;margin:0 2% 5px 2%;clear:both;overflow-y:auto;background:#9B9180;} #thumbs {height:130px;margin:3px 0 0 0;overflow:hidden;} /* horizontal thumbs width set on page */ #pn {display:none;} .artbox {float:left;width:150px;max-height:150px;margin:0 2px 2px 2px;padding:2px 0 0 0;z-index:100;} .artbox img {max-height:100px;} .layout, .layout_v{width:99%;height:560px;} .layout_h {width:99%;height:720px;} .screen_v {width:60%;min-height:550px;margin:0 10px 0 20px;} .screen_h {min-height:440px;margin:0 auto;} .picimg_v {min-height:500px;} .picimg_h {min-height:380px;} } @media screen and (max-width: 590px) { #logo {display:none;} #logo2 {display:block;} #menu2 .n0 ul {margin-left:-40px;} #menu2 .n1 ul {margin-left:-60px;} .navbar ul li, .navbar ul li.on {width:16%;} #maincontent {width:62%;} /* ---------- min gallery ----------- */ .layout_h {width:99%;} #screen {width:98%;} .screen_h {max-width:500px;min-height:440px;margin:0 auto;} .picimg_h {max-width:99%;min-height:380px;} #pic {max-height:380px;} } @media screen and (max-width: 530px) { #maincontent {width:96%;margin-left:2%;} .navbar ul li, .navbar ul li.on {width:15%;} #leftbar {display:none;} #leftbarMin {display:block;margin-bottom:30px;} .leftBox {width:96%;margin-bottom:10px;border:1px solid #fff;background:#fff;} /* ---------- min gallery ----------- */ #infoboxes_h {width:200px;height:460px;margin:0 20%;} #pboxh {margin-left:0;} #dboxh {width:190px;} .screen_h {max-width:98%;max-height:434px;margin:0 1%;} .picimg_h {max-width:100%;max-height:380px;} #pic {max-height:100%;} .screen_h #txtline{float:left;width:70%;} #infoboxes_h {width:390px;margin:0 auto;} #pboxh {margin-left:5px;} #dboxh {width:190px;} #linkG {clear:both;} #linkGen {float:left;width:98%;margin:0 1%;} } @media screen and (max-width: 480px) { /* change logo & menus */ #logo3 {display:block;} #logo2, #menu2 {display:none;} #navbar {margin:0;} #dw_min, #navMin {display:block;} .navbar ul li a {font-size:100%;font-family:verdana;} .layout, .layout_h{height:680px;} .screen_h #txtline{width:58%;text-indent:0;} #infoboxes_h {height:240px;} #pboxh {margin-left:0;} #dboxh {width:190px;} .screen_h #txtline{width:68%;} } @media screen and (max-width: 420px) { .layout, .layout_h{height:890px;} .screen_h #txtline{width:94%;text-indent:0;margin:4px 3% 0;text-align:center;font-size:90%;background:#fff;border:1px solid #666;border-radius:5px; } #infoboxes_h {width:200px;height:460px;} #pboxh {margin-left:0;} #dboxh {width:190px;} } @media screen and (max-width: 350px) { #logo2 {display:none;} #logo3 {display:block;} }