/*This is a feature film trailer containing story synopsis, actor's professional synopsis, and online credit card ticket purchasing. Theatre access is granted after validating a barcode on the on-screen receipt frame. 



Feature_Film fuses moblog elements with I-Mode style Information Architecture.



Architecture: Hub-and-Spoke, which means all pages share the Contents page as a common link. The User must return to Contents in order to go from one page to another.



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 { background-color: #fff; text-align: center; margin-top: 0; padding: 0 }

body.fmra  { color: black; font-family: serif; background-color: #eb85b7 }

body.contents  { color: black; font-family: serif; background-color: #68843a }

/*<agl.folder "Unique_Elements" "This folder contains ID tags for shared screen elements.">*/

	#box_96percent /*  This DIV contains the page elements. Use 96% if you want to cover the screen. The reason is the Small Screen Rendering (SSR) of Opera and JustFit technology of ACCESS. Both technologies squeeze page elements horizontally, though in a manner that is undetectable. However, a 100% setting will be read as oversized, an can create horizotanl scrolling. A setting of 96% can produce an extra pixel of white space on one side of the screen. It's preferable to extra scroll bars. Use 97% and 98% only if you have a user agent that detects the exact screen size of a handset. 96% works universally.



Note that the roadtrip design accounts for the potential of asymmetrical white space around the content boxes.  */  { text-align: center; width: 96% }



	#contents_box { color: #fff; font-size: xx-small; font-family: Arial; text-decoration: none; text-align: center; margin-top: 6px }



	#details_box { color: #000; font-size: xx-small; font-family: Arial, sans-serif; background-color: #fff; text-align: center; margin-top: 6px; height: 34px; min-width: 50%; max-width: 80% }



	#home_links_box { text-align: left; margin-top: 11px; margin-left: 16px }



	#return_home  { text-align: center; margin-top: 1px; margin-bottom: 8px; padding: 1px; width: 100%; border: solid 1px #ccc }

	#splash { text-align: left; margin-top: 57px; margin-left: 10px }

/*</agl.folder>*/



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

	/*You have the option to create single-character input fields, or to use wider boxes for long numbers. Single-character fields is what the user sees on desktop sites. However, BE AWARE that applying a style to each field will add to the page size.*/

	.form_gray { color: #fff; font-size: xx-small; font-family: Arial, sans-serif; background-color: #4c4c4c; text-align: left; margin-top: 3px; margin-left: 5px; padding: 3px 3px 4px }



	/*When you float a SPAN tag left or right, any graphic outside the tag will  be pushed to the opposite side. A graphic meant to be to the left of a SPAN tag with a "float: left" style must be inside another SPAN tag that also floats left.*/

	.submit_button { margin-left: 0; float: left }



	.button_spacer /*  The left margin of this tag visually creates a hierachy between the "OK" submit button and the "BACK" and "CANCEL" buttons. The space around "OK" tells the User that it is the most important of the three buttons. The ratio between the "button_spacer" margin and the left margin of the "form_gray" box is 3:1. You can use a different visual treatment for "OK." The treatment should avoid looking too busy. The tight gray space is not designed for that.   */  { margin-left: 15px; float: left }



	.divider_gray /* This DIV helps arrange information. */  { margin-top: 1px; margin-bottom: 3px; width: 100%; height: 2px; border-bottom: 1px solid #666 }



	.divider_white /* This DIV helps arrange information. */  { margin-top: 1px; margin-bottom: 3px; width: 100%; height: 2px; border-bottom: 1px solid #ccc }

	

	.form_gray a { color: #fff; font-size: xx-small; font-family: Arial, sans-serif; text-decoration: underline }



	.form_gray a:visited { color: #fff; font-size: xx-small; font-family: Arial, sans-serif; text-decoration: underline }



	.form_gray a:hover { color: #fff; font-size: xx-small; font-family: Arial, sans-serif; text-decoration: underline }



	.form_gray a:active { color: #fff; font-size: xx-small; font-family: sans-serif; text-decoration: underline }



	.form_white { color: #4c4c4c; font-size: xx-small; font-family: Arial, sans-serif; background-color: #fff; text-align: left; margin-top: 3px; margin-left: 5px; padding: 3px 3px 4px }



	.text_field_gray { color: #fff; font-size: xx-small; font-family: Arial, sans-serif; background-color: #4c4c4c; text-align: center; border: solid 1px }



	/*Two tags are required to create a form comprised of fields with single-pixel borders. The left border of each text field is also the right border of the field to the left of it. The exception is the right-most field, which has its own right border.*/

	.text_field_white { color: #4c4c4c; font-size: xx-small; font-family: Arial, sans-serif; background-color: #fff; text-align: center; border-style: solid none solid solid; border-width: 1px medium 1px 1px; border-color:  }



	.text_field_white_right { color: #4c4c4c; font-size: xx-small; font-family: Arial, sans-serif; background-color: #fff; text-align: center; border: solid 1px }

/*</agl.folder>*/



/*<agl.folder "General_Contents_Elements" "This folder contains non-forms screen elements.">*/

	.center { text-align: center; margin: 2px }

	.contents { color: #68843a; font-size: 11px; font-family: Arial, sans-serif; text-align: left; margin-right: 4px; margin-left: 4px }

	.contents a { color: #fff; font-size: xx-small; font-family: Arial, sans-serif; text-decoration: none; text-align: left }



	.contents a:visited { color: #fff; font-size: xx-small; font-family: Arial, sans-serif; text-decoration: none; text-align: left }

	.contents a:hover { color: #fff; font-size: xx-small; font-family: Arial, sans-serif; text-decoration: none; text-align: left }

	.contents a:active { color: #fff; font-size: xx-small; font-family: Arial, sans-serif; text-decoration: none; text-align: left }

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



	.home_link { margin-top: 2px }



	.left { margin-left: 4px; height: 100%; float: left }



	.link_element_box { color: #000; font-size: xx-small; font-family: Arial, sans-serif; text-align: left; padding: 1px }



	.telephone /*  This tag applies a style to theatre telephone numbers. Note the href="tel:15555555555" that is after the style tag. The HREF syntax allows the User to dial the phone by clicking on the link.  */  { color: #fff; font-size: xx-small; font-family: Arial, sans-serif; text-decoration: underline }



	.telephone a { color: #fff; font-size: xx-small; font-family: Arial, sans-serif; text-decoration: underline }

	.telephone a:visited { color: #fff; font-size: xx-small; font-family: "Arial, sans-serif"; text-decoration: underline }

	.telephone a:hover { color: #fff; font-size: xx-small; font-family: Arial, sans-serif; text-decoration: underline }

	.telephone a:active { color: #fff; font-size: xx-small; font-family: Arial, sans-serif; text-decoration: underline }



	.text_left { text-align: left }

/*</agl.folder>*/



/*The vertical spacer styles only work when applied to DIVs. An example is <div class="vertical_4px"></div>. A vertical spacer tag may seem like more work than a transparent GIF. However, there is a quite noticeable difference in rendering times. A page that contains a lot of tags may be larger than one that contains GIF spacers, but will render faster. Remember that performance is critical  to the success of mobile sites, even though the User often pays by the Mb.*/

.vertical_1px { width: 100%; height: 1px }

.vertical_2px { width: 100%; height: 2px }

.vertical_3px { width: 100%; height: 3px }

.vertical_4px { width: 100%; height: 4px }

