@charset "UTF-8";
/* Simple fluid media
Note: Fluid media requires that you remove the media's height and width attributes from the HTML
http://www.alistapart.com/articles/fluid-images/
*/
img, object, embed, video { max-width: 100%; }
/* IE 6 does not support max-width so default to width 100% */
.ie6 img { width: 100%; }
/*
Dreamweaver Fluid Grid Properties
----------------------------------
dw-num-cols-mobile: 5;
dw-num-cols-tablet: 8;
dw-num-cols-desktop: 12;
dw-gutter-percentage: 15;
*/
/*
CSS Rules will casdcade down from the Mobile Layout, through the Tablet Layout and finally to the Desktop Layout.
Always make a change in Mobile first if you want it to have an effect on all modes. Once the change is made in mobile, check and adjust in Tablet and then Desktop.
If a rule is repeated exactly the same throughout all modes, it is only needed in Mobile. Having an exact rule repeated in all modes is redundant and unnecessary.
A rule change/update is only necessary in Tablet or Desktop if it is a change from Mobile. Rules may need to be repeated in Tablet and Desktop even if they are the same (but different from Mobile)
To obtain a shadow on an image, enclose it in a DIV with the class of "cornerShadow"
The shadow will not apply directly to an image
Do NOT add any WIDTH or HEIGHT attributes to any image.
if you want to hide something from Mobile (including Tablet), simply add "noMobile" as a class
to hide it from Desktop, but not Mobile & Tablet, add "mobileOnly" as a class
when changing colors of text elements, you should only need to change them in Mobile.
*/
/* Mobile Layout: 480px and below. */
body { background-color: #f4f4f4; color: #333; background-position: top center; background-repeat: repeat-x; background-image: url(../img/layout/bg-header-tablet.png); }
/* Divider Rules: Use HR with class applied */
.dividerDots { color: transparent; clear: both; border-top: 2px dotted #8c8c8c; margin-bottom: 10px; padding: 0; position: relative; top: 10px; }
.dividerLine { color: transparent; clear: both; border-top: 3px solid #282828; margin-bottom: 10px; padding: 0; position: relative; top: 20px; }
/* BREADCRUMB MENU */
ul.MenuBarHorizontal { margin-bottom: 70px !important; }
ul.MenuBarHorizontal li { margin: 0; padding: 0; list-style-type: none; font-size: 100%; position: relative; text-align: left; cursor: pointer; float: left; margin-bottom: 0; background: transparent url(../img/layout/bullet.png) 0 8px no-repeat;padding-left: 10px; margin-right: 15px; overflow: hidden; max-width: 25%;}
ul.MenuBarHorizontal a { height: 16px !important; padding: 2px 0 !important; margin-bottom: 10px !important; color: #fff; text-transform: lowercase; padding-top: 6px !important; padding-bottom: 0 !important; overflow: hidden; font-size: .8em;white-space: no-wrap;}
.noMobile { display: none; }
.mobileOnly {display: inherit; }
.gridContainer { margin-left: auto; margin-right: auto; width: 88.626%; padding-left: 1.1869%; padding-right: 1.1869%; }
#Header { clear: both; float: left; margin-left: 0; width: 100%; display: block; height: 52px; }
#logo { width: 230px; height: 36px; background: transparent url(../img/layout/usf-logotype-tablet.png) top left no-repeat; margin-top: 8px; float: left; }
#content { clear: both; float: left; margin-left: 0; width: 100%; display: block; padding-top: 0; }
#footer { clear: both; margin-left: 0; width: 100%; display: block; background: #006043 url(../img/layout/bg_footer.png) top left repeat-x; padding: 50px 0; margin-top: 100px; text-align: center; position: relative; color: #fff; }
/* Change colors of most individual text elements here - overall text color is in BODY above */
p { color: inherit; font-size: 1.2em; line-height: 1.5em; font-weight: normal; font-family: Arial, Helvetica, sans-serif; }
#footer a { color: #fff; text-decoration: none; }
#footer p { color: inherit; max-width: 960px; margin: 0 auto; text-align: left; }
#columnLeft { clear: both; float: left; margin-left: 0; width: 100%; display: block; margin-top: 0; }
#columnRight { clear: both; float: left; margin-left: 0; width: 100%; display: block; margin-top: 20px; }
#columnRight h1 { color: inherit; padding: 0; margin: 0; text-transform: uppercase; font-weight: normal; font-family: Arial, Helvetica, sans-serif; font-size: 1.8em; }
#columnRight h2 { color: inherit; padding: 0; margin: 0; font-weight: bold; font-family: Georgia, "Times New Roman", Times, serif; font-size: 1.3em; font-style: italic; }
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
body { background-image: url(../img/layout/bg-header-tablet.png); }
.dividerDots { margin-bottom: 60px; top: 30px; }
ul.MenuBarHorizontal li { margin-bottom: 0; background: transparent url(../img/layout/breadcrumb.png) 0 8px no-repeat;padding-left: 30px; margin-right: 25px; max-width: 20%;}
ul.MenuBarHorizontal a { height: 16px !important; margin-bottom: 10px !important; padding-top: 7px !important; padding-bottom: 0 !important; text-transform: uppercase; font-size: .8em; }
.gridContainer { width: 91.4836%; padding-left: 0.7581%; padding-right: 0.7581%; }
.noMobile { display: none; }
.mobileOnly {display: inherit; }
#content { padding-top: 15px; }
#columnLeft { margin-left: 0; width: 49.1712%; display: block; border: 0; margin-top: 0; }
#columnRight { clear: none; margin-left: 1.6574%; width: 49.1712%; display: block; border: 0; margin-top: 0; }
}
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
body { background-image: url(../img/layout/bg-header-desktop.png); }
.dividerDots { margin-bottom: 80px; top: 50px; }
ul.MenuBarHorizontal li { background: transparent url(../img/layout/breadcrumb.png) 0 20px no-repeat;padding-left: 30px; margin-right: 25px; max-width: 25% }
ul.MenuBarHorizontal a { height: 26px !important; margin-bottom: 10px !important; padding-top: 17px !important; padding-bottom: 0 !important; text-transform: uppercase; font-size: 1em; }
.gridContainer { width: 89.0217%; max-width: 960px; padding-left: 0.4891%; padding-right: 0.4891%; margin: auto; }
#Header { height: 105px; }
.noMobile { display: inherit; }
.mobileOnly {display: none;}
#logo { width: 427px; height: 67px; background: transparent url(../img/layout/usf-logotype.png) top left no-repeat; margin-top: 20px; }
#content { padding-top: 20px; }
#columnLeft { margin-left: 0; width: 49.1712%; display: block; border: 0; margin-top: 0; }
#columnRight { clear: none; margin-left: 1.6574%; width: 49.1712%; display: block; border: 0; margin-top: 0; }
}