/* 2012.05.16
   Guan Ming Teo
   
   2012.06.15 - 2012.09.27
   Timothy Phillips

   Spotlight device */





#section_spotlight {
    padding: 9px;
    position: relative;
    background-color: #000;
    overflow:hidden;}

#spotlight { position: relative;
    
    width: auto;
    margin-left:0px;
    margin-right:0px;
    height: 300px;

    overflow: hidden; /* for slide animation */
    /*padding: 9px;*/
    background-color: #000; 
    
    }

#spotlight #spotlight-item-new {
    visibility: hidden;
    /*display:none;*/
	}

#spotlight .spotlight-item { min-width: 300px;
    color: #fff; 
    position:absolute;
    /*top:9px;
    left:9px;*/
	background-color:#161616; 
	width:100%; 
    max-width:1182px;
	height:300px; 
	text-align:center;
	overflow: hidden;
    display: block;
    background-position: center center;
    transition-property: background-position, background-size;
    transition-duration: 0.2s;
}


#spotlight .spotlight_copy_left {
    background-position: 20% center;
}

#spotlight .spotlight_copy_right {
    background-position: 80% center;
}


#spotlight .spotlight_inactive {
    display: none;
}

	
#spotlight #spotlight-img-old {margin: 0px; 
	border: 0px none;
	max-width: 1182px; 
	/*max-height: 300px;*/
	}
#spotlight #spotlight-img {

    margin: 0px;
	border: 0px none; 
	max-width: 1182px;
    margin-right: 0px;
    margin-bottom: 0px;
	/*max-height: 300px;*/
	}

#spotlight .spotlight_copy_left #spotlight-img{
    float:right; /* aligns image to right edge when viewport is too small */
    margin-right: 0px;
    margin-bottom: 0px;

}

#spotlight .spotlight-item .spotlight-copy { position: absolute;
	font-size: 1.1em;
    left: 40px;
    top: 20px;
    text-align:left;
    width: 360px;
    min-height:120px;
	max-height:240px;
    overflow: auto;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px 20px;
    background: url('http://static.weboffice.uwa.edu.au/visualid/graphics/devices/spotlight/spotlight-copy-flow.png') repeat; 
    transition-property: top, left, bottom, right, width, height;
    transition-duration: 0.2s;}

#spotlight .spotlight-item .spotlight-copy:focus{
    border: 1px dotted gray;
    padding: 9px 19px;
}


#spotlight .spotlight_copy_left .spotlight-copy { 
    left: 40px; }

#spotlight .spotlight_copy_right .spotlight-copy { 
    right: 40px; 
	left: auto !important;}

#spotlight .spotlight-item .spotlight-copy h3 { margin: 0.5em 0; /* 9/18, 18/18 */
    font-size: 1.5em; 
    color: white; /* 18/12 */ }

#spotlight .spotlight-item .spotlight-copy h3 a:link,
#spotlight .spotlight-item .spotlight-copy h3 a:visited{
    color: white;
    text-decoration: none;
}
#spotlight .spotlight-item .spotlight-copy h3 a:active,
#spotlight .spotlight-item .spotlight-copy h3 a:focus,
#spotlight .spotlight-item .spotlight-copy h3 a:hover{
    text-decoration: underline;
}

#spotlight .spotlight-item .spotlight-copy p{
    margin: 0.7em 0;}

#spotlight .spotlight-item .spotlight-copy p br{
    margin-bottom: 1em;
}

#spotlight .spotlight-item .spotlight-copy p.introduction { color: #fff; }

#spotlight .spotlight-item .spotlight-copy a { color: #87bbca;
    text-decoration: underline; }

#spotlight .spotlight-item .spotlight-copy a:focus, 
#spotlight .spotlight-item .spotlight-copy a:hover, 
#spotlight .spotlight-item .spotlight-copy a:active { color: #fff; }


