/*Translate is a mobile visual thesaurus: A traveler shows an image on his cell phone to indicate he needs a doctor, what he wants for lunch, etc. You navigate topics via cascading menus. You can choose menus organized by subject, or alphabetically. Both methods allow you to reach the target image screen. The phone also 'speaks' the result in the chosen search result language. We specifically demo'd for an Asian language (Japanese) so we could confirm usability for the largest probable character height.



General Mobile Notes:

1. Use pixels (px) when designing for mobiles. Handset screens sizes are in pixels, so it makes sense to design with the same unit of measurement. Start thinking of fonts sizes in pixels.

 

2. Comments refer to "small" and "large" screens. "Small" is 128px wide. "Large is 176px or wider, and is typical of Symbian 60 devices. Two screens may be physically almost identical. However, the "large" one will have more pixels. 

 

Smaller pixels increase resolution, yet also create smaller text.3. The smallest text size is "xx-small," which is approximately equal to 9px on Nokia and Opera browsers (Roman Alphabet). ACCESS NetFront can render "xx-small" as a difficult-to-read 8px on small screens and approximately 9px on larger screens (Roman Alphabet). Use "font-size: xx-small" when you need a font less than 10px. Handsets can have trouble displaying a 9px font, but will display a 9px font when you apply a "xx-small" tag. You will probably have to do your own research on what font tags a carrier supports.

 

4. Microbrowsers default DIV tags to "width:100%" unless you specify a width. DIVs are therefore stacked by default.

 

5. SPAN tags can be placed side-by-side, but, depending on usage may require a specific height and/or width. Unlike a table cell, a SPAN can collapse even though you have put something in it. The combinations of SPAN and DIV that cause a collapse vary. You have to test on an actual device in order to see what works. Adobe GoLive Preview Mode renders code that works on the desktop, but may behave differently on a phone.

 

     a. Percentages applied to SPANs are ignored by the Opera and Nokia browsers. SPANs that sit side-by-side should either have no width applied, or be given specific widths in pixels.

 

     b. A SPAN that contains an image should be set to the width of that image or slightly wider. Without a setting, the SPAN may expand to an odd width, and the image may shift inside it. There are exceptions to the rule, but until you have experience with them, use the rule for client situations.

 

6. Apply all the link styles to any link text, otherwise you will see color changes and/or underlines on some handsets. The display depends on the browser and handset configuration. Microbrowsers ignore the "a:hover" tag. Instead, a link will be outlined. Set all link tags the same unless there is a reason the User should see what pages he or she has visited.

 

7. The Opera desktop and microbrowsers read many tags identically. However, there are enough differences for you to consider the desktop display an approximation of the microbrowser.



The Translate template uses ISO 639 3-letter codes for the names of flags. The codes are as follows:



DEU (Deutsche) - German

ENG (English) - English

ESL (Espanol) - Spanish

FRA (Francais) - French

ITA (Italiano) - Italian

JPN (Japanese) - Japanese



One way to remember the codes is to think of the country codes used in websites. For example, remove the "U" from "DEU" and you have "DE." DE is the country code for German sites. The exceptionsto to the rule are English and most Asian langauges. In those cases, the code names are based on English names for the languages.

*/

