1 body { 2 width: auto; 3 background-color: #fff; 4 } 5 6 #content { 7 width: 98.3333333%; /* 1180 / 1200 */ 8 margin: auto; 9 text-align: center; 10 } 11 12 img { 13 margin: auto; 14 max-width: 80%; 15 margin-top: 3%; 16 } 17 18 p { 19 font: normal .875em Century Schoolbook, Helvetica, Arial, sans-serif; 20 color: #666; 21 letter-spacing: 0.05em; 22 } 23 24 p.small { 25 26 font-size: .625em; /* 10px / 16px */ 27 } 28 29 .clear { 30 clear: both; 31 } 32 33 h1 { 34 background: #333; 35 color: #FFF; 36 font: normal 3.625em/0.9 "League Gothic", "Arial Narrow", Arial, sans-serif; /* 58px / 16px */ 37 text-transform: uppercase; 38 text-align: center; 39 } 40 41 h2 { 42 font-size: 1.5em /* 24px / 16px */; 43 font-style: italic; 44 font-weight: normal; 45 font-family: Futura, Helvetica, Arial, sans-serif; 46 } 47 48 a { 49 color: orange; 50 } 51 52 #statement { 53 float: left; 54 width: 49.189815%; 55 } 56 57 #photos { 58 float: right; Macintosh HD:Users:williamwolff:SpiderOak Hive:st-joes:courses:web-desgn:sample-style.css: 1/3 59 width: 49.189815%; 60 } 61 62 hr { 63 position: absolute; 64 top: -9999px; 65 left: -9999px; 66 } 67 68 69 @media screen and (max-width: 768px) { /*for media query phones and tables in portrait mode */ 70 71 body { 72 position: relative; 73 margin: 5px; 74 width: auto; 75 background-color: #e7f6f8; 76 } 77 78 79 img { 80 margin: auto; 81 max-width: 90%; 82 margin-top: 2%; 83 } 84 85 h1 { 86 font-size: 1.25em /* 20px / 16px */; 87 font-style: italic; 88 font-weight: normal; 89 font-family: Futura, Helvetica, Arial, sans-serif; 90 } 91 92 h2 { 93 font-size: 1em /* 26px / 16px */; 94 font-style: normal; 95 font-weight: bold; 96 font-family: Futura, Helvetica, Arial, sans-serif; 97 margin: 0 0 2% 0; 98 } 99 100 p { 101 font-size:.875em; /* 14px / 16px */ 102 text-align: justify; 103 } 104 105 p.small { 106 107 text-align: center; 108 } 109 110 h1 { 111 background: #333; 112 color: #FFF; 113 font: normal 1.625em Calibri, Candara, Segeo, Optima, Arial, Helvetica, sans-serif; /* 26px / 16px */ 114 text-transform: uppercase; 115 } Macintosh HD:Users:williamwolff:SpiderOak Hive:st-joes:courses:web-desgn:sample-style.css: 2/3 116 117 #statement { 118 float: none; 119 width: auto; 120 } 121 122 #statement h1 { 123 margin-bottom: -.8em; 124 } 125 126 127 hr { 128 position: relative; 129 top: 0; 130 left: 0; 131 width: 66%; 132 } 133 134 #photos { 135 float: none; 136 position: relative; 137 width: auto; 138 } 139 140 } 141 142 @media screen and (min-width: 1048px) { 143 144 145 .second { 146 display: none; 147 } 148 149 150 } 151 Macintosh HD:Users:williamwolff:SpiderOak Hive:st-joes:courses:web-desgn:sample-style.css: 3/3.