@charset "UTF-8"; /* Simple fluid media Note: Fluid media requires that you remove the media's height and width attributes from the HTML http://www.alistapart.com/articles/fluid-images/ */ img, object, embed, video { max-width: 100%; } /* IE 6 does not support max-width so default to width 100% */ .ie6 img { width:100%; } /* Dreamweaver Fluid Grid Properties ---------------------------------- dw-num-cols-mobile: 2; dw-num-cols-tablet: 12; dw-num-cols-desktop: 12; dw-gutter-percentage: 25; Inspiration from "Responsive Web Design" by Ethan Marcotte http://www.alistapart.com/articles/responsive-web-design and Golden Grid System by Joni Korpi http://goldengridsystem.com/ */ /* Mobile Layout: 480px and below. */ .gridContainer { margin-left: auto; margin-right: auto; width: 81.9%; padding-left: 4.55%; padding-right: 4.55%; } #LayoutDiv1 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #TopLine { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #LayoutDiv2 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #LibraryLady { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #CompanyName { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #TrainIcon { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #Distributor { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #SecondLine { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #Links { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #LogosPlus { clear: both; float: left; margin-left: 0; width: 100%; display: block; } /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */ @media only screen and (min-width: 481px) { .gridContainer { width: 91.45%; padding-left: 0.775%; padding-right: 0.775%; } #LayoutDiv1 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #TopLine { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #LayoutDiv2 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #LibraryLady { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #CompanyName { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #TrainIcon { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #Distributor { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #SecondLine { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #Links { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #LogosPlus { clear: both; float: left; margin-left: 0; width: 100%; display: block; } } /* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */ @media only screen and (min-width: 769px) { .gridContainer { width: 88.5%; max-width: 1232px; padding-left: 0.75%; padding-right: 0.75%; margin: auto; } #LayoutDiv1 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #TopLine { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #LayoutDiv2 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #LibraryLady { clear: both; float: left; margin-left: 0; width: 32.2033%; display: block; } #CompanyName { clear: none; float: left; margin-left: 1.6949%; width: 66.1016%; display: block; color: #336632; } #TrainIcon { clear: both; float: left; margin-left: 0; width: 32.2033%; display: block; } #Distributor { clear: none; float: left; margin-left: 1.6949%; width: 66.1016%; display: block; } #SecondLine { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #Links { clear: both; float: left; margin-left: 0; width: 32.2033%; display: block; } #LogosPlus { clear: none; float: left; margin-left: 1.6949%; width: 66.1016%; display: block; } }