#spotlight .spotlight_copy_none .spotlight-copy { 
    position: absolute;
    /*top: 20%;
    bottom: 20%;
    left: 10%; 
    right: 10%;*/

    top: 0%;
    bottom: 0%;
    left: 0%; 
    right: 0%;
     
    width: auto !important;
    background-image: none;
    border-radius: 20px;
}
#spotlight .spotlight_copy_none .spotlight-copy h3 a{ 
    position: absolute;
    top: -50px;
    bottom: 0;
    left: 0; 
    right: 0;
    display: block;
    transition: background-color 1s ease;
    background-color: rgba(255,255,255,0);
}

#spotlight .spotlight_copy_none .spotlight-copy h3 a:focus,
#spotlight .spotlight_copy_none .spotlight-copy h3 a:hover {    
    background-color: rgba(255,255,255,0.1);   
} 

#section_spotlight a.spotlight-back, 
#section_spotlight a.spotlight-next { position: absolute;
    
    top: 20%;
    width: 26px;
    height: 148px;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;

    border: 1px solid black;
    text-indent: -10000px;
    text-decoration: none; }

#section_spotlight a.spotlight-back {
    left: 0;
    background-image: 
url('images/spotlight-arrow-left.png'); 
}

#section_spotlight a.spotlight-back:focus, 
#section_spotlight a.spotlight-back:hover, 
#section_spotlight a.spotlight-back:active {
    }

#section_spotlight a.spotlight-next {
    right: 0;
    background-image: 
url('images/spotlight-arrow-right.png'); 
}

#section_spotlight a.spotlight-next:focus, 
#section_spotlight a.spotlight-next:hover, 
#section_spotlight a.spotlight-next:active {
     }

#section_spotlight a.spotlight-back, 
#section_spotlight a.spotlight-next{ /* normal */
    background-color: #87BBCA; /*#87BBCA;*/
    transition-property: top, background-color;
    transition-duration: 0.2s;
}


#section_spotlight a.spotlight-next:focus, 
#section_spotlight a.spotlight-back:focus,
#section_spotlight a.spotlight-next:active, 
#section_spotlight a.spotlight-back:active  { /* darker */
    background-color: #73B0C1; /*#73B0C1;*/
}
#section_spotlight a.spotlight-next:hover, 
#section_spotlight a.spotlight-back:hover  { /* lighter */
    background-color: #A8D1DE; /*#A8D1DE;*/
}

/*
#section_spotlight a.spotlight-back, 
#section_spotlight a.spotlight-next { position: absolute;
    left: 0;
    top: 20%;
    width: 26px;
    height: 148px;
    overflow: hidden;
    background: url('http://static.weboffice.uwa.edu.au/visualid/graphics/devices/spotlight/spotlight-nav-bg.gif') no-repeat 0 0;
    text-indent: -10000px;
    text-decoration: none; }

#section_spotlight a.spotlight-back:focus, 
#section_spotlight a.spotlight-back:hover, 
#section_spotlight a.spotlight-back:active { background-position: -26px 0; }

#section_spotlight a.spotlight-next { left: auto;
    right: 0;
    background-position: 0 -148px; }

#section_spotlight a.spotlight-next:focus, 
#section_spotlight a.spotlight-next:hover, 
#section_spotlight a.spotlight-next:active { background-position: -26px -148px; }
*/

#section_spotlight ul.spotlight-nav { position: absolute;
    left: 16px;
    bottom: 16px;
    margin: 0;
    padding: 9px 6px;
    background: url('http://static.weboffice.uwa.edu.au/visualid/graphics/devices/spotlight/spotlight-copy-flow.png') repeat 0 0;
    list-style-image: none; }
    #ie7 #section_spotlight ul.spotlight-nav { min-height: 1%; }
    #ie6down #section_spotlight ul.spotlight-nav { height: 1%; }

