/*This is a mobile site for collaborative creative writing, modeled after the Surrealist's drawing game. You can read what others have written, or pick up writing where someone else has left off.



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.*/



body           { color: #fff; background-color: #009b8b; text-align: center; margin: 0; padding: 0 }



#white_background  /* This DIV masks the background color on the splash screen. */ { background-color: #fff; position: absolute; top: 0; right: 0; width: 100%; height: 100% }



#splash_graphic { text-align: center; position: relative; top: 0px }

/*<agl.folder "Menu_Screen_Elements" "This folder contains items specific to the Menu screen.">*/



	#menu_box   /* This tag is set to less than 96%. Nokia browsers can add horizontal scrolling if a DIV or table is set above 96%. */  { color: #fff; font-size: xx-small; font-family: sans-serif; text-align: left; margin-top: 8px; margin-left: 5px; top: 8px; left: 5px; width: 90% }

	#entry_instructions { color: #82cec7; font-size: xx-small; font-family: sans-serif }

	.thread_name   { color: #fff; font-size: xx-small; text-decoration: none }



	.menu_item { width: 20px }



	.format_read_link { padding-right: 3px }



	.links_spacer  /* This tag adds vertical space between items in the menu. */  { padding-bottom: 5px }



/*</agl.folder>*/

/*<agl.folder "The_Entry_Elements" "This folder contains tags that are applied to "new entry" and "updated entry" screens.">*/

	.hidden_entries /*  This tag formats placeholder text that represents hidden previous entries. The traditional game uses folded paper to hide previous entries.    */  { color: #000; font-size: xx-small; font-family: sans-serif; font-style: oblique }

	#newest_entry /*  This tag formats text entered by the latest player.  */  { color: #000; font-size: xx-small; font-family: sans-serif }

	#thread_number /*  Note that most phones cannot render text above 16px.  */  { color: #000; font-size: 14px; font-family: sans-serif; font-weight: 800 }

	#description_box /*  This DIV comtains the entry.  */  { color: #fff; font-size: xx-small; font-family: sans-serif; text-align: left; position: relative; top: 11px; left: 5px; width: 90% }

	#entry_field { font-size: xx-small; font-family: sans-serif; background-color: #fff; text-align: center; position: relative; width: 100% }

	#submit  { text-align: center; margin-right: 5px }

	#thread_box /*  This DIV comtains the entry.  */  { color: #fff; font-size: xx-small; font-family: sans-serif; text-align: left; position: absolute; top: 8px; left: 5px; width: 90% }

	#write_title { border-bottom: 1px solid #fff }

	

	#end_of_thread /* This tag formats the last sentence of the previous thread as well as the text of the latest entry. The "xx-small size is approximately 9px high when rendered by the Nokia, Opera and Access browsers. The end_of_thread tag is set 2px taller, and heavier at a font-weight of 700. Though 700 approximates the the BOLD tag, some phones may not display it as clearly bold. Try font-weight 800 or 900, the maximum, if necessary. You can also try a font sixe of 12px. The faint bottom border creates a simple yet effective separation between the content and bottom navigation elements.  */  { color: #fff; font-size: 11px; font-family: sans-serif; font-weight: 700; border-bottom: 1px solid #999 }

/*</agl.folder>*/

#logo   { text-align: center }



#page_box  { text-align: center; position: absolute; top: 0; width: 90%; height: 100% }

a:link       { color: #000; font-size: 11px; font-family: sans-serif; font-weight: 400; text-decoration: none }



a:visited       { color: #000; font-size: 11px; font-family: sans-serif; font-weight: 400; text-decoration: none }



a:hover       { color: #000; font-size: 11px; font-family: sans-serif; font-weight: 400; text-decoration: none }



a:active       { color: #000; font-size: 11px; font-family: sans-serif; font-weight: 400; text-decoration: none }



#ok_button { padding-top: 3px }

