/* main.css */

/* These are the colors and fonts used throughout the webpage.
 * I've listed them here so that future maintainers can easily
 * do a search-and-replace for these to change the site theme if they choose.
 *   'Roboto',sans-serif; Font for the title text
 *   'Roboto-Slab',serif; Font for the body text 
 *   #fefefe; Background color of the site
 *   #505050; Foreground (text) color of the site
 *   #003066; UCR Navy, "Connection" in the logo, current page in navigation, titles in the Program
 *   #2d6cc0; UCR Blue, Heading color, subtitles in the Program
 *   #f1ab00; UCR Gold, "Math" in the logo, hover color for links
 *   #c88e00; UCR Gold Darkened, color for links
 *   #7a6e67; UCR Gray, not currently used for anything
 */



body{
    background-color: #fafafa;
    background-size: cover;
    background-attachment: fixed;
    color: #505050; 
    text-align:left;
    font-family:'Roboto',sans-serif;
    font-size:1em;
    line-height:1.5em;
    margin: 60px auto;
    width: 1000px;
}

a{color: #c88e00; text-decoration:none;}
a.current{color: #003066;}
a:hover{color: #f1ab00; text-decoration:none;}
a.current:hover{color: #003066;}
h1,h2,h3,h4{clear:left; color: #2d6cc0; margin:1.5em 0em 1em 0em; font-family:'Roboto Slab',serif;}
h1{font-size:2.67em;}
h2{font-size:2.00em;line-height: 1.1em;}
h3{font-size:1.67em;}
h4{font-size:1.33em;}
p{list-style:none; margin:24px auto 24px auto; padding:0px; width:900px; text-align:left;}
ul{list-style:circle; margin:24px auto 24px auto; padding:0px; width:800px; text-align:left;}
ul li{list-style:circle; margin:0px auto 0px auto; padding:0px; text-align:left;}
i,em{font-style:italic;}
b,strong{font-weight:bold;}
sup{
    vertical-align: super;
    font-size: 0.8em;
    line-height: 0;
}
sub{
    vertical-align: sub;
    font-size: 0.8em;
    line-height: 0;
}
table{
    width: 1000px;
    margin: 12px auto 24px auto;
    float: center;
    /* UNCOMMENT THIS FOR DEBUGGING THE ALIGNMENT */
    /*border: 1px solid black;*/
}
th,td{
    text-align: left;
    /* UNCOMMENT THIS FOR DEBUGGING THE ALIGNMENT */
    /*border: 1px solid black;*/
}

/* Website Banner */
.banner {position: relative; font-family:'Roboto Slab',serif;padding: 60px 0 0 0;}
.top-left {font-size:2.7em; line-height: 1.1em; font-weight: bold; color: #505050; background: #fafafa; text-align: center; width: 1000px; height: 120px; position: absolute; padding: 20px 0 0 0; top: 0px;}
.bottom-right {font-size:2.33em; color: #fefefe; line-height: 1.5em; width: auto; height: 100px; padding: 0px 27px 27px 0px; text-align: right; position: absolute; bottom: 0px; right: 0px;}

/* Navigation Links (Home, Registration, etc) */
table.navigation{width:800px;}
td.navigation{font-size:1.67em; color: #bbbbbb; white-space:nowrap; width:20%; text-align:center; vertical-align:middle; padding:0px 0px 0px 0px;}

/* Sponsor Images */
table.sponsors{width:800px;}
td.sponsor{white-space:nowrap; width:33%; text-align:center; vertical-align:middle; padding:0px 0px 0px 0px;}
td.sponsor img{width: 100%}

/* The Table on the Program Page */
td.room{padding: 4px 12px 4px 4px; width: 90%; vertical-align:bottom; font-size:1.67em; color: #003066; height:32px;}
td.date{white-space:nowrap; width:130px; text-align:right; vertical-align:top; padding:4px 16px 0px 0px;}
td.title{padding: 4px 12px 4px 4px; width: 90%; vertical-align:top; font-size:1.5em; color: #2d6cc0; height:32px;}
td.title-special{padding: 4px 12px 4px 4px; width: 90%; vertical-align:top; font-size:1.67em; color: #003066; height:32px;}
td.speaker{padding: 4px 12px 4px 4px; font-style: italic; font-size:1em; max-height:999999px}
td.abstract{padding: 4px 12px 12px 4px; font-size:1em; max-height:999999px}
td.abstract img{display: block; margin: 4px auto 8px auto}
table.plenary{padding-top: 8px; background: #ffffff;}

/* Registration and Directions Iframes and Images */
iframe.registration{display:block; margin:1em auto 2em auto; width:700px; height:1400px; border:none;}
iframe.directions{display:block; margin:1em auto 2em auto; width:800px; height:400px; border:none;}
img.center{display:block; width:67%; margin:1em auto 2em auto;}

/* Flyer Images */
table.flyers{width:800px;}
td.flyer{white-space:nowrap; width:50%; text-align:center; vertical-align:middle; padding:0px 0px 0px 0px;}
td.sponsor img{width: 100%}

/* The Footer */
table.footer{font-size:0.875em; margin: 72px auto 12px auto; width:400px;}
td.footer{width:auto; text-align:center; vertical-align:middle;}

/* MathConnections Logo */
.Math{color: #f1ab00;} 
.Connections{color: #2d6cc0;}
.Year{color: #505050; font-size:0.67em; font-weight: lighter;}

.styled {
    border: 0;
    line-height: 2.5;
    padding: 0 40px;
    font-size: 1.5rem;
    text-align: center;
    display:block;
    margin:0 auto;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    border-radius: 10px;
    background-color: rgba(220, 0, 0, 1);
    background-image: linear-gradient(to top left,
                                      rgba(0, 0, 0, .2),
                                      rgba(0, 0, 0, .2) 30%,
                                      rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
                inset -2px -2px 3px rgba(0, 0, 0, .6);
}

.styled:hover {
    background-color: rgba(255, 0, 0, 1);
}

.styled:active {
    box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
                inset 2px 2px 3px rgba(0, 0, 0, .6);
}

*{
    border:0;
    font:inherit;
    font-size:1em;
    margin:0;
    padding:0;
    vertical-align:baseline;
}