/* CSS Document */
/* styles for UA style websites -- for official University of Arizona websites only! */
/* for questions or comments please contact the UA Web team: uaweb-team@listserv.arizona.edu or 520.621.9997 */

/* -----------------------------------------------------------------------------*/

/* PLEASE NOTE! -- Some of the styles in this document DO NOT MATCH their counterparts on the official UA Web Site Style Sheets "www.arizona.edu/css/global.css"!  */

/* -----------------------------------------------------------------------------*/


/* begin top-level styles */
* { margin: 0; padding: 0; }
html, body { font-family: Arial, Avenir, "Lucida Grande", Verdana, Helvetica, sans-serif; font-size: 86%; background-color: #FFF; }
/* the 86% font-size above is a psuedo-hack that works well across browsers and platforms to get all the font sizes starting at the same size. */
img { border: 0; }
/* sets img default borders to 0. Create a specific class below this deffinition if you want to add a border back on to images. See the class ".border" below. */

/* begin general formatting styles */
p { font-size: 1.2em; }
h1 { font-size: x-large; color: #036; }
h2 { font-size: large; color: #036; }
h3 { font-size: medium; color: #036; }
h4 { font-size: small; color: #036; }
h5 { font-size: smaller; color: #036; }
/* these styles set the color and size of the heading tags on the entire page */

a:link { color: #036; }
a:visited { color: #036; }
a:hover { color: #C03; }
/* these styles set the color of the links on the entire page */

/* begin unique formatting classes */

#breadcrumb {  float: left; margin-bottom: 5px; margin-top: 0px; }
#breadcrumb li { padding: 0 1em; display: inline; background-image: url(../images/bullet.gif); background-repeat:no-repeat; background-position: center left; }
#breadcrumb a:link, #breadcrumb a:visited { color: #036; text-decoration: none; }
#breadcrumb a:hover { color: #C03; }


.annotation { color:#444; font-size: .9em; line-height: 1.1em; }
/* this style is used below links or titles to add extra information about that item */
/* annotations appear on www.arizona.edu website in pages that have the "show more / show less" feature */

.title { margin-bottom: 10px; padding:.3em 0; clear: both; border-bottom: 1px solid #CCC; }
/* use this style on h1 and h2 tags to add a horizontal rule beneith them */

.skip { display: none; }
/* the definition above hides the skip navigation button that appears at the very top of all pages */
/* skip navigation allows people with screen readers to skip navigational elements that appear on every page */


.bold { font-weight: bold; }
.italic { font-style:italic; }
.bold_italic { font-weight: bold; font-style: italic; }
/* typicaly used on <span> tags, these classes replace the <strong> and <italic> tags */

.clear { clear: both; }
/* this class can be used in an empty <div> to keep floating elements below it from running into content that appears above this tag */

.border { border: 1px solid #666; }
/* adds a 1-pixel-wide gray border to an item with this class */

/* begin styles for UA style banner */

#header_top { background-color: #036; min-height: 25px; }
#header_top ul {line-height: 2em; text-align: right; padding-right: 40px; }
/* adjust padding of this object to move closer or farther from the page edges. */
#header_top li { display: inline; font-size: 1.05em; border-right: 1px dotted #FFF; padding: .35em .5em;  }
#header_top li a { color: #FFF; text-decoration: none; }
.one_liner { padding-left: 40px; }
.simple	{ padding-left: 30px; float: left; }
/* adjusts padding of the UA one liner graphic, "content_one_line.gif", in header to move closer or farther from the page edges. */
#header_top .no_bor { border: 0px; }
/* add this class to <li> tags that contain items that DO NOT get borders inside the #header_top <div>. */

#header_top ul .search_btn { margin-left: -7px; position: relative; Top: 5px; }
/* this style adjusts the position of the search button graphic, "", in the header */
#header_top .search { font-size: 9px; color: #333; background-color:#EEE; border-style: solid; border-width:1px; width:70px; height:13px; -moz-border-radius: 5px; margin-bottom: 2px; }
/* this style adjusts the height and width of the search box in the header. the "-moz-border-radius: 5px;" adds rounded corners to the box */

/* header_bottom -- lower "red" part of the header. */
#header_bottom { background-color: #C03; border-bottom: 1px solid #FFF; border-top: 1px solid #FFF; height: 30px; margin-bottom: 1px; }
.drop_shadow { height: 15px; width: 100%; background-image: url(../images/content_bg.gif); margin-top: 1px; }
/* be sure to update the link to the graphic above */

/* tag (department tag) */
/* this is a feature to add a customized department graphic to your website */
#tag { width: 100%; margin-bottom: -1px; background-image:url(../images/tag_bg.gif); background-repeat: repeat-x; border-top: 1px solid #FFF; border-bottom: 1px solid #FFF; }

#custom_graphic { width: auto; height: 50px; border-top: 1px solid #FFF; background-color: #C03; }
/* containers */

/* containers can be used to place content inside and set a universal margin for everything inside them. */
/* these are best suited to contain everything that appears after the header and should be the first elements in your html after the header element. */
/* fixed_container has a set width and will cause scrollbars to appear if the browser window is too small. Content inside this container will not wrap. */
#fixed_container { width: 760px; margin: 10px auto 0 auto; }
/* adjust the width of the element above to match your site. This container will be automatically centered on the page. */
/* try adding borders to this element while you are developing the site to see where the edges appear in your design. */

/* container does not have a fixed width and will expand or contract to fit the browser window. Text inside this container will wrap. */
#container { padding: 0 40px; }
/* be sure to update the link to the graphic above */

/* un-ordered lists -- the difference between type1, type2 and type3 are font, margin and padding sizes. */
.type1 { font-size: 1.2em; margin: 0 0 10px 15px; } 
.type1 li { list-style-image: url(../images/circle_bullet.gif); padding: .12em 0 .15em 0; }
/* be sure to update the link to the graphic above */
.type1 a:link { text-decoration: underline; }
.type1 a:visited { text-decoration: underline; }
.type1 a:hover { text-decoration: underline; }

/* use this list for all gray_column lists */
.type2 { font-size: 1.1em; margin: 0 30px 0 15px; } 
/* changing the margin above will move the list closer or further away from elements surrounding it */
.type2 li { list-style-image: url(../images/bullet_wht.gif); padding: .12em 0; }
/* be sure to update the link to the graphic above */
.type2 a:link { text-decoration: none; }
.type2 a:visited { text-decoration: none; }
.type2 a:hover { text-decoration: underline; }

.type3 { font-size: 1em; margin: 0 0 0 15px; }
/* changing the margin above will move the list closer or further away from elements surrounding it */
.type3 li { list-style-image: url(../images/circle_bullet.gif); padding: .12em 0; }
/* be sure to update the link to the graphic above */
.type3 a:link { text-decoration: underline; }
.type3 a:visited { text-decoration: underline; }
.type3 a:hover { text-decoration: underline; }
 
/* ol or ordered lists use numbers instead of bullets */
ol { font-size: 1.2em; margin: 0 0 10px 25px; }
/* changing the margin above will move the list closer or further away from elements surrounding it */
* html ol { margin: 0 0 10px 35px; } /* hack for IE on PC's */
ol li { padding: .12em 0 .15em 0; list-style-type: decimal; }

/* columns */
#container .one_col { width: 100%; padding: 10px; }
#container .two_col { width: 65%; float: left; padding: 5px; min-width: 500px; border: 1px solid #F90; margin-top: 10px; }
#container .three_col { width: 31%; margin-right: 3%; padding: 5px; float: left; min-width: 250px; clear: right; border: 0px solid #3CC; }

#fixed_container .one_col {  }
#fixed_container .two_col { width: 508px; float: left; padding: 5px; border: 1px solid #F90; margin-top: 10px; }
#fixed_container .three_col { width: 240px; float: left; padding: 5px; margin-right: 15px; border: 0px solid #3CC; }

/* gray column */
/* this structural element is a 202-pixel-wide gray box with a dark gray border. Content inside this box determines the height. */
/* text inside this box will stay 10 pixels from any inside edge of the box. */
/* images inside this box must be no larger that 198 pixels wide! */
#gray_column { width: 200px; height: auto; float: right; padding: 10px; clear: right; background-color: #EEE; border: 1px solid #CCC; }
/* this element IS FLOATING and will cause varried effects on objects that surround it. If you are getting undesired results from this element, try removing the "float: left;" attribute from above. */
#gray_column img { border: 1px solid #666; margin: 10px 0; }
/* the style above adds a border around any image inside this box. It also puts a 10-pixel margin above and below the image. */
#gray_column a { text-decoration: none; }
#gray_column p { font-size: 1.05em; }
#gray_column h4 { margin: .4em 0; padding: 0 0 .5em 0; border-bottom: 1px dotted #CCC; }
/* use the <h4> tag as a heading tag inside the gray column to match the style of the UA website. */
#gray_column .suggestion_text { width: 195px; margin: 10px 0; }
#gray_column .suggestion_email { width: 195px; margin: 10px 0; }



/* footer */
/* The footer appears at the bottom of all pages */
#footer { clear: left; color: #666; /* background-image:url(../images/footer_bg.gif); background-repeat: repeat-x; */text-align: center; margin-top: 10px; }
/* be sure to update the link to the graphic above */
#footer p { margin-top: .3em; font-size: 1.05em; }
#footer_logo { height: 20px; background-color: #EEE; border-top: 1px solid #CCC; border-bottom: 1px solid #CCC; margin-bottom: 12px; }
.footer_links { margin-bottom: 0.5em; font-size: 1.07em; }
.footer_links li { display: inline;  padding: 0.05em 1em; color: #036; border-right: 1px solid #036; }
/* padding above adjusts the space between the links */
.footer_links a:link, .footer_links a:visited { color: #036; text-decoration: none; }
.footer_links a:hover { color: #C03; text-decoration: underline; }
/* specific link attributes for the footer */
.footer_links .no_bor { border: 0px; }
/* removes border from last item in list */


/* styles for style guide */
/* these styles are used in the style guide only! */
.code_block { color: #006600; background: #EEE; padding: 15px; margin: 15px; font-family: "Courier New", Courier, mono; font-size: small;  }
.small_graphic_highlight { border: 10px solid #000; }
.template_only li { list-style: none; margin: 0 15px 15px 0; }
.template_only img { border: 10px solid #EEE; }
.template_only { font-size: 1.1em; }