| Step 1: |
*/
iframe { overflow:hidden; }
#topbanner { height:98px; }
#sidebarcontact { width:185px; height:340px; display:block; text-align:left;}
#sidebartranslate { width:170px; height:50px; display:block; text-align:left;}
#sidebardocumentation { width:170px; height:800px; display:block; text-align:left;}
#sidebarsmldoc { width:170px; height:1050px; display:block; text-align:left;}
#sidebardownloads { width:200px; height:725px; display:block; text-align:left;}
#sidebargallery { width:170px; height:700px; display:block; text-align:left;}
#sidebargeodata{ width:170px; height:400px; display:block; text-align:left;}
#sidebarhome { width:185px; height:1200px; display:block; text-align:left;}
#sidebarhowtobuy{ width:170px; height:200px; display:block; text-align:left;}
#sidebarnews{ width:170px; height:400px; display:block; text-align:left;}
#sidebaronlinemaps { width:180px; height:650px; display:block; text-align:left;}
#sidebarproducts{ width:185px; height:1000px; display:block; text-align:left;} /* TODO to widen, need to anjust mainContent (in @media screen too); would need separate mainContent settings for each sidebar */
#sidebarresellers{ width:170px; height:400px; display:block; text-align:left;}
#sidebarsupport{ width:185px; height:560px; display:block; text-align:left;}
#sidebarusetntfor {width:185px; height:800px; display:block; text-align:left;}
#footeriframe {width:100%; height:60px; display:block; text-align:left;} /* TODO adjust for height of footer ; /*see also #footer */
#alltutorialsiframe {width:100%; height:100px; display:block; text-align:left;}
/* TOP BANNER AND NAVIGATION copied to top includes */
#banner {
clear:both;
overflow:hidden;
display:block;
background:#489fd2;
width:100%;
border:#489fd2 thin solid;
/* Note: This gradient may render differently in browsers that don't support the unprefixed gradient syntax */
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(bottom left, #2391D2 0%, #9CCDE6 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(bottom left, #2391D2 0%, #9CCDE6 100%);
/* Opera */
background-image: -o-linear-gradient(bottom left, #2391D2 0%, #9CCDE6 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0, #2391D2), color-stop(1, #9CCDE6));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(bottom left, #2391D2 0%, #9CCDE6 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to top right, #2391D2 0%, #9CCDE6 100%);}
#banner h1{
float:left;
display:inline-block;
text-align:left;
font-size:40px;
color:#fff;
font-family:Tahoma, Verdana; /* sans-serif has I with legs */
margin: .25em 0 0 0;
padding:0;}
#banner img { margin: 0; box-shadow:none; }
#banner img#logo {
float:left;
display:inline-block;
text-align:left;
width:100px;
height:auto;
padding-top:10px;}
#bannerSearchForm {
float:right;
display:inline-block;
text-align:right;
height:auto;
padding:30px 10px 0px 0px;
width:30%;}
#bannerSearchButton {
clear:both;
display:inline-block;
float:right;
color:#fff;
font-weight:normal;
font-size:1em;
cursor:pointer;
width:30px; }
#bannerSearchField {
width:150px;
color:#333;
margin:4px 0px 0px 0px;
padding:2px 1px 0px 1px;
font-size:8pt;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px; }
#primaryNavigation {
clear:both;
display:block;
font-size:.75em;
line-height:100%;
font-weight:bold;
height:100%;/* crr removed 19Feb2016 */
/*height:24px; crr 19Feb2016 */
text-align:center; /* crr added 19Feb2016 */
width:100%;
margin-bottom:0px;
-webkit-padding-start: 0px; /* so it doesn't shift to margin 40px */}
#primaryNavigation li {
display:inline-block;
vertical-align:middle;
margin:0 4px 0 4px;
margin:0 .5% 0 .5%;
width:auto; }
#primaryNavigation a {
font-family:Arial, Helvetica, sans-serif;
display:inline-block;
color:#fff;
text-decoration:none;
padding:.4375em 5px .4375em 5px; }
#primaryNavigation a:visited {background:#489fd2;color:#FFFFFF;}
#primaryNavigation a:hover {background:#489fd2;color:#FFFFFF;}
#primaryNavigationMain a { text-decoration:underline; font-size:1.25em; padding:5px;}
#homelink a {color:#fff; }
#homelink a:visited {background:none;color:#FFFFFF;}
#homelink a:hover {background:none;color:#FFFFFF; }
#homelink a { text-decoration: none; font-size:1em; }
/* end copied to top includes */
#secondaryNavigation {
font-size:.75em; /* .75 = 12 px */
line-height: 1.75em; /* 21 / 12px = 1.75 */
color:#333; /* #333; near black */
margin: 0 .5em 0 .5em;
display:inline-block;
overflow:hidden;
margin-left:auto;margin-right:auto;
text-align:left;
vertical-align:top;
list-style-type: none;
width:170px;
line-height:1;
padding-left: 40px; }
.h3nav { /* secondary navigation headings */
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
display: block;
font-size: 1.25em; /* 14px */
line-height:1em;
font-weight: bold;
margin: 1.5em 0 .25em 0;
color:#333; /* #333; near black */ }
.h4nav {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
display: block;
font-size: 1.125em;
line-height:1.25em; /* 21px / 12px = 1.75*/
font-weight: bold;
margin: 0 .5em .375em 5px; /* CHANGED */
color:#333; /* #333; near black */ }
.nav {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:1.125em; /* .75 = 12 px */
line-height: 1.75em; /* 21 / 12px = 1.75 */
line-height: 1.5em; /* default 24px, 1em = 14px???*/
margin: 0 .5em 0 5px;
color:#333; /* #333; near black */ }
.nav a {font-weight:normal}
.nav4 { /* CHANGED - ADDED */
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:1.125em; /* .75 = 12 px */
line-height: 1.75em; /* 21 / 12px = 1.75 */
line-height: 1.5em; /* default 24px, 1em = 14px???*/
margin: 0 .5em 0 15px;
color:#333; /* #333; near black */ }
.navTopM {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:1.125em; /* .75 = 12 px */
line-height: 1.75em; /* 21 / 12px = 1.75 */
line-height: 1.5em; /* default 24px, 1em = 14px???*/
margin: .5em .5em 0 5px;
font-weight: normal;
color:#333; /* #333; near black */}
.navSmall {
font-weight:normal;
font-style:italic;
font-size:11px; }
.navSmall a {font-weight:normal}
.navNew {
color: #007a00;
font-weight:bold;}
.navTranslate{ margin: .5em .5em 1em 5px; height:32px; width:100px}
.goog-te-menu-value {font-weight:normal} /* so the word 'translate' in the navigation is not bold */
/* GRIDS - horizontal blocks*/
#mainContent {
font-size:1em;
display:inline-block;
float:right;
overflow: hidden;
text-align:left;
margin-right:1%;
width:80%; /* CHANGED 20feb2016 works with media screen section below, determines distance between mainContent and sidebar */
}
.container {
clear:both;
display:inline-block;
margin-left:auto;
margin-right:auto;;
text-align:left;
width:100%;
}
.containerC {
clear:both;
display:inline-block;
float:center;
text-align:center;
width:100%;}
.container h1, h2, h3 {text-align:left;}
.columns2 {
-webkit-column-count:2;
-moz-column-count:2;
column-count:2;
vertical-align:top;
width:100%;
height:auto;}
.columns3 {
-webkit-column-count:3;
-moz-column-count:3;
column-count:3;
vertical-align:top;
width:100%;
height:auto; }
.columns3 p {display: inline-block}
.columns4 {
-webkit-column-count:4;
-moz-column-count:4;
column-count:4;
vertical-align:top;
width:100%;
height:auto; }
.columns{display:inline-block;width:100%;} /* for items within columns so top of columns align */
.keeptogether {
display: inline-block;
width: auto;
}
/* grid-x where x = width of column or number of columns per page */
/* i.e. grid-3 can be used in 3 div tags each containing an image to display them across the page */
/* grid-3 can be used in a div around an image 1/3 the width of the page, add wrap class if you want to wrap subsequent paragraph */
.grid-1 { /* 1 column */
display:inline-block;
margin: 0 2% 1% 0;
width:100%;
}
.grid-400 {max-width:400px;} /* left over from mi_v1.css */
.grid-600 {max-width:500px;min-width:300px;}/* left over from mi_v1.css */
.grid-3 { /* 3 columns when browser at normal width*/
display:inline-block;
margin: 0 2% 1% 0;
width:30%;
float:left;
}
.text-grid { /* use actual image size to determine width, image stays same size */
display:inline-block;
float:left;
margin: 0 2% 1% 0; }
.text-grid0 { /* 2 columns */
margin: 0 8px 0 0; /* changed */
width:74%;
float:left; }
.text-grid1 { /* 2 columns */
margin: 0 8px 0 0; /* changed */
width:65%;
float:left; }
.text-grid2 { /* 2 columns */
margin: 0 8px 0 0; /* changed */
width:49%;
float:left; }
.text-grid2R { /* 2 columns */
margin: 0 0 0 0; /* changed */
width:49.5%;
float:right; }
.text-grid3 { /* 2 columns */
margin: 0 8px 0 0; /* changed */
width:32%;
float:left; }
.text-grid3R { /* 2 columns */
margin: 0 0 0 0; /* changed */
width:32.3%;
float:right; }
.text-grid4 { /* 2 columns */
margin: 0 8px 0 0; /* changed */
width:24%;
float:left; }
.text-grid4R { /* 2 columns */
margin: 0 0 0 0; /* changed */
width:24.25%;
float:right; }
[class*='text-grid'] {
display:inline-block;
padding:0px;
vertical-align:top; }
[class*='grid-2icon'] img {width:auto;vertical-align:bottom; }
[class*='grid-2icon'] h3 {margin-bottom:5px }
/* to display images in a row */
.image-grid { /* use actual image size */
display:inline-block;
margin: 0 2% 1% 0;
font-size:1em; }
.image-grid-250 { /* for div containing 250px wide image */
display:inline-block;
margin: 0 2% 1% 0;
font-size:1em;
width: 250px;
max-width:250px; }
.grid { /* use actual image size to determine width, image stays same size */
display:inline-block;
float:left;
margin: 0 2% 1% 0; }
.grid img {width:auto;}
.img-800 {max-width:800px;min-width:200px;} /* use with image-grd */
.img-400 {max-width:400px;min-width:200px;} /* use with image-grd */
.img-300 {max-width:300px;min-width:200px;} /* use with image-grd */ /* doesn't have to be image, replace with width-300 */
.width-800 {max-width:800px;min-width:200px;} /* use with image-grd */
.width-600 {max-width:600px;min-width:200px;} /* use with image-grd */
.width-550 {max-width:550px;min-width:200px;} /* use with image-grd */
.width-500 {max-width:500px;min-width:200px;} /* use with image-grd */
.width-450 {max-width:450px;min-width:200px;} /* use with image-grd */
.width-400 {max-width:400px;min-width:200px;} /* use with image-grd */
.width-300 {max-width:300px;min-width:200px;} /* use with image-grd */
.width-200 {max-width:200px;min-width:150px;} /* use with image-grd */
.image-grd {
margin: 0 4px 4px 0;
width:100%;
margin: 0 2% 1% 0;}
[class*='image-grd'] img { /* remove? */
margin: 0 4px 4px 0;
width:100%;
margin: 0 2% 1% 0;}
/* ***use this in a div if want to wrap next p around image; */
/* use this in a div containing an img if want to wrap next p around it; use with grid-2 or grid-3 to determine space for image*/
[class*='grid'] img {
margin: 0 4px 4px 0;
width:auto; /*changed from 100% */
}
.grid-3 img {
width:100%;
}
[class*='wrapR'] {
display:inline-block;
float:left; /* lets next paragraph wrap around it */
margin: 0 3% 10px 1%; } /* CHANGED home page is 0 3% 10px 3% */
[class*='wrapL'] {
display:inline-block;
float:right; /* lets next paragraph wrap around it */
margin: 0 3% 10px 3%; }
[class*='wrap'] img {
width:100%;
height: auto; /* overflow:hidden; with this on, right shadow is missing? */}
.wrapWidth {max-width:500px;min-width:300px;}
/* LISTS */
ul {list-style-type: none;
display: inline-block;
list-style-position:inside;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px; /* took out for primary navigation shift problem */
-webkit-padding-start: 0px;
vertical-align: top;}
ol {list-style-type: none;
display:list-item;
list-style-position:inside;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px; /* took out for primary navigation shift problem */
-webkit-padding-start: 0px;
vertical-align: top;}
ol li {width:100%;display: list-item; text-align: -webkit-match-parent;list-style-type:decimal;}
ol.alpha li {width:100%;display: list-item; text-align: -webkit-match-parent;list-style-type:lower-alpha;}
ul li {width:100%;}
ul.bullet {list-style-type: disc;}
ul.bullet li {display: list-item; text-align: -webkit-match-parent;}
ul.noBullet {list-style-type: none;}
ul.noBullet li {display: list-item; text-align: -webkit-match-parent;}
.listH { /* horizontal list */
float:left;
vertical-align: middle;
text-align:center;
font-size: .875em;
line-height:.875em;
font-style: italic;
font-variant: small-caps;
width:100%;
margin: 5px 1em 21px 0;
display:inline-block;
list-style-type: none;
-webkit-margin-before: 10px; /* CHANGED */
-webkit-margin-after: 0;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
-webkit-padding-start: 0; }
.listH li {
display:inline-block;
margin: 0 2% 0 0; width:auto; } /* /geodata-htm/imageTilesets.htm */
.listH li img {
margin-bottom:2px;margin-right:2px; }
.listH2 { margin-bottom:.5em; line-height:.875em; }
ul.width100 {width:100%;} /* if I don't set width on ul and li width to 100% the width of list is unpredictable */
ul.width95 {width:95%;} /* if I don't set width on ul and li width to 100% the width of list it extends over the right of my div ? for some reason I have to set this in the */
ul.width95 li {width:95%;}
ul.widthIndent2 {width:92%;} /* if I don't set width on ul and li width to 100% the width of list it extends over the right of my div ? for some reason I have to set this in the */
ul.widthIndent2 li {width:92%;}
/* use to '0 out' bottom margin if last paragraph or item, i.e if p enclosed by div and both have bottom margins */
.clearB { padding-bottom:0px; margin-bottom:0px; /* allow 2px for bottom shaddow */ }
.clearAll { padding:0px; margin:0px; /* */ }
.clearBimage { padding-bottom:0px; margin-bottom:2px; /* allow 2px for bottom shaddow */ }
.clearT { margin-top:0px; padding-top:0px;}
.clearR { margin-right:0px; padding-right:0px;}
.clearL { margin-left:0px; padding-left:0px;}
.clearMarginT { margin-top:0px;}
.clearMarginL { margin-left:0px; }
.clearMarginR2px { margin-right:2px; }
.clearMarginR { margin-right:0; padding-right:0}
.setMarginB { margin-bottom:1em; }
.setMarginT { margin-top:1em; }
.setMarginT2 { margin-top:2em; }
.setMarginTsmall { margin-top:.5em; padding-top:0em; }
.setT2 {margin-top:1em; padding-top:1em}
.setT4 {margin-top:2em; padding-top:2em}
.setH2 { margin-top:21px; padding-top:7px;}
.setMarginL10pc { margin-left:10px; }
.setMarginR10px { margin-right:10px; }
.setMarginR1em { margin-right:1em; }
.setMarginR2em { margin-right:2em; }
.setMarginR4em { margin-right:4em; }
.setPaddingB { padding-bottom:1em; }
.setPaddingT { padding-top:1em; }
.setPadding { padding:1em 1em 1em 1em; }
.setMargin { padding:1em 1em 1em 1em; }
.indent1 {padding-right:1em; padding-left:1em; margin-right:0; margin-left:0; width:95%;} /* added */
.indent2 {padding-right:1em; padding-left:2em; margin-right:0; margin-left:0} /* added */
.indent2b {padding-right:0; padding-left:0; margin-right:1em; margin-left:2em} /* added */
.indent2 p {padding-right:4em}
.indent3 {padding-right:1em; padding-left:3em; margin-right:0; margin-left:0} /* added */
.indent5 {padding-right:1em; padding-left:5em; margin-right:0; margin-left:0} /* added */
.floatR {float:right}
.floatL {float:left}
.floatC {margin-left:auto;margin-right:auto;width:70%;} /* *** there is no float center, if 100% wide then no affect */
.floatOverflow {overflow:hidden} /* always add this to the div containing a floating div */
.floatClear {clear:both} /* to clear floats */
.alignR {text-align:right}
.alignL {text-align:left}
.alignC {text-align:center}
.center {text-align:center;}
div.centerDiv {width:90%;display:table; margin: 0 auto; text-align:center}
.noshadow { box-shadow:none; }
.imageA { display:inline-block; } /* for a tags - an anchor around an image */
* { max-width:1900px;}
.imageValignM{vertical-align:middle; }
.imageLarge {width:95%;}
.background {background:#e8f1f6; } /* blue */
.backgroundg {background:#e5ffe5;} /* green */
.left {text-align:left;}
.inlineBlock {display:inline-block;} /* CHANGED */
.clearBoth {clear:both; display:block;} /* CHANGED */
.larger {font-size:1.125em; font-weight:bold;}
.larger2 {font-size:1.25em; font-weight:bold;}
.smalle {font-size:.875em; font-weight:normal;}
.smaller {font-size:.75em; font-weight:normal;}
.smaller2 {font-size:.625em; font-weight:normal;}
.normal {font-style: normal;}
.italic {font-style: italic;}
.georgia {font-family:Georgia, 'Times New Roman', Times, serif;} /* font-size:13px */
.nonbold {font-weight:normal;}
.bold {font-weight:bold;}
.new {color: #007a00; font-weight:bold;} /* green */
/* FOOTER */
#footer {
clear:both;
display:block;
float:left;
width:100%;
height:55px; /*see also #footeriframe */
border-bottom: #489fd2 thin solid;
border-top: #489fd2 thin solid;
color:#333;
}
#footer p {
font-size:.875em;
text-align:center;
margin:0;
padding:0;
}
#pageUpdated {
clear:both;
display:block;
float:right;
font-size:.625em;
color:#333;
font-family:Verdana, Geneva, sans-serif;
width:auto;
}
/* RESPONSIVE DESIGN */
/* min-width is true if viewport has a width greater or equal to X
max-width is true if viewport has a width less or equal to X */
@media screen and (min-width: 800px) {
.single{
-webkit-column-count:2;
-moz-column-count:2;
column-count:2; }
.columns2 {
-webkit-column-count:2;
-moz-column-count:2;
column-count:2; }
.columns3 {
-webkit-column-count:3;
-moz-column-count:3;
column-count:3; }
}
@media screen and (max-width: 1200px) {
#mainContent {width:76%;} /* CHANGED 20feb2016*/
.wrapR-700 {margin-left:auto;margin-right:auto;;}
.wrapL-700 {margin-left:auto;margin-right:auto;;}
.grid-2{
-webkit-column-count:1;
-moz-column-count:1;
column-count:1; }
.columns3 {
-webkit-column-count:2;
-moz-column-count:2;
column-count:2; }
.columns4 {
-webkit-column-count:3;
-moz-column-count:3;
column-count:3; }
}
@media screen and (max-width: 1000px) {
#mainContent { width:74%; } /* CHANGED 20feb2016*/
}
@media screen and (max-width: 900px) {
#mainContent {width:70%;} /* CHANGED 20feb2016*/
.columns2 { /* CHANGED */
-webkit-column-count:1; /* CHANGED */
-moz-column-count:1; /* CHANGED */
column-count:1; } /* CHANGED */
.columns3 {
-webkit-column-count:1;
-moz-column-count:1;
column-count:1; }
[class*='text-grid'] {width:100%; float:left}
}
@media screen and (max-width: 800px) {
#mainContent { width:69%; } /* CHANGED 20feb2016*/
.columns2 {
-webkit-column-count:1;
-moz-column-count:1;
column-count:1; }
.columns3 {
-webkit-column-count:1;
-moz-column-count:1;
column-count:1; }
.columns4 {
-webkit-column-count:2;
-moz-column-count:2;
column-count:2; }
}
@media screen and (max-width: 750px) {
#mainContent { width:77%; } /* CHANGED 20feb2016*/
}
@media screen and (max-width: 700px) {
#mainContent { width:65%; } /* CHANGED 20feb2016*/
}
@media screen and (max-width: 660px) {
#mainContent { float: none; display:inline-block; width:80%;} /* CHANGED 20feb2016*/
#secondaryNavigation { width:80%;}
#sidebar { width:80%;}
.container { width:100%; }
#footer {font-size: .75em; }
#bannerSearchForm {width:190px;}
}
@media screen and (max-width: 578px) { /* 1 column */
#bannerSearchForm {padding-top:5px;}
}
@media screen and (max-width: 500px) { /* 1 column */
h2 {clear:both; display:block;}
p {clear:both; display:block;}
img {text-align:center;}
[class*='wrapR'] {margin-left:auto;margin-right:auto;}
[class*='wrapL'] {margin-left:auto;margin-right:auto;}
.columns4 {
-webkit-column-count:1;
-moz-column-count:1;
column-count:1; }
#footer {font-size: .75em; }
#bannerSearchForm {
clear:both;
display:inline-block;
text-align:center;
float:none;
width:190px;
padding-top:5px;
}
/*table tr td {font-size:.75em;}
ol li {font-size:.75em;}*/
}
@media screen and (max-width: 400px) { /* 1 column */
#banner img#logo {width:75px;}
#banner h1 { font-size: 30px; }
/*table tr td {font-size:.75em;}
ol li {font-size:.75em;} */
}
.goog-te-gadget-simple {
background-color: #FFFFFF;
border-color: #9B9B9B #D5D5D5 #E8E8E8;
border-left: 1px solid #D5D5D5;
border-style: solid;
border-width: 1px;
cursor: pointer;
display: inline-block;
font-size: 8pt;
padding-bottom: 2px;
padding-top: 1px;
text-transform:lowercase;
}
.no-js { }
.ie #mainContent {width:50%;}
.lt-ie9 .goog-te-gadget-simple {
position:relative;
right:0px;}
/* ul { padding-left: 40px; /* removed here as a cludge for secondary navigation shift too soon to bottom Internet Explorer, still moves to bottom at a somewhat wide browswer width */
.lt-ie9 ul {padding-left: 0px; }
/*.lt-ie9 #secondaryNavigation { padding-left:0px; width:25%;} replaced 15 July 2014 as IE v8 had very wide sidebar */
.lt-ie9 #secondaryNavigation { padding-left:0px; width:165px;}
.lt-ie9 #sidebar { padding-left:0px; width:165px;}
.lt-ie9 #mainContent { display:inline-block; width:70%;}
|