/*The ad_intranet template is a project management tool for an advertising agency account executive (AE). An AE has a number of clients, and each client has a number of products he's managing advertising campaigns for. Campaigns manifest as 'spots', short animated clips that incorporate the same things as tv spots do, but are much shorter and play like flash banner ads. Mobile campaigns have lower production costs than desktop counterparts, so can design several versions of the spot to reflect variables. If the client needs to modify an in-progress campaign, this tool allows them to change the airing spot to another version that's conducive to greater sales.



Some screens can contain a lot of information. You should therefore use ad_intranet for screens of 176px and wider. The design is optimized for smartphone-class handsets that can handle video. 



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. Some phones will reverse-out a graphic link. For axample, a clickable black link will turn white when the User chooses it. 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 "Login_Elements">*/

	#login_header    { color: #fff; font-size: xx-small; font-family: sans-serif; text-decoration: none; text-align: left; margin-top: 5px }



	#login_box    { color: #000; font-size: xx-small; font-family: sans-serif; text-align: left; margin-top: 5px; margin-left: 38px; padding: 1; width: 96px }



	.login_field  { color: #000; font-size: xx-small; font-family: sans-serif; background-color: #9b8bb8; text-align: left; margin: 1px; float: left }



	#login_button { text-align: left; margin-top: 2px; margin-left: 105px }



	#login_welcome_image { text-align: left; margin-top: 8px; margin-left: 40px }

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

/*</agl.folder>*/



#client_logo { position: absolute; top: 76px; left: 6px }



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

	#menu_box     { color: #000; font-size: xx-small; font-family: sans-serif; line-height: 10px; text-decoration: none; text-align: left; margin-top: 5px; margin-left: 38px; position: relative }

	

	.bracket /* This style is applied to the brackets that frame the main navigation links.  */    { color: #ccc; font-size: xx-small; font-family: sans-serif }

	

	#menu_header      { color: #fff; font-size: xx-small; font-family: sans-serif; line-height: 22px }

	

	.white_highlight        { color: #fff; font-size: xx-small; font-family: sans-serif; padding-top: 1px; padding-bottom: 1px }

	

	.selection_highlight { color: #000; font-size: xx-small; font-family: sans-serif; line-height: 12px; background-color: #fff; padding-right: 2px; padding-left: 2px; text-decoration: none }



	.selection_highlight a { color: #000; font-size: xx-small; font-family: sans-serif; line-height: 12px; background-color: #fff; padding-right: 2px; padding-left: 2px; text-decoration: none }

	

	.selection_highlight a:hover { color: #000; font-size: xx-small; font-family: sans-serif; line-height: 12px; background-color: #fff; padding-right: 2px; padding-left: 2px; text-decoration: none }

	

	.selection_highlight a:active  { color: #000; font-size: xx-small; font-family: sans-serif; line-height: 12px; text-decoration: none; background-color: #fff; padding-right: 2px; padding-left: 2px }



	.selection_highlight a:visited { color: #000; font-size: xx-small; font-family: sans-serif; line-height: 12px; background-color: #fff; padding-right: 2px; padding-left: 2px; text-decoration: none }

	

	.menu_link   { color: #000; font-size: xx-small; font-family: sans-serif; text-decoration: none; padding-bottom: 1px }

	

	.menu_link a    { color: #000; font-size: xx-small; font-family: sans-serif; text-decoration: none; padding-bottom: 1px }



	.menu_link a:hover    { color: #000; font-size: xx-small; font-family: sans-serif; text-decoration: none; padding-bottom: 1px }

	

	.menu_link a:active    { color: #000; font-size: xx-small; font-family: sans-serif; text-decoration: none; padding-bottom: 1px }

	

	.menu_link a:visited    { color: #000; font-size: xx-small; font-family: sans-serif; text-decoration: none; padding-bottom: 1px }

/*</agl.folder>*/



body      { background-color: #ad9ec4; text-align: left; margin-top: 0; padding: 0 }



/*Stacked DIVs or SPANs render properly in most microbrowsers. However, a microbrowser may try to stack DIVs or SPANs that you put side-by-side. Intranet.css uses a table to avoid the problem.*/



#content_table   /* This tag positions the table that contains the content. Th HEIGHT tag allows the table to expand to the full height of any size screen. The logo appears in the bottom left because the HEIGHT tag combines with the VALIGN tag in the cell that contains the logo. The VALIGN tag appears on each page.   */      { text-align: left; position: absolute; top: 0; left: 6px; height: 100% }



#top_left_cell_login  /*  This tag sets the height of the top left table cell so that the logo is a fixed length from the top. The width is the distance of the login form from the left edge of the screen.  */   { width: 22px; height: 75px }



#top_left_cell_menu    /* This tag sets the height of the top left table cell so that the logo is a fixed length from the top. The width is the distance of the menu from the left edge of the screen. HTML within each page sets table height at 100%. HTML sets the vertical alignment of the cell that contains the logo at BOTTOM. The vertical alignment ensures that rhe logo appears in the bottom left corner of the screen, no matter what the screen size.     */       { width: 34px; height: 75px }



/*<agl.folder "Graphic_Elements" "This folder contains styles to be applied to thumbnail images and the "Edit" button.">*/



	#left_element_box /* Left_element_box contains the thumbnail image or "Edit" button that sits in the upper left. */   { position: absolute; top: 14px; left: 6px; width: 25px; float: left }



	#thumbnail      { text-align: left; margin-top: 14px }



	#talent  /*   */      { margin-top: 10px; margin-bottom: 15px }

	

	#previous_and_next  /* The absolute positioning of this tag puts the "previous" and "next" arrows at the bottom of the screen, and in alignment with the logo. */  { position: absolute; bottom: 0 }

	

	#video_clip { position: absolute; top: 40px; left: 40px }

/*</agl.folder>*/