#spotlight ul.spotlight-nav:after { clear: left;
    display: block;
    visibility: hidden;
    height: 0;
    content: ' '; }

#section_spotlight ul.spotlight-nav li { display: inline;
    margin: 0;
    padding: 0; }

#section_spotlight ul.spotlight-nav li a { float: left;
    width: 12px;
    height: 12px;
    margin: 0 3px;
    background-color: #fff;
    font-weight: bold;
    color: #000;
    text-indent: -10000px;
    text-decoration: none; }

#section_spotlight ul.spotlight-nav li.spotlight-nav-active a { background-color: #7ac4d9; }

#section_spotlight ul.spotlight-nav li a:focus,  
#section_spotlight ul.spotlight-nav li a:hover,
#section_spotlight ul.spotlight-nav li a:active {
    opacity:0.7;}

#spotlight ul.spotlight-nav-active li a:focus,  
#spotlight ul.spotlight-nav-active li a:hover,
#spotlight ul.spotlight-nav-active li a:active {
    opacity:0.7;}


#section_spotlight .spotlight-nav-right .hide{
    position: absolute;
    left: -9999px;
}

#section_spotlight .spotlight-nav-right{
	background: url("http://static.weboffice.uwa.edu.au/visualid/graphics/devices/spotlight/spotlight-copy-flow.png") repeat transparent;
    list-style-image: none;
    bottom: 16px;
    right: 16px;
    margin: 0;
    padding: 9px 6px;
    position: absolute;
    width:18px;
    height:12px;
}

#section_spotlight .spotlight-nav-right li img{
    border:0px;
    padding:0px;
    margin:0px;
}

#ie7 #section_spotlight .spotlight-nav-right {
    min-height: 1%;
}
#ie6down #section_spotlight .spotlight-nav-right {
    height: 1%;
}
#section_spotlight .spotlight-nav-right:after {
    clear: left;
    content: " ";
    display: block;
    height: 0;
    visibility: hidden;
}
#section_spotlight .spotlight-nav-right li {
    display: inline;
    margin: 0;
    padding: 0;
    height: 12px;
}
#section_spotlight .spotlight-nav-right li a {
    background-color: none;
    text-indent:0 !important; //for ie7
    float: left;
    font-weight: bold;
    height: 12px;
    padding:10px;
    margin: -10px -10px -10px -7px;
    text-decoration: none;
    width: 12px;
}

#section_spotlight .spotlight-nav-right li a:focus,
#section_spotlight .spotlight-nav-right li a:hover {
    opacity:0.7;
}

#bodycontainer .spotlight-menu {width:1018px; margin-left:-31px; margin-right:30px;}

#bodycontainer .spotlight-menu ul { margin: 0 0 1.25em; /* 15/12 */
    padding: 0;
    background-color: #333;
    border-top: 1px solid #fff;
    list-style-image: none; }
    #ie7 .spotlight-menu ul { min-height: 1%; }
    #ie6down .spotlight-menu ul { height: 1%; }

#bodycontainer .spotlight-menu ul:after { clear: left;
    display: block;
    visibility: hidden;
    height: 0;
    content: ' '; }

#bodycontainer .spotlight-menu ul li { float: left;
    display: inline;
    width: 19.9%;
    margin: 0;
    padding: 0;
    background: #333 url('http://www.uwa.edu.au/__data/assets/image/0011/1572950/nav-campaign-item-flow.gif') repeat-y 100% -1px;; }

#bodycontainer .spotlight-menu ul li a { display: block;
    min-height: 53px;
    margin-right: 2px;
    padding: 14px 15px 15px 33px;
    font-size: 1.166666em; /* 14/12 */
    color: #fff;
    text-decoration: none; 
    background: url('http://www.uwa.edu.au/__data/assets/image/0010/1572949/nav-campaign-bullet.gif') no-repeat 1em 1.214286em; /* 14/14, 17/14 */
}
#ie6down .spotlight-menu ul li a { height: 53px; }

