/*The Wine template is good for services in which the User drills down to specific information.



This is a a mobile site to help you figure out what wine to pair with the first meal that your fiancee cooks for you, important occasions, etc. and buy it. The site also has an expert mode that lets you shop by varietals. We designed Wine as a database front end. It presumes an existing account and lets you authenticate with a simple pin code. The small form factor allows for the greatest transmission potential to the widest installed customer base. Colors reflect varietal type (red or white) once decided on - also uses a glass shape icon to indicate same for color-challenged and low light phone situations.



Wine creates rounded edges from stacked single-pixel DIVs. The CSS-3 specification includes a tags for round corners. However, you can create the effect now by the method shown in the template. The Opera and Nokia browsers, and ACCESS NetFront render close approximations of the edges. The Small Screen Rendering (SSR) of Opera and Nokia squeezes all elements horizontally. That's why the rounded edges can look asymmetrical on desktop browsers.



GoLive renders the rounded corners properly in Preview Mode. In Layout Mode it displays wide rectangles.



Keep in mind that Mozilla and desktop Opera 7.5x and Safari 2.X render the corners correctly. Internet Explorer 6.X does not.



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.

*/



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

	.contents_gold  { color: #fff; font-size: xx-small; font-family: sans-serif; background-color: #9b9000; text-align: center; margin: 0; padding: 0; width: 100% }



	.contents_gold a  { color: #fff; font-size: xx-small; font-family: sans-serif; text-decoration: none; background-color: #9b9000; text-align: center }



	.contents_gold a:hover  { color: #fff; font-size: xx-small; font-family: sans-serif; text-decoration: none; background-color: #9b9000; text-align: center }



	.contents_gray  { color: #fff; font-size: xx-small; font-family: sans-serif; background-color: #858585; text-align: center; margin: 0; padding: 0; width: 100% }



	.contents_gray a  { color: #fff; font-size: xx-small; font-family: sans-serif; text-decoration: none; background-color: #858585; text-align: center }



	.contents_gray a:hover  { color: #fff; font-size: xx-small; font-family: sans-serif; text-decoration: none; background-color: #858585; text-align: center }



	.contents_red  { color: #fff; font-size: xx-small; font-family: sans-serif; background-color: #87000b; text-align: center; margin: 0; padding: 0; width: 100% }



	.contents_red a  { color: #fff; font-size: xx-small; font-family: sans-serif; text-decoration: none; background-color: #87000b; text-align: center }



	.contents_red a:hover  { color: #fff; font-size: xx-small; font-family: sans-serif; text-decoration: none; background-color: #87000b; text-align: center }



	.contents_gold_icons { background-color: #9b9000; margin-top: 0; top: 0; width: 13px; height: 100%; float: left }



	.contents_gray_icons { background-color: #858585; margin-top: 0; top: 0; width: 13px; height: 100%; float: left }



	.contents_red_icons { background-color: #87000b; margin-top: 0; top: 0; width: 13px; height: 100%; float: left }



	.entry_gold  { font-size: xx-small; font-family: sans-serif; background-color: #c1b954; border: solid 1px #fff }



	.icon_frame { padding: 0; position: relative; top: 3px }



	.contents_gold_text { line-height: 10px; background-color: #9b9000; text-align: left; top: 0; height: 100%; float: left }



	.contents_gray_text { line-height: 10px; background-color: #858585; text-align: left; top: 0; height: 100%; float: left }



	.contents_red_text { line-height: 10px; background-color: #87000b; text-align: left; top: 0; height: 100%; float: left }



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



	#submit_button { text-align: right; margin: 2px; padding-right: 9px; float: right }

/*</agl.folder>*/



/*<agl.folder "The_Menu_Page_Elements" "The "menu_frame" styles apply to the "menu-dinner.html" page.">*/

	#menu_frame_gold   { color: #9b9000; font-size: xx-small; font-family: sans-serif; line-height: 10px; text-decoration: none; text-align: left; margin-top: 4px; margin-left: 4px; position: relative }



	#menu_frame_gold a   { color: #9b9000; font-size: xx-small; font-family: sans-serif; line-height: 10px; text-decoration: none; margin-top: 4px; margin-left: 4px; text-: left  }

	

	#menu_frame_gold a:hover   { color: #9b9000; font-size: xx-small; font-family: sans-serif; line-height: 10px; text-decoration: none; text-align: left; margin-top: 4px; margin-left: 4px }



	#menu_frame_gray   { color: #858585; font-size: xx-small; font-family: sans-serif; line-height: 10px; text-decoration: none; text-align: left; margin-top: 4px; margin-left: 4px; position: relative }



	#menu_frame_gray a   { color: #858585; font-size: xx-small; font-family: sans-serif; line-height: 10px; text-decoration: none; margin-top: 4px; margin-left: 4px: text-decoration: none  ; text-: left  }

	

	#menu_frame_gray a:hover   { color: #858585; font-size: xx-small; font-family: sans-serif; line-height: 10px; text-decoration: none; text-align: left; margin-top: 4px; margin-left: 4px }



	#menu_frame_red   { color: #87000b; font-size: xx-small; font-family: sans-serif; line-height: 10px; text-decoration: none; text-align: left; margin-top: 4px; margin-left: 4px; position: relative }



	#menu_frame_red a   { color: #87000b; font-size: xx-small; font-family: sans-serif; line-height: 10px; text-decoration: none; margin-top: 4px; margin-left: 4px; text-: left  }

	

	#menu_frame_red a:hover   { color: #87000b; font-size: xx-small; font-family: sans-serif; line-height: 10px; text-decoration: none; text-align: left; margin-top: 4px; margin-left: 4px }



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



	.details_frame_gold  { color: #fff; font-size: xx-small; font-family: sans-serif; background-color: #9b9000; text-align: left; border-top: 1px solid #fff; border-left: 13px solid #9b9000 }



	.details_frame_red  { color: #fff; font-size: xx-small; font-family: sans-serif; background-color: #87000b; text-align: left; border-top: 1px solid #fff; border-left: 13px solid #87000b }

/*</agl.folder>*/



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

	#navigation_frame  { color: #858585; font-size: xx-small; font-family: sans-serif; text-align: left; padding-bottom: 2px; height: 14px }



	#navigation_frame a  { color: #858585; font-size: xx-small; font-family: sans-serif; text-decoration: none; text-align: left }



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



	#navigation_underlined  { color: #858585; font-size: xx-small; font-family: sans-serif; text-align: left; padding-bottom: 2px; height: 14px; border-bottom: 1px solid #858585 }



	#navigation_underlined a  { color: #858585; font-size: xx-small; font-family: sans-serif; text-decoration: none; text-align: left }



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



	#depth_marker /*  This DIV contains the arrows that show you how deep you are in the site. The more arrows there are, the deeper you are.  */  { text-align: left; margin-top: 4px; margin-left: 1px; width: 17px; float: left }



	#navigation { text-align: left; margin-left: 5px; float: left }

/*</agl.folder>*/



/*<agl.folder "Rounded _Corner_Elements" "This folder contains the DIVs that create round corners when centered and stacked.">*/

	.line1_gold { background-color: #9b9000; margin-right: 5px; margin-left: 5px; height: 1px }

	.line2_gold { background-color: #9b9000; margin-right: 3px; margin-left: 3px; height: 1px }

	.line3_gold { background-color: #9b9000; margin-right: 2px; margin-left: 2px; height: 1px }

	.line4_gold { background-color: #9b9000; margin-right: 1px; margin-left: 1px; height: 2px }

	.line1_gray { background-color: #858585; margin-right: 5px; margin-left: 5px; height: 1px }

	.line2_gray { background-color: #858585; margin-right: 3px; margin-left: 3px; height: 1px }

	.line3_gray { background-color: #858585; margin-right: 2px; margin-left: 2px; height: 1px }

	.line4_gray { background-color: #858585; margin-right: 1px; margin-left: 1px; height: 2px }

	.line1_red { background-color: #87000b; margin-right: 5px; margin-left: 5px; height: 1px }

	.line2_red { background-color: #87000b; margin-right: 3px; margin-left: 3px; height: 1px }

	.line3_red { background-color: #87000b; margin-right: 2px; margin-left: 2px; height: 1px }

	.line4_red { background-color: #87000b; margin-right: 1px; margin-left: 1px; height: 2px }

/*</agl.folder>*/



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

	/*The "curve" styles create a curve when stacked. However, it's created by the offsets of single-pixel borders.



You can create curves of different sizes by going into Adobe Photoshop:

1. Create a circle with the Elliptical Marquee Tool.

 

2. Fill-in the circle with the Paint Bucket Tool. Make sure the "Feather" and "Anti-aliased" options are off.

 

3. Zoom-in to the circle. Note the stepped appearance create by the pixilated approximation of the curve. Think of the circle as a stack of thin rectangles. Each rectangle can be created by a DIV.

 

4. Choose the section of the circle you want to recreate with DIVs.

 

NOTE that Opera and Nokia cannot resolve a DIV less than 19x wide. There is a work-around. First, create a DIV that is at least 19px wide. The DIV can be clear. Second, give the DIV a "border-left" width that is the narrow width of you want to display. Apply a color to the border.



Stacked DIVs can make a page file larger than using carefully positioned GIFs. Howver, the larger page will actually load faster. That's because the microbrowsers render XHTML before images.*/

	.curve1_gray { background-color: #858585; margin-right: 4px; margin-left: 4px; height: 1px }

	.curve2_gray { margin-right: 3px; margin-left: 3px; height: 1px; border-left: 1px solid #858585 }

	.curve3_gray { margin-right: 2px; margin-left: 2px; height: 1px; border-left: 1px solid #858585 }

	.curve4_gray { margin-right: 1px; margin-left: 1px; height: 2px; border-left: 1px solid #858585 }

/*</agl.folder>*/



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

#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 Oeneo design accounts for the potential of asymmetrical white space around the content boxes.  */   { text-align: center; width: 96% }



.intro_contents_gray     { color: #fff; font-size: xx-small; font-family: sans-serif; background-color: #858585; text-align: center; margin: 0; padding: 0 }



.intro_option { margin-top: 2px; padding: 0; position: relative; top: 4px }



#intro_title { margin-bottom: 4px; padding: 0; position: relative }



#intro_copy_box { margin-bottom: 4px; padding: 0; position: relative; top: 8px }



.main_option { padding: 0; position: relative; top: 4px }



.main_option_frame    { color: #fff; font-size: xx-small; font-family: sans-serif; background-color: #858585; text-align: center; margin: 0; padding: 0 }



.main_option_frame a    { color: #fff; font-size: xx-small; font-family: sans-serif; background-color: #858585; text-align: center; text-decoration: none }



.main_option_frame a:hover    { color: #fff; font-size: xx-small; font-family: sans-serif; background-color: #858585; text-align: center; text-decoration: none }



/*The vertical spacer styles only work when applied to DIVS. An example is <div class="vertical_spacer_4px"></div>. Microbrowsers stack DIVs by default. You only have to specify the DIV height in order for the browser to read it. SPANs can be placed side-by-side, but, depending on usage may require a specific height. Percentages applied to SPANs are ignored by the Opera and Nokia browsers.



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. The User often pays for the Mb.*/



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



.vertical_spacer_4px { height: 4px }



.vertical_spacer_8px { height: 8px }

