@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: 5; dw-num-cols-tablet: 8; dw-num-cols-desktop: 12; dw-gutter-percentage: 15; 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/ */ /* Makes responsive fields. Sets size and field alignment.*/ input[type=text]{ margin-bottom: 5px; width:90%; border-radius:3px; border:1px solid #199a9f; color:#333 } input[type=submit] { margin-bottom: 5px; width: 90%; border-radius: 3px; border: 1px solid #199a9f; background-color: #BDB59E; color: #FFFFFF; font-size: 15px; cursor: pointer; } #submit:hover { background-color: black; } textarea{ width:90%; border:1px solid #199a9f; border-radius:3px; margin-bottom: 5px; resize:none; } input[type=text]:focus,textarea:focus { border-color: #4697e4; } select { margin-bottom: 5px; width: 90%; border-radius: 3px; border: 1px solid #199a9f; background-color: #BDB59E; color: #FFFFFF; font-size: 15px; cursor: pointer; } .exp_month { margin-bottom: 5px; width: 100px; border-radius: 3px; border: 1px solid #199a9f; background-color: #BDB59E; color: #FFFFFF; font-size: 15px; cursor: pointer; } .exp_year { margin-bottom: 5px; width: 65px; border-radius: 3px; border: 1px solid #199a9f; background-color: #BDB59E; color: #FFFFFF; font-size: 15px; cursor: pointer; } /* Mobile Layout: 480px and below. */ .gridContainer { margin-left: auto; margin-right: auto; width: 88.626%; padding-left: 1.1869%; padding-right: 1.1869%; background-color: #FFF; } #header { clear: both; float: left; width: 100%; display: block; } #left_column { clear: both; float: left; margin-left: 0; width: 100%; display: none; background-color: #FFFFFF; font-size: small; color: #000; padding-top: 0px; padding-right: 5px; padding-bottom: 3px; padding-left: 3px; } #form_area { clear: none; float: left; margin-left: 2.6785%; width: 100%; display: block; color: #000; } #LayoutDiv2 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #left_column_text { clear: both; float: left; margin-left: 0; width: 100%; display: none; } #left_column_image { clear: both; float: left; margin-left: 0; width: 100%; display: none; } #magazines { clear: both; float: left; margin-left: 20.5357%; width: 58.9285%; display: block; } #LayoutDiv3 { clear: both; float: left; margin-left: 0; width: 95%; display: block; } #LayoutDiv4 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #LayoutDiv5 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #LayoutDiv6 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #LayoutDiv7 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #LayoutDiv8 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #LayoutDiv9 { clear: both; float: left; margin-left: 0; width: 95%; display: block; } #thanks_text { clear: both; float: left; margin-left: 0; width: 100%; display: block; font-size: 24px; font-weight: bold; padding-left: 25px; } /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */ @media only screen and (min-width: 481px) { .gridContainer { width: 91.4836%; padding-left: 0.7581%; padding-right: 0.7581%; background-color: #FFF; } #header { clear: both; float: left; width: 100%; display: block; } #left_column { clear: both; float: left; margin-left: 0; width: 23.7569%; display: block; } #form_area { clear: none; float: left; margin-left: 1.6574%; width: 61.8784%; display: block; color: #000; } #LayoutDiv2 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #left_column_text { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #left_column_image { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #magazines { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #LayoutDiv3 { clear: both; float: left; margin-left: 0; width: 95%; display: block; } #LayoutDiv4 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #LayoutDiv5 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #LayoutDiv6 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #LayoutDiv7 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #LayoutDiv8 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #LayoutDiv9 { clear: both; float: left; margin-left: 0; width: 95%; display: block; } #thanks_text { clear: both; float: left; margin-left: 0; width: 100%; display: block; font-size: 24px; font-weight: bold; padding-left: 30px; } } /* 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: 89.0217%; max-width: 1232px; padding-left: 0.4891%; padding-right: 0.4891%; margin: auto; background-color: #FFF; } #header { clear: both; float: left; width: 100%; display: block; } #left_column { clear: both; float: left; margin-left: 0; width: 24%; display: block; padding-top: 0px; padding-right: 15px; padding-bottom: 5px; padding-left: 0px; font-size: medium; color: #000; } #form_area { clear: none; float: left; margin-left: 1.0989%; width: 70%; display: block; color: #000; } #LayoutDiv2 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #left_column_text { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #left_column_image { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #magazines { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #LayoutDiv3 { clear: both; float: left; margin-left: 0; width: 95%; display: block; } #LayoutDiv4 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #LayoutDiv5 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #LayoutDiv6 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #LayoutDiv7 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #LayoutDiv8 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #LayoutDiv9 { clear: both; float: left; margin-left: 0; width: 95%; display: block; } #thanks_text { clear: both; float: left; margin-left: 0; width: 100%; display: block; font-size: 36px; font-weight: bold; color: #BDB59E; padding-left: 30px; } } .bigredtext { font-size: 18px; color: #F00; } .bigredtext a { font-size: 18px; color: #F00; text-decoration:underline; }