/* page dimensions

        CMS template body is 960 in width
        
            quicklinks = 210
                right margin is 10, leaving 200
                
                quicklinks image is 200
                    left and right padding is 20
                    content width is 200-20-20=160
            
            remaining page width is 750
            
                left column (news) is 380
                
                    margin is 0
                    right padding is 10 to produce gutter
                    width is 370
                    
                    the news item width does not need to be specified
                
                right column (events) is 370
                
                    left padding is 10 to indent from colored background
                    content width is 360
                    
        Height
        
            Left column: menu image height is 800
                Height = 780, top & bottom is 10 each = 800
            
            Main column: banner 255 + new heading 55 + news/events 400 = 710
            
                Banner (rotating slides) height is 255
                Nav (icons) is 10 high, with -17 position
                Control(pause) is 8, with -26 position
                
                Header is 35 with 10 margin on top, 2 border, 8 bottom = 55
                
                news = 522
            
                news & events = 545?
                
                Events = 400
                    Height is 450, offset/margin goes up 100, 50 bottom padding
            
            

                
        Slide dimensions
        
            255 height
            750 total width
                picture can be any width, but 380 is recommended (height must be 255)
                370 for text text
        

*/

/* Colors of CMS header gradient
    Top: "#2B5590"
    Bottom: "#4B71A3"
    http://tools.dynamicdrive.com/gradient/

*/


/* in menu nav, fill unused space on right with same background as menu items */
#tdr_nav_list
{
    background-image: url("http://www.ucsd.edu/common/cwp/active-apple/css/sprite.gif");
    background-position: 0px -300px;
    border-right: 1px solid #ADBCC5;
}

/* turn off border of search box */
#tdr_search /* the band across the entire screen */
{
    border-bottom: 0px none;
    background-color: White;
}

/* extend form background color across page body width */
#tdr_search #tdr_search_content /* the 960 width area */
{
    background: none repeat scroll 0 0 #EFF4F7;
    border-left:   1px solid #E0E5E7;
    border-right:  1px solid #E0E5E7;
    border-bottom: 1px solid #E0E5E7;
    width: 958px;
}

/* remove left and right border from form since tdr_search_content now has border */
#tdr_search form
{
    border-left: none;
    border-right: none;
}
*/

/* font sizes

    h1      1.5 em, 24px
    h2      1.2 em, 19.2px
    p       0.9 em, 14.4px

/* -------------------------------------------------------------------------------------------- */
/* styles that affect entire page */


* {margin:0;padding:0;} /* global reset of margins and padding to zero */

#content
{
    width: 960px;
    margin-bottom:0;
    /* move up the body content to cover the breadcrumb */
    position: relative;
    margin-top: -27px;
}

#content p,
#content li,
#tdr_content,
.tdr_slide h1,
.tdr_fonts,
.tdr_fonts p,
.tdr_fonts li,
.tdr_fonts h1,
.tdr_fonts h2,
.tdr_fonts h3
{
    font-size: 1em;
    font-family: Arial,sans-serif;
    font: 1em Arial,sans-serif;
    font-weight: normal;
    color: rgb(23,65,127); /* blue */
    margin-bottom: 0;
    
}

#content h1
{
    font-size:1.5em;
    font-style:italic;
}

#content h2
{
    font-size:1.2em;
}

/* -------------------------------------------------------------------------------------------- */
/* styles for quicklinks column on left of homepage */

#quicklinks
{
    background-color: #2B558F; /* dark blue in top of cms header */
    
    /* add a short color gradient to bottom */
    background-image: url("/render/file.act?path=_images/stock/homepage_left_menu_gradient.png");
    background-image: url("http://psychology.ucsd.edu/_images/stock/homepage_left_menu_gradient.png");
    background-repeat: no-repeat;
    background-position: bottom;
    
    float: left;
    margin: 0px 10px 0px 0px; /* the 10px creates the gutter to the right */
    padding: 10px 10px 10px 20px;
    width: 170px;
    height: 811px;
    
    /* make bottom border white to introduce space between footer */
    border-bottom: 1px solid white;
    
}

#quicklinks h1, #quicklinks h2
{
    /*color: rgb(222,233,249); /* White */;
    color: White; /* White */;
    margin: 5px 0px 0px 0px;
}

#quicklinks ul
{
    margin: 0px 0px 15px 0px;
}

#quicklinks li
{
    list-style: none outside none;
    margin: 5px 0px 0px 0px;
    font-size: 0.9em;
}

#quicklinks a:link
{
    color:rgb(192,209,230); /* very light gray */
}

#quicklinks a:visited
{
    color:rgb(192,209,230); /* very light gray */
}

#quicklinks a:hover
{
    color:White;
}


/* -------------------------------------------------------------------------------------------- */
/* styles that affects main_content */

#content #main_content
{
    float: left;
    width: 750px;
}

/* -------------------------------------------------------------------------------------------- */
/* styles that affects rotating banner */

