1: /*
  2:  
  3:  File:browser.css
  4:  
  5:  Abstract: Style rules for the Simple Browser sample - Modified for FreeNATS Sept 08
  6:  
  7:  Version: 1.0
  8:  
  9:  Disclaimer: IMPORTANT:  This Apple software is supplied to you by 
 10:  Apple Inc. ("Apple") in consideration of your agreement to the
 11:  following terms, and your use, installation, modification or
 12:  redistribution of this Apple software constitutes acceptance of these
 13:  terms.  If you do not agree with these terms, please do not use,
 14:  install, modify or redistribute this Apple software.
 15:  
 16:  In consideration of your agreement to abide by the following terms, and
 17:  subject to these terms, Apple grants you a personal, non-exclusive
 18:  license, under Apple's copyrights in this original Apple software (the
 19:  "Apple Software"), to use, reproduce, modify and redistribute the Apple
 20:  Software, with or without modifications, in source and/or binary forms;
 21:  provided that if you redistribute the Apple Software in its entirety and
 22:  without modifications, you must retain this notice and the following
 23:  text and disclaimers in all such redistributions of the Apple Software. 
 24:  Neither the name, trademarks, service marks or logos of Apple Inc. 
 25:  may be used to endorse or promote products derived from the Apple
 26:  Software without specific prior written permission from Apple.  Except
 27:  as expressly stated in this notice, no other rights or licenses, express
 28:  or implied, are granted by Apple herein, including but not limited to
 29:  any patent rights that may be infringed by your derivative works or by
 30:  other works in which the Apple Software may be incorporated.
 31:  
 32:  The Apple Software is provided by Apple on an "AS IS" basis.  APPLE
 33:  MAKES NO WARRANTIES, EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION
 34:  THE IMPLIED WARRANTIES OF NON-INFRINGEMENT, MERCHANTABILITY AND FITNESS
 35:  FOR A PARTICULAR PURPOSE, REGARDING THE APPLE SOFTWARE OR ITS USE AND
 36:  OPERATION ALONE OR IN COMBINATION WITH YOUR PRODUCTS.
 37:  
 38:  IN NO EVENT SHALL APPLE BE LIABLE FOR ANY SPECIAL, INDIRECT, INCIDENTAL
 39:  OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
 40:  SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
 41:  INTERRUPTION) ARISING IN ANY WAY OUT OF THE USE, REPRODUCTION,
 42:  MODIFICATION AND/OR DISTRIBUTION OF THE APPLE SOFTWARE, HOWEVER CAUSED
 43:  AND WHETHER UNDER THEORY OF CONTRACT, TORT (INCLUDING NEGLIGENCE),
 44:  STRICT LIABILITY OR OTHERWISE, EVEN IF APPLE HAS BEEN ADVISED OF THE
 45:  POSSIBILITY OF SUCH DAMAGE.
 46:  
 47:  Copyright (C) 2008 Apple Inc. All Rights Reserved.
 48:  
 49:  */
 50: 
 51: /* ==================== TOP-LEVEL CONTAINERS ==================== */
 52: 
 53: body {
 54:   width: 320px;
 55:   margin: 0px;
 56:   padding: 0px;
 57:   background-image: url('../images/iphone/background_stripes.png');
 58:   background-repeat: repeat;
 59:   font-family: Helvetica;
 60:   /* ensure that we don't get the default callout following a long touch on
 61:   an element, which is a default behavior in Mobile Safari */
 62:   -webkit-touch-callout: none;
 63:   /* disable the Mobile Safari default behavior to adjust font size automatically
 64:   to improve readability */
 65:   -webkit-text-size-adjust: none;
 66: }
 67: 
 68: /*
 69: when the orientation changes to landscape mode, the body is assigned the .landscape
 70: class so that we can easily change metrics and other properties via simple CSS matching
 71: */
 72: body.landscape {
 73:   width: 480px;
 74: }
 75: 
 76: #browser {
 77:   /* ensure we always fill the whole screen */
 78:   min-height: 416px;
 79: }
 80: 
 81: body.landscape #browser {
 82:   min-height: 268px;
 83: }
 84: 
 85: /* ==================== HEADER ==================== */
 86: 
 87: #header {
 88:   position: relative;
 89:   height: 40px;
 90:   background-image: url('../images/iphone/header_middle.png');
 91:   border-bottom: 1px solid rgb(45, 54, 66);
 92: }
 93: 
 94: .button {
 95:   /* use absolute positioning and transforms as these will be subject to hardware transitions */
 96:   position: absolute;
 97:   -webkit-transform: translate(0px, 0px);
 98:   /* the buttons should be displayed on top of the titles so that they can always receive touches */
 99:   z-index: 1;
100:   /* set up the font appearance */
101:   font-size: 12px;
102:   font-weight: bold;
103:   text-align: center;
104:   color: white;
105:   text-shadow: rgba(0, 0, 0, .6) 0px -1px 0px;
106:   /* set up the chrome background */
107:   -webkit-border-image : url('../images/iphone/back_button.png') 0 4 0 13;
108:   border-width : 0 4px 0 13px;
109:   padding-top: 7px;
110:   top: 5px;
111:   padding-right: 4px;
112:   /* base metrics used to ensure a minumum size and specify a max size that can be used to trim the contents */
113:   min-width: 40px;
114:   max-width: 60px;
115:   height: 23px; 
116:   /* enfore trimming if the label is too long */
117:   white-space : nowrap;
118:   overflow : hidden;
119:   text-overflow: ellipsis;
120: }
121: 
122: body.landscape .button {
123:   max-width: 90px;
124: }
125: 
126: /* touched state for the buttons */
127: .button:active {
128:   -webkit-border-image : url('../images/iphone/back_button_touched.png') 0 4 0 13;
129: }
130: 
131: .title {
132:   /* use absolute positioning and transforms as these will be subject to hardware transitions */
133:   position: absolute;
134:   -webkit-transform: translate(0px, 0px);
135:   /* base metrics */
136:   left: 75px;
137:   height: 31px;
138:   margin-top: 7px;
139:   /* the titles should be displayed below the button so that they don't receive touches */
140:   z-index: 0;
141:   /* set up the font appearance */
142:   font-size: 16pt;
143:   font-weight: bold;
144:   color: white;
145:   text-shadow: rgba(0, 0, 0, .6) 0px -1px 0px;
146:   /* enfore trimming if the label is too long */
147:   white-space : nowrap;
148:   overflow : hidden;
149:   text-overflow: ellipsis;
150: }
151: 
152: /* ==================== MAIN PAGES CONTENT ==================== */
153: 
154: #pages_container > div {
155:   position: absolute;
156:   /*
157:   add a default transform so that the contents of the pages
158:   are already composited as hardware elements and will animate
159:   smoothly later on when we launch transitions
160:   */
161:   -webkit-transform: translate(0px,0px);
162: }
163: 
164: ul {
165:   width: 300px;
166:   padding: 0px;
167:   margin: 10px 0px 6px 10px;
168:   font-size: 18px;
169:   font-weight: bold;
170: }
171: 
172: body.landscape ul {
173:   width: 460px;
174: }
175: 
176: li {
177:   /* height: 32px; */
178:   list-style-type: none;
179:   background-color: white;
180:   border-style: solid;
181:   border-width: 1px 1px 0px 1px;
182:   border-color: rgb(171,173,176);  
183:   margin: 0px;
184:   padding-top: 14px;
185:   padding-left: 10px;
186:   padding-right: 20px;
187:   padding-bottom: 14px;
188:   /* ensure that long pieces of text get trimmed */
189:   white-space : nowrap;
190:   overflow: hidden;
191:   text-overflow: ellipsis;
192: }
193: 
194: /*
195: this matches the first list item, which needs rounding in the top corners
196: and no bottom border as the item below will already draw a border at its top
197: */
198: li:first-child {
199:   -webkit-border-top-left-radius: 8px;
200:   -webkit-border-top-right-radius: 8px;
201:   border: 1px solid rgb(171,173,176);
202:   border-bottom-width: 0;
203: }
204: 
205: /*
206: this matches the last list item, which needs rounding in the bottom corners
207: and a bottom border
208: */
209: li:last-child {
210:   -webkit-border-bottom-left-radius: 8px;
211:   -webkit-border-bottom-right-radius: 8px;
212:   border: 1px solid rgb(171,173,176);
213:   margin-bottom: 5px;
214: }
215: 
216: /*
217: list items with the .group class are those that can be tapped to drill
218: further down and therefore need an arrow in the background to indicate that
219: */
220: li.group {
221:   background-image: url('../images/iphone/chevron.png');
222:   background-repeat: no-repeat;
223:   background-position: 280px 18px;
224: }
225: 
226: li.grouptitle {
227: 	font-weight: bold;
228: 	/* background-image: url('../images/iphone/header_middle.png'); */
229: 	background: #a0a0e0;
230: 	color: white;
231: 	font-size: 14pt;
232: 	}
233: 
234: body.landscape li.group {
235:   background-position: 440px 18px;
236: }
237: 
238: 
239: 
240: body.landscape li.group:active {
241:   background-position: 440px 18px, 0 0;
242: }
243: 
244: b.al-1 { color: black; }
245: b.al0 { color: green; }
246: b.al1 { color: orange; }
247: b.al2 { color: red; }
248: 
249: i.subtext { font-size: 8pt; color: #909090; }
250: 
251: div.sectitle { font-size: 10pt; color: black; font-weight: bold; margin-top: 10px; }
252: