/* LAPD Archive Styles */

.main-banner {
    position: relative;
    margin: auto;
    margin-top: 8px;
    margin-bottom: 46px;
    width: 512px;
}

.banner-link {
    position: relative;
    float: left;
}

a.venue, span.venue {
    font-weight: bold;
    font-size: 9pt;
}

a.venue:link:hover {
    color: #e0cbb6;
}

a.venue:link:active {
    color: #7a6d53;
}

div.lapdInfo {
	width: 85%;
	margin: auto;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding-bottom: 70px;
	border: none; 
}	

.title {
    font-size: 11pt;
    font-weight: bold;
}

.subtitle {
    margin-top: -8px;
    font-size: 11pt;
    font-weight: normal;
    font-style: italic;
}

.article {
    position: relative; 
    margin: auto;
    /* padding-bottom: 62px; */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    color: #988868;
    text-decoration: none;
    text-align: justify;
}

a.article {
    font-size: 10pt;
}

.announcements {
    margin: auto;
    margin-top: 10px;
    width: 360px;
    padding: 0 4px 0 4px;
    left: 0;
    right: 0;
    border: 2px solid #988868;
    border-radius: 2px;
}

p.announcement {
    font-size: 11pt;
}

a.announcement {
    font-size: 11pt;
    font-weight: bold;
}

.lapd-archive-title {
    margin: auto;
}
	
.collection {
    font-size: 15pt;
    font-family: Avenir, Helvetica, sans-serif;
    letter-spacing: 6px;
    color: #988868;
    margin: auto;
    margin-top: 3px;
    margin-bottom: 20px;
    /* padding-left: 6px; */
}

.col-img {
    width: 328px;
    height: 16px;
    margin-bottom: 5px;
}

.hotlink {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #988868;
    text-decoration: none;
}

.gold {
    position: absolute;
    background-color: #8e7866;
    transition: background-color .4s ease;
    -webkit-transition: background-color .4s ease;
}

.gold:hover {
    background-color: #988868;
}

a.gold {
    margin: 0;
    /* line-height: 1.1;
    top: 28%; */
    padding-top: 9px;
    height: 24px;
    background-color: transparent;
}

a.gold:link {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11pt;
    font-style: normal;
    font-variant: normal;
    color: #000000;
    text-decoration: none;
    background-color: transparent;
}
a.gold:visited {
    font-family: Arial, Helvetica, sans-serif;
    /* font-size: 11pt; */
    font-style: normal;
    font-variant: normal;
    color: #222222;
    text-decoration: none;
}

a.gold:hover {
    color: #704000;
    background-color: transparent;
}

a.gold:active {
    color: #222222;
    background-color: transparent;
}

p.copyright {
    text-align: justify;
    color: #988868;
    background-color: #330000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9pt;
    padding: 7px 10px;
    border: 2px solid #988868;
    border-radius: 6px;
    position: relative;
    width: 500px;
    bottom: -10px;
}

/* Ribbon *********************************************************************/
.lapd-ribbon {
    position: fixed; 
    bottom: 20px;
    height: 34px;
    padding: 0;
}

.lapd-ribbon.on {
    width: 100%;
    transition: left .2s ease-out .05s, width .2s ease-out .1s;
    -webkit-transition: left .2s ease-out .05s, width .2s ease-out .1s;
}

.lapd-ribbon.off {
    left: -150%;
    width: 0;
    transition: left .2s linear, width .2s linear;
    -webkit-transition: left .2s linear, width .2s linear;
}

.lapd-ribbon.short.on {
    left: 150px;
}

.lapd-ribbon.short.on .ribbon-links {
    margin-right: 165px;
}

.lapd-ribbon.long.on {
    left: 0;
}

.lapd-ribbon.short.off {
    left: 0;
}

.ribbon-links {
    position: relative;
    height: 34px;
    margin-left: 15px;
    margin-right: 15px;
    background-color: #8e7866;
}

.ribbon-link {
    position: absolute;
}

.ribbon-link:first-child { left: 2%; }
.ribbon-link:nth-child(2) { left: 19%; }
.ribbon-link:nth-child(3) { left: 45%; }
.ribbon-link:nth-last-child(2) { left: 70%; }
.ribbon-link:last-child { right: 2%; }

#restore-btn {
    position: absolute;
    width: 34px;
    height: 34px;
    right: 0;
    top: 0;
    background-image: url("graphics/gold more2.png");
    background-size: 100%;
    background-position: center;
}

#retracted-ribbon {
    height: 34px;
    bottom: 20px;
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14pt;
    font-style: normal;
    font-weight: bold;
}

#retracted-ribbon.off {
    left: -15px;
    width: 0;
    transition: left .1s linear, width .1s linear;
    -webkit-transition: left .1s linear, width .1s linear;
}

#retracted-ribbon.on {
    width: 50px;
    transition: width .1s linear .2s;
    -webkit-transition: width .1s linear .2s;
}
 
 #retracted-ribbon.short.on {
    left: 150px;
}

#retracted-ribbon.long.on {
    left: 0;
}