/**
 * Normal Template CSS
 * Global CSS used by every page. For more specific CSS affecting less pages
 * make a new file.
 * major colors used.
 * grey text: #585956
 * dark blue bg: #015174
 * light blue bg: #80C4CD
 * red: #BA3B34
   2012blue: #5372be
 * Jordan Sterling
 *
 *
 * Updated 5/2016 by Shane Greene
 * Search for SPG to find specific edits/additions
 */
html { margin: 0px; width: 100%; height: 100%; }
body
{
    margin: 0px auto;
    width: 100%;
    height: 100%;
    color: #585956;
    /*font-size: 11.5px;*/
	/*line-height: 14px;*/
/* changed font size sept 5, 2012*/
    /*font-size: 12px;*/
	/*line-height: 17px;*/
    font-size: 14px;
	line-height: 20px;
    font-family: helvetica, sans-serif;
    padding: 0px;
}
p2
{
   font-size: 14px;
   line-height: 22px;
    font-family: helvetica, sans-serif;
    padding: 0px;
   color: #585956;
}

/* these allow for the fancy inputs with hidden text */
input.userinput { border: 1px solid #000000; color: gray; padding: 1px; }
input.userinputselected { border: 2px solid #aaaaaa; color: black; padding: 0px; }
input.userinputtype { color: black; padding: 1px; }



a { color: #585956; }
ul { list-style-type: circle; }
#top
{
    width: 100%;
    /* background: url('../images/background.jpg') repeat-x; */
    background: #18335d; /* Added by SPG */
    height: 90px;  /* Changed by SPG */
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    padding: inherit;
    position: relative;
}
#topcontainer
{
    width: 770px; /* all containers need some width */
    height: 90px;
    padding-left: 50px;
    margin: 0px auto;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
}
/**
 * Row 1 + Row 2 total height must be 90px. Or, Row 3's top line must start
 * at 90x from the top (to match up with the background).
 */
#row1 
{
    width: 770px;
    color: white;
    font-size: inherit;
    font-family: inherit;
    padding: 25px 0px 0px 0px;
    height: 35px; 
    position: relative;
}

#navbar-header {
    width: 239px;
    height: 50px;
    padding: 0;
    margin: 0;
    display: inline-block;
    position: absolute;
    top: 10px;
}

#alumni-logo {
    background: url(../images/alumni-logo-left.jpg);
    background-repeat: no-repeat;
    width: 239px;
    height: 50px;
    display: inline-block;
    text-align: left;
    text-indent: -999em;
    overflow: hidden;
    padding: 0;
    margin: 0;
}
/*#logoimg
{
    border: 0px;
    position: absolute;
    top: 12px;
    left: -40px;
}*/
/*#pagetitle 
{
    color: white;
    font-size: 20px;
    font-family: inherit;
    padding-top: 12px;
    text-decoration: none;
}*/
#search /* div containing search box and quick links */
{
    display: inline;
    width: 300px;
    color: white;
    position: absolute;
    text-decoration: none;
    font-size: 11px;
    top: 25px;
    right: 0px;
}
#search form { display: inline; padding: 0px; margin: 0px; }
#search input { display: inline; font-size: 11 px; }
#row2
{
    width: 770px;
    height: 30px; /* row 1 is 45 px. blue bar is 65. */
    color: #fff;
    font-size: 11px;
    text-indent: -10px; /*this is -10 pixels because there is a default 10 pixel left padding */
    position: relative;
    clear: both;
}
#row2 a.main
{
    text-decoration: none;
    color: #fff; /* Added by SPG */
    padding: 0px 10px; /* this here gives a 10 pixel left padding, so to push it back 10 pixels so it lines up straight there
                          is the -10 text indent above for all of row2 */
}
div.quicklinksholder
{
    position: absolute;
    top: 0px;
    right: -5px;
    z-index:1000;
}
#row3
{
    background: #ffce34; /* Added by SPG */
    clear: both;
    color: inherit;
    display: block;
    font-size: 11px;
    padding-top: 5px;
    text-align: center;
    /* width: 770px; */
    
}
#row3 a
{
    text-decoration: none;
    color: #585956;
    padding-right: 10px;
}

#middle
{
    width: 100%;
    padding: inherit;
    clear: both;
}
#middlecontainer
{
    width: 800px; /* all containers need some width */
    margin: 0px auto;
}
#columncontainer
{
    float: left;
    width: 100%; 
}


#breadcrumbs { height: 1em; margin: 10px 0px 20px; color: #585956; font-weight: bold; }
#breadcrumbs a { color: #585956; }

#floatholder
{
    width: 800px;
    margin: 20px auto 0px;
}
#lmenu /* 144px wide with 20px padding right so 164px total */
{
    width: 145px;
    display: inline;
    float: left;
    padding: 0px 20px 0px 0px;
    margin: 0px 0px 20px 0px;
}
/* a box that holds a link, this is only so we can have it hover color */
div.menuitem
{
    margin: 0px;
    padding: 5px 0px;
    border-top: 1px solid black;
}


div.menuitem2
{
    margin: 7px 0px 0px 7px;
    padding: 15px 0px 10px 0px;
    border-top: 1px solid black;
}


div.lastMenuItem { border-bottom: 1px solid black; }
div.menuitem:hover { background: #E7F3F5; }
/* a link on the left side menu */
a.menu
{
    color: #585956;
    text-decoration: none;
    font-weight: bold;
    display: block;
    font-family: inherit;
}
a.menu:hover { color: #015174; }
#lmenu img
{
    border: 0px;
}
#cal
{
    margin: 30px 0px;
    text-align: center;
}
#cal img { display: block; margin: 0px auto; }
/* web row is the row of web 2.0 links. rows 1 and 2. */
#webrow1 { width: 105px; margin: 35px auto 0px auto; }
#webrow1 a { display: inline; text-decoration: none; }
#webrow2 { width: 125px; margin: 0px auto; }
#webrow2 a { display: inline; text-decoration: none; }
img.currpage { padding: 20px 0px; } /* the thin helvetica name of the page at the top of the menu */
img.currpage2 { padding: 20px 0px 0px 0px; } /* the thin helvetica name of the page at the top of the menu */
img.currpage3 { padding: 10px 0px 0px 0px; }
#content
{
    display: inline;
    float: left;
    width: 575px;
    padding: 0 10px 0 20px;
    border-left: solid 1px #585956;
    min-height: 1064px; /* this is the height of the lemnu, on average */
}
#content2
{
    display: inline;
    float: left;
    width: 555px;
    padding: 0px 10px 20px 10px;
    border-left: solid 1px #585956;
    min-height: 250px; /* this is the height of the lemnu, on average */
}
#content3
{
    display: inline;
    float: left;
    width: 625px;
    /* padding: 0px 10px 20px 20px; */
    padding: 0px 10px 20px 0px;
    /* border-left: solid 1px #585956; */
    min-height: 650px; /* this is the height of the lemnu, on average */
}
span.hr
{
    width: 90%;
    height: 1px;
    background: #585956;
    display: block;
    margin: 15px auto 10px;
    line-height: 1px;
}
#bottom
{
    margin: 20px 0px 0px 0px;
    width: 100%;
    /*float: left; */
    clear: both;
    padding: inherit;
    background: #00468b; /* Added by SPG */
    color: #fff;
}
#bottomcontainer
{
    width: 770px; /* all containers need some width */
    margin: 15px auto 0px;
}
#boxrow
{
    width: 800px;
    padding: 0px 0px;
    margin: 0px 0px;
}
/* these 2 are different because there are 3 paragaphs. the 2nd two need to
   have spacing on the left side, but the first one does not. so the first
   paragraph will have a separate css class than the other 2 paragraphs.
   this is not a mistake, just silly css workaround.  */
p.footerp1
{
    display: inline;
    float: left;
    width: 220px;
    vertical-align: top;
    font-size: 11px;
    line-height: 12px;
}
p.footerp
{
    width: 150px;
    display: inline;
    float: left;
    vertical-align: top;
    font-size: 11px;
    line-height: 12px;
    margin-left: 100px;
}
#verybottom
{
    text-align: center;
    padding-top: 20px;
    width: 800px;
    float: left;
    margin-bottom: 20px;
}
/* used for the links at the very bottom of the page. */
#verybottom a { text-decoration: none; color: #fff; }
#verybottom a:hover { text-decoration: underline; }
a.botlink { text-decoration: none; color: #fff; text-transform: uppercase; display: block; margin-bottom: .8em; }
a.botlink:hover { text-decoration: underline; color: #fff; }
a.gray { text-decoration: none; color: #fff; display: block; }
a.gray:hover { text-decoration: underline; color: #fff; display: block; }

/*a.seniorLink {text-decoration: none; color: #ffe8bf;}*/
/*a.seniorLink:hover {text-decoration: none; color: #ffffff;}*/

a.seniorLink {text-decoration: none; color: #ffffff;}
a.seniorLink:hover {text-decoration: none; color: #3B73B9;}
a.seniorLink2 {text-decoration: none; color: #fec759;}
a.seniorLink2:hover {text-decoration: none; color: #3B73B9;}
a.seniorLink3 {text-decoration: none; color: #e53a3a;}
a.seniorLink3:hover {text-decoration: none; color: #3B73B9;}

/*other color links */
a.specialLink:link { color: #c0513d; border: none; }
a.specialLink:hover { color: #488db2;}








/****** Style for the Quicklinks Menu ***********/
/* just keep everything in a div with class "quicklinks" */

/* basic positioning */
.quicklinks
{
    width: 140px;
    height: 20px;
    display: inline;
    position: relative;
    font-family: helvetica, arial, sans-serif;
    z-index: 20; /* im assuming we dont have over 20 layers of css anywhere.*/
    text-indent: 20px;
    float: right;
}
/* same ul set up as every css menu... no bullet points no padding */
.quicklinks ul
{
    display: inline;
    padding: 0px;
    margin: 0px;
    list-style-type: none;
}
/* max width of link is 100px, keep text terse */
.quicklinks ul ul
{
    width: 140px;
}
/* this is the top of the list, not a list item, but keep its width the same */
.quicklinks li
{
    float: left;
    width: 140px;
    position: relative;
}
/* style of the name of the menu, the part that says Quicklinks */
.quicklinks a, .quicklinks a:visited
{
    display: block;
    font-size: 11px;
    font-family: helvetica, arial, sans-serif;
    text-decoration: none;
    color: #ffffff;
    background: #18335d; /* updated by SPG */
    width: 110px;
    height: 20px;
}


/* background for the links in the menu */
.quicklinks ul ul a.drop, .quicklinks ul ul a.drop:visited { background: #18335d; }/* Updated by SPG */

/* set up the drop down part. if you change height of quicklinks change top here */
.quicklinks ul ul
{
    visibility: hidden;
    position: absolute;
    height: 0px;
    width: 110px;
    top: 18px; /* change this if you change the height of quicklinks */
    left: 0px;
}

/* IE 6 table fix */
.quicklinks table
{
    position: absolute;
    border-collapse: collapse;
    top: 0px;
    left: 0px;
}

/* these are the links in the menu. white text on dark blue. */
.quicklinks ul ul a, .quicklinks ul ul a:visited
{
    background: #18335d; /* updated by SPG */
    color: #ffffff;
    height: auto;
    line-height: 1em;
    padding: 5px 0px 5px 15px;
    width: 100px;
    text-indent: -10px;
    
}
/* hovercolor for the links in the menu and the top item of the menu */
.quicklinks a:hover, .quicklinks ul ul a:hover { color: #585956; background: #ffffff; }
.quicklinks :hover > a, .quicklinks ul ul :hover > a { color: #585956; background: #ffffff; }
/* key trick behind any css ul li drop menu */
.quicklinks ul li:hover ul, .quicklinks ul a:hover ul
{
    visibility: visible;
}

/**
 * template stuff. highly re-usable, modular styles that can be mixed and 
 * matched (with some restrictions) all over the place. keep these as simple
 * as possible.
 */
 /* links that leave the website will need a little icon to show it. */
a.outlink { background: url('../images/outlink.gif') no-repeat center right; padding-right: 13px; }
/* these links will be for downloading files */
a.download { background: url('../images/download.gif') no-repeat center right; padding-right: 15px; }
/* these links will be for email links */
a.mail, a.email { background: url('../images/mail.gif') no-repeat center right; padding-right: 15px }
.block { display: block; }
.bold { font-weight: bold; }
.bottom-10 { margin-bottom: 10px; }
.bottom-20 { margin-bottom: 20px; }
.bottom-30 { margin-bottom: 30px; }
.bottom-40 { margin-bottom: 40px; }
.bottom-50 { margin-bottom: 50px; }
.top-10 { margin-top: 10px; }
.top-20 { margin-top: 20px; }
.top-30 { margin-top: 30px; }
.top-40 { margin-top: 40px; }
.top-50 { margin-top: 50px; }

/*block image with 10 px space below it */
img.blockbottom { display: block; margin: 0px 0px 10px 0px; border: 0px; padding: 0px; }
img.blockbottom2 { display: block; margin: 0px 8px 10px 0px; border: 0px; padding: 0px; }
/* use for all page names */
/*span.title { font-size: 1.8em; display: block; margin: 0px 0px 10px; }*/
span.title { font-size: 1.8em; line-height: 20px; display: block; margin: 0px 0px 10px; }
/* reserve for middle-sections. */
span.subtitle { margin: 0px 0px 10px; font-size: 1.3em; display: block; }
span.subtitle1 { margin: 0px 0px 0px; font-size: 1.3em; display: block; }
span.subtitle2 { margin: 0px 0px 10px; font-size: 14px; display: block; }
span.subtitle3 { margin: 0px 0px 10px; font-size: 12px; line-height: 18px; display: block; }
span.subtitlesenior {     font-family: Georgia, "Times New Roman", serif; margin: 0px 0px 5px; font-size: 17px; display: block; }
/* re-use this a lot for sub section names. usually better to use this than subtitle */
span.subsubtitle { margin: 0px 0px 10px; font-size: 1.1em; font-weight: bold; display: block; }
/* makes a blue bar horizontally across the page with nifty rounded edge */
span.bluebar { font-size: 1.1em; display: block; background: #18335d; color: #ffffff; margin: 5px 0px; padding: 1px 8px 1px 20px; } /* spg */
div.columns {} /* nothing special, just to help people with the structure */
div.clearer { display: block; clear: both; visibility: hidden; line-height: 0px; height: 0px; }
div.col3-left { float: left; width: 30%; padding: 0% 0% 0% 3%; }
div.col2-left { float: left; width: 48%; padding: 0% 0% 0% 2%; }
div.col2a { float: left; width: 280px; min-height: 100%; padding: 0% 2% 0% 0%; margin: 0px 12px 0px 0px; }
div.col2b { float: left; width: 285px; min-height: 350px; padding: 0% 2% 0% 0%; margin: 0px 12px 0px 0px; }
div.col3-right { float: left; width: 30%; padding: 0% 3% 0% 0%; }
div.col2-right { float: left; width: 48%; padding: 0% 2% 0% 0%; }
div.col3-full { float: left; width: 50%; }
div.col2-full { float: left; width: 50%; }
div.col3 { float: left; width: 29%; padding: 0% 3% 0% 0%; }
div.col3a { float: left; width: 186px; padding: 0px 4px 0px 0px; }
div.col3b { float: left; width: 169px; margin: 0px 4px 0px; padding: 0px 6px 0px 0px; }
div.col2 { float: left; width: 48%; padding: 0% 2% 0% 0%; }
div.col23 { float: left; width: 65%; padding: 0% 1% 0% 0%; }
p.firstp { margin-top: 0px; }
div.col1Home { float: left; width: 100%; padding: 1% 1% 0% 1%; }
div.left {float: left; width: 285px; padding: 0% 2% 0% 0%; margin: 0px 12px 0px 0px; height: 350px; }
div.right {float: left; width: 285px; padding: 0% 2% 0% 0%; margin: 0px 12px 0px 0px; height: 350px; }


/* rounded button */

.button-link {
    background-color:#00468B;
    color:#fff;
    font-size:1.5em;
    padding: 5px 10px 5px 10px;
    min-width: 150px;
    text-align:center;
    text-decoration:none;  
    border-radius: 10px; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border: 1px solid #00468B;
}

.blueheader{
    background: #18335d; 
    color: #ffffff;
    padding:5px;
    } /* spg */

.lightblueheader{
    background: #00468b; 
    color: #ffffff;
    padding:5px;
    } /* spg */


/***** Alumni Spotlights Styles ****/
.question {
    font-weight:bold;
}
.caption {
    font-size:.85em;
    font-style: italic;
}

/* simple class colors */

.2012blue: #5372be
/* grey text: #585956
 * dark blue bg: #015174
 * light blue bg: #80C4CD
 * red: #BA3B34
 */