body { background-color: #fff; margin: 0; padding: 0 }



/*<agl.folder "Unique_Elements" "This folder contains ungrouped elements that do not fit any particular category.">*/

	#yes { color: #fff; font-size: xx-small; font-family: sans-serif; text-decoration: none; background-color: #008000; text-align: center; display: inline; padding-right: 8px; padding-bottom: 1px; padding-left: 8px; position: relative; float: right }

	

	#no { color: #fff; font-size: xx-small; font-family: sans-serif; text-decoration: none; background-color: #b20000; text-align: center; display: inline; padding-right: 8px; padding-bottom: 1px; padding-left: 8px; position: relative; float: left }

	

	.vertical_6px /*  This tag takes the place of the small clear GIF often used in traditional HTML layouts.  */  { height: 6px }

	

	.audio { text-align: center; position: relative; bottom: 2px; float: right }

	

	.back { text-align: center; position: relative; bottom: 2px; float: left }

	

	#chosen_language { border: solid 1px }

	

	#top_link /*  This DIV separates the top left link from the main navigation.  */  { text-align: center; margin-top: 1px; margin-bottom: 2px; width: 100%; border-bottom: 1px solid #c4c4c4 }

	

	#box_96percent /*  This DIV contains the page elements. The Opera and Nokia browsers add horizontal scrolling for settings more than 96%    */  { text-align: center; width: 96% }

	

	.bracket_corner /*  This DIV creates the bracket ends of the search option bracket.  */  { height: 2px; border-right: 4px solid #000; border-left: 4px solid #000 }

	

	#box_96center /*  This DIV contains the page elements. The "126" is the box width of 126px. Use a  box that is 2 pixels less than the width of the screen you design for. Box_126 is designed for screens 128px wide.  */  { text-align: left; width: 96% }

	

	.center { text-align: center }

	

	.dialog { color: #7f7f7f; font-size: xx-small; font-family: sans-serif; text-align: center; padding-bottom: 2px }

	

	#dialog_top { color: #7f7f7f; font-size: xx-small; font-family: sans-serif; text-align: center; margin-top: 1px; padding-bottom: 6px }

/*</agl.folder>*/

/*The "go_search" tag creatse a frame around the link that returns the User to the main search options screen. The frame is an element unique to search, and therefore works well as a quick visual reminder. You can replace the text in the "go_search tag with an icon, for example, a magnifying glass. However, you should keep the frame. Small icons may not be easy to read on some smartphone and other handsets that have high-resolution screens, while the frame will be visible.*/

/*<agl.folder "Return_to_Menu_Link" "This folder contains elements associated with the link that returns the User to the Search Options screen.">*/

	#go_search /*  This tag is applied to the table cell that contains the link to the menu options. The tag includes basic text formatting.   */   { color: #000; font-size: xx-small; font-family: sans-serif; text-decoration: none; padding-right: 3px; padding-left: 3px; height: 20px }

	

	.bottom_border { line-height: 20px; border-bottom: 1px solid #000 }

	#go_search a /*  This tag includes the border so that the border will frame the text only. Adding the border to the table cell would create a frame the full width of the screen, and possibly create the impression that the frame is a purely visual element.  */  { color: #000; text-align: center; border: solid 1px #99a19d }

	

	#go_search a:hover { color: #000; font-size: xx-small; font-family: sans-serif; text-decoration: none; text-align: center; padding-right: 3px; padding-bottom: 1px; padding-left: 2px }

	

	#go_search a:active { color: #000; font-size: xx-small; font-family: sans-serif; text-decoration: none; text-align: center; padding-right: 3px; padding-bottom: 1px; padding-left: 2px }

	

	#go_search a:visited { color: #000; font-size: xx-small; font-family: sans-serif; text-decoration: none; text-align: center; padding-right: 3px; padding-bottom: 1px; padding-left: 2px }

/*</agl.folder>*/

/*The list tags apply styles to listed search options.*/

/*<agl.folder "List_Elements">*/

	.list { color: #7f7f7f; font-size: xx-small; font-family: sans-serif; text-align: left; padding-bottom: 2px; padding-left: 3px }

	

	.list a { color: #7f7f7f; font-size: xx-small; font-family: sans-serif; text-decoration: none; text-align: left; margin-bottom: 2px; margin-left: 3px }

	

	.list a:hover { color: #7f7f7f; font-size: xx-small; font-family: sans-serif; text-decoration: none; text-align: left; margin-left: 3px; padding-bottom: 2px }

	

	.list a:active { color: #7f7f7f; font-size: xx-small; font-family: sans-serif; text-decoration: none; text-align: left; margin-left: 3px; padding-bottom: 2px }

	

	.list a:visited { color: #7f7f7f; font-size: xx-small; font-family: sans-serif; text-decoration: none; text-align: left; margin-left: 3px; padding-bottom: 2px }

	

	.list_navigation { color: #000; font-size: xx-small; font-family: sans-serif; text-align: center; margin-top: 1px; padding-bottom: 2px; border-bottom: 1px solid #000 }

	

	.list_navigation a { color: #000; font-size: xx-small; font-family: sans-serif; text-align: center }

	

	.list_navigation a:hover { color: #000; font-size: xx-small; font-family: sans-serif; text-align: center }

	

	.list_navigation a:active { color: #000; font-size: xx-small; font-family: sans-serif; text-align: center }

	

	.list_navigation a:visited { color: #000; font-size: xx-small; font-family: sans-serif; text-align: center }

/*</agl.folder>*/

/*<agl.folder "Navigation_Elements">*/

	#navigation_box { text-align: left; padding-top: 2px; padding-bottom: 4px; border-bottom: 1px solid #000 }

	

	.navigation { color: #000; font-size: xx-small; font-family: sans-serif; text-align: left }

	

	.navigation a { color: #000; font-size: xx-small; font-family: sans-serif; text-decoration: none; text-align: left; padding-right: 3px; padding-left: 3px }

	.navigation a:hover { color: #000; font-size: xx-small; font-family: sans-serif; text-decoration: none; text-align: left }

	

	.navigation a:active { color: #000; font-size: xx-small; font-family: sans-serif; text-decoration: none; text-align: left }

	

	.navigation a:visited { color: #000; font-size: xx-small; font-family: sans-serif; text-decoration: none; text-align: left }

	

	.navigation_chosen { color: #fff; font-size: xx-small; font-family: sans-serif; background-color: #000; text-align: left; padding-right: 3px; padding-left: 2px }

	

/*</agl.folder>*/

/*<agl.folder "Search_Elements">*/

	.search { color: #000; font-size: xx-small; font-family: sans-serif; text-align: center; margin-top: 3px; margin-right: 15px; margin-left: 15px; border: solid 1px #99a19d }

	

	.search a { color: #000; font-size: xx-small; font-family: sans-serif; text-decoration: none; text-align: center }

	

	.search a:hover { color: #000; font-size: xx-small; font-family: sans-serif; text-decoration: none; text-align: center }

	

	.search a:active { color: #000; font-size: xx-small; font-family: sans-serif; text-decoration: none; text-align: center }

	

	.search a:visited { color: #000; font-size: xx-small; font-family: sans-serif; text-decoration: none; text-align: center }

	

/*</agl.folder>*/

/*<agl.folder "Headers">*/

	.setup_confirmed { color: #858585; font-size: large; font-family: sans-serif }

	.setup_small { color: #fff; font-size: xx-small; font-family: sans-serif; text-decoration: none; background-color: #858585; text-align: center; display: inline; padding-right: 8px; padding-bottom: 1px; padding-left: 8px; position: relative; top: 1px }

	

	.subject-header1 { color: #7f7f7f; font-size: xx-small; font-family: sans-serif; text-align: left; margin-left: 3px }

	

	.subject-header2 { color: #7f7f7f; font-size: xx-small; font-family: sans-serif; text-align: left; margin-left: 5px }

	

	.subject-header3 { color: #7f7f7f; font-size: xx-small; font-family: sans-serif; text-align: left; margin-left: 3px }

/*</agl.folder>*/