#bodycontainer .spotlight-menu ul li:nth-child(1) a { background-color: #0d0d0d; }
#bodycontainer .spotlight-menu ul li:nth-child(2) a { background-color: #191919; }
#bodycontainer .spotlight-menu ul li:nth-child(3) a { background-color: #262626; }

#bodycontainer .spotlight-menu ul li a:focus, 
#bodycontainer .spotlight-menu ul li a:hover, 
#bodycontainer .spotlight-menu ul li a:active { background-color: #000; }



#spotlight .spotlight-copy blockquote{
	padding-left:20px;
	padding-right:20px;
	font-style:italic;
	position:relative;
}

#spotlight .spotlight-copy blockquote .quotetop{float:left;left:0px;top:0px;position:absolute;}
#spotlight .spotlight-copy blockquote .quotebottom{float:right;right:-20px;bottom:0px;position:absolute;}


#bodycontainer #ie6down #spotlight .spotlight-copy blockquote .quotetop{float:left;}
#bodycontainer #ie6down #spotlight .spotlight-copy blockquote .quotebottom{float:right;}

#spotlight .spotlight-copy blockquote, q {
    quotes: none;
}
#spotlight .spotlight-copy blockquote:after, q:before, q:after {
    content: "";
}

#spotlight .spotlight-copy ul.linklist {
    background: url('http://static.weboffice.uwa.edu.au/visualid/graphics/devices/spotlight/spotlight-nav-campaign-bullet.gif') no-repeat left 40%;
    padding-left:18px;
    list-style-image: none;
    margin-top: 0.8em;
    margin-bottom: 0.8em;
}
#spotlight .spotlight-copy ul.linklist li{
    margin-left: 0px;
    
}

#spotlight .spotlight-copy ul.linklist a:link{
    text-decoration: none;
}
#spotlight .spotlight-copy ul.linklist a:hover,
#spotlight .spotlight-copy ul.linklist a:focus{
    text-decoration: underline;
}


/*super mobile spotlight */
@media screen and (max-width: 600px){
    #section_spotlight #spotlight {
        height: 345px;

    }
    #section_spotlight ul.spotlight-nav {
        bottom: 5px;
        left: 5px;
    }
    #section_spotlight ul.spotlight-nav-right {
        bottom: 5px;
        right: 5px;
    }
    #section_spotlight #spotlight .spotlight-item {

        background-position: center top;
        background-repeat: no-repeat;
        background-size: auto 160px;
        background-color: #000;
        overflow: hidden;
        height: 345px;
    }


    #section_spotlight #spotlight .spotlight_copy_right .spotlight-copy, #section_spotlight #spotlight .spotlight_copy_left .spotlight-copy {
        /*background: none repeat scroll 0 0 transparent;*/
        /*bottom: 150px;*/
        font-size: 100%;
        min-height: 100px;
        padding: 0px 10px 0px 10px;
        left: 27px !important;
        right: 27px !important;
        top: 170px;
        bottom: 0px;
        overflow-y: auto;
    }
    #section_spotlight #spotlight .spotlight-item .spotlight-copy h3 {
        margin-top: 0px;

    }
    #section_spotlight #spotlight .spotlight-item .spotlight-copy div {
        margin-bottom: 25px;
    }

    #section_spotlight #spotlight .spotlight_copy_none .spotlight-copy { 
        min-height: 50px;
        bottom: 207px;
        left: 20px;
        right: 20px;
        top: 20px;
    }
    #section_spotlight a.spotlight-back{
        top: 180px;
        border-left: 0px;
        border-top: 0px;
        border-right: 8px solid black;
    }

    #section_spotlight a.spotlight-next {
        top: 180px;
        border-right: 0px;
        border-top: 0px;
        border-left: 8px solid black; /* larger tap area on phones */
    }
    #section_spotlight{
        padding: 10px 0px;
    }
}