#content .tdr_slideshow
{
    float: left;
    width: 750px;
    height: 255px;
    background-color: rgb(192,212,222);
}

#content .tdr_slideshow_nav
{
    /* move the slideshow controls up into the slide itself */
    top: 0px;
    margin-top: -17px;
}

#content .tdr_slideshow_control
{
    /* move the slideshow controls up into the slide itself */
    top: 0px;
    margin-top: -17px;
}

#content .tdr_slide
{
    /* reset font sizes */
    font-size: 1em;
}

#content .tdr_slide img
{
    float: left;
    margin: 0px 20px 0px 0px; /* create 20px margin between slide image and text */
}

#content .tdr_slide h1
{
    /* 10px top and 20px right padding */
    padding: 10px 20px 0px 0px; 
}

#content .tdr_slide p
{
    /* 10px top and 20px right padding */
    padding: 10px 20px 0px 0px; 
    
}

#content .tdr_slide p a:link
{
    color:rgb(82,99,120); /* dark gray */
}

#content .tdr_slide p a:visited
{
    color:rgb(82,99,120); /* dark gray */
}

#content .tdr_slide p a:hover
{
    color: rgb(0,47,119); /* blue */
}

#content .tdr_slideshow_nav a
{
    background-color: rgb(192,209,230); /* very light gray in quicklinks */
    border: 1px solid rgb(248,179,66); /* orange */
    color: rgb(192,209,230); /* very light gray in quicklinks */
}

#content .tdr_slideshow_nav a:hover
{
    background-color: rgb(152,159,180); /* darker grey */
    border: 1px solid rgb(248,179,66); /* orange */
    color: rgb(152,159,180); /* darker grey */
}

#content .tdr_slideshow_nav a.activeSlide
{
    background-color: #2B558F; /* Dark blue of quicklinks background */
    color: #2B558F; /* Dark blue of quicklinks background */
}

/* -------------------------------------------------------------------------------------------- */
/* styles that affect news and events */

#news-and-events
{
    float: left;
    width: 750px;
    
    /* reset font size */
    font-size: 1.0em;
}

#news-and-events h1
{
    position: relative;
    z-index: 2;
    
    color:rgb(248,179,66); /* orange */
    font-size: 1.8em;
    
    border-bottom: 3px solid rgb(248,179,66); /* orange */
    margin: 10px 10px 8px 0px;
}

#news-and-events a:link
{
    color:rgb(82,99,120); /* dark gray */
}

#news-and-events a:visited
{
    color:rgb(82,99,120); /* dark gray */
}

#news-and-events a:hover
{
    color: rgb(0,47,119); /* blue */
}


/* -------------------------------------------------------------------------------------------- */
/* styles that affect news (left column) */


#news
{
    margin: 0px 0px;
    padding: 0px 10px 0px 0px;
    width: 370px;
    float: left;
    font-size: 100%;
}

#news li
{
    float: left;
    margin: 0px 0px 10px 0px; /* 10 pixels vertically between each news item */
    padding: 0px 10px 0px 0px; /* 10 pixels in right margin for headings/text */
    list-style: none outside none;
}

#news li img
{
    float: left;
    width: 100px;
}

#news li h2
{
    margin: 0px 0px 5px 110px; /* 110 clears the 100px picture on the left */
    color: rgb(0,47,119); /* blue */
    font-size: 1.2em;
    font-style: italic;
    line-height: 120%;
}

#news li p
{
    margin: 0px 0px 0px 110px; /* 110 clears the 100px picture on the left */
    font-size: 0.9em;
    line-height: 120%;
    
}

/* -------------------------------------------------------------------------------------------- */
/* styles that affect events (right column) */


#events
{
    /* this sneaks the background up to meet the bottom of rotating banner
        value should technically be 55px, but 100px allows ample overlap in case header
        height changes in future */ 
    margin-top: -100px;
    padding-top: 100px;
    /* indent in fromt left */
    padding-left: 20px;
    /* bottom padding */
    padding-bottom: 50px;

    width: 350px;
    height: 470px;
    background-color: rgb(240,245,246);
    
    float: left;
    position: relative;
    z-index: 1;     
    
    font-size: 1em;

    /* make bottom border white to introduce space between footer */
    border-bottom: 1px solid white;
}

#events h2
{
    color: rgb(0,47,119); /* blue */
    font-size: 1.2em;
    font-style: italic;
    line-height: 110%;
}


#events ul {
    margin: 0px 0px 0px 0px;
    margin-left: 0;
    margin-bottom: 0;
    padding-left: 0;
    padding-right: 20px;
}
#events ul li {
    list-style: disc inside none;
    margin: 10px 0px 0px 0px;
    color: rgb(0,47,119); /* blue */
    font-size: 1.1em;
    
}

#events ul li ul {
}

#events ul li ul li {
    list-style: none outside none;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    font-size: 100%;
    font-size: 0.82em;
    line-height: 120%;
}