#photo_thumbnails { position: relative; padding-left: 40px; background-color: #323232; border-top: 1px solid #999999; padding: 10px 0; }
#thumbnail_shade { position: absolute; top: 0; left: 0; right: 0; background: #323232 url(https://media1.shmoop.com/images/sprites/repeat-x.png) 0 -1580px; height: 100px; }

#photo_thumbnails_left { position: absolute; top: 55px; left: 15px; height: 15px; width: 10px; background-image: url(https://media1.shmoop.com/images/sprites/static_sprites.png); background-position: -80px -230px; cursor: pointer; z-index: 2; }
#photo_thumbnails_left.disabled { background-position: -80px -210px; cursor: default; }
#photo_thumbnails_right { position: absolute; top: 55px; right: 15px; height: 15px; width: 10px; background-image: url(https://media1.shmoop.com/images/sprites/static_sprites.png); background-position: -100px -230px; cursor: pointer; z-index: 2; }
#photo_thumbnails_right.disabled { background-position: -100px -210px; cursor: default; }
#photo_thumbnails_area { position: relative; height: 100px; width: 520px; left: 40px; overflow: hidden; z-index: 1; }
#photo_thumbnails_container { position: absolute; top: 0; left: 0; width: 10000px; height: 100px; }

.photo_thumbnail_page { width: 520px; height: 100px; float: left; position: relative; }
.photo_thumbnail { float: left; height: 100px; width: 100px; line-height: 100px; margin-right: 4px; text-align: center; }
.photo_thumbnail a{ background-color: black; }
.photo_thumbnail img { vertical-align: middle; max-height: 100px; max-width: 100px; }

/* intro page */
div#photos_intro { width: 600px; }
div#photos_intro_large { min-height: 200px; }
div#photos_intro_large_photo { background-color: #ccc; width: 250px; text-align: center; padding: 10px; }
div#photos_intro_large_text { width: 281px; float: right; margin-right: 20px; }
div#photos_intro_large_text p { margin-top: 0; font-size: 15px; line-height: 19px; }
div#photos_intro_grid { padding-top: 20px; padding-left: 0; padding-bottom: 5px; }
div.photo_grid_item { vertical-align: middle; text-align: center; line-height: 100px; height: 100px; width: 100px; float: left; border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #aaa; border-bottom: 1px solid #999; padding: 10px 9px 14px; }
div.photo_grid_item:hover { background-color: #ddd; }
div.photo_grid_item img { vertical-align: middle; border-top: 1px solid #bbb; border-left: 1px solid #999; border-right: 1px solid #999; border-bottom: 1px solid #666; }
div.photo_grid_item img:hover { border: 1px solid #555; }
#start_slideshow_button { margin-left: 75px; margin-top: 30px; }

/* slideshow */
.photo_slideshow { width: 600px; }
div#photo_image_overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: none; }
div#photo_image:hover div#photo_image_overlay { display: inline; }
div#sharebar { position: absolute; top: 10px; left: 10px; }
div.sharebar_cap_left { background: url(https://media1.shmoop.com/images/sprites/static_sprites.png) -760px -210px; height: 35px; width: 5px;float: left; }
div.sharebar_cap_right { background: url(https://media1.shmoop.com/images/sprites/static_sprites.png) -770px -210px; height: 35px; width: 5px;float: left; }
div.sharebar_items { height: 35px; background: url(https://media1.shmoop.com/images/sprites/repeat-x.png) 0 -1680px;float: left; }
div.sharebar_item { float: left; line-height: 26px; height: 26px; margin-top: 5px; color: white; font-weight: bold; padding: 0 7px; border-right: 1px solid #ddd; cursor: pointer; }
div.sharebar_item.last { border-right: none; }
div.overlay_left, div.overlay_right { border: 1px solid green; position: absolute; top: 0; bottom: 0; width: 80px; }
div.overlay_left { left: 0; }
div.overlay_right { right: 0; }

div#previous_photo, div#next_photo { height: 35px; width: 35px; position: absolute; top: 200px; background-image: url(https://media1.shmoop.com/images/sprites/static_sprites.png); cursor: pointer; }
div#previous_photo { background-position: -680px -210px; left: 20px; }
div#next_photo { right: 20px; background-position: -720px -210px; }
div#photo_image:hover div#photo_image_overlay { display: inline; }

.large_grey_header { position: relative; }
.large_grey_header .cap_left, .large_grey_header .cap_right { position: absolute; top: 0; width: 5px; height: 52px; background-image: url(https://media1.shmoop.com/images/sprites/static_sprites.png); z-index: 2; }
.large_grey_header .cap_left { left: 0; background-position: -800px -190px; }
.large_grey_header .cap_right { right: 0; background-position: -810px -190px; }
.large_grey_header .header_middle { width: 590px; margin-left: auto; margin-right: auto; z-index: 1; border-top: 1px solid #cbcbcb; position: relative; }
.large_grey_header .header_text { font-weight: bold; font-size: 16px; padding: 16px 15px; z-index: 1; position: relative; overflow: hidden; line-height: 20px; }
.large_grey_header .header_text h1 { position: relative; font-size: 16px; margin-top: 0; margin-right: 0; margin-bottom: 0; }
.large_grey_header .header_text_background { position: absolute; top: 0; left: 0; right: 0; height: 51px; z-index: 0; background: #cecece url(https://media1.shmoop.com/images/sprites/repeat-x.png) repeat-x 0 -1720px; }
.large_grey_header .header_background { position: absolute; bottom: 0; left: 0; right: 0; top: 10px; background-color: #cecece; z-index: 0; border-color: #c0c0c0; border-right-style: solid; border-right-width: 1px; border-left-width: 1px; border-left-style: solid; border-bottom: 1px solid #999; }

.grey_bottom { height: 90px; position: relative; border-top: 1px solid #bbb; }
.grey_bottom .cap_left { background: url(https://media1.shmoop.com/images/sprites/static_sprites.png) -820px -190px; height: 90px; position: absolute; top: 0; left: 0; width: 5px; }
.grey_bottom .cap_right { background: url(https://media1.shmoop.com/images/sprites/static_sprites.png) -830px -190px; height: 90px; position: absolute; top: 0; right: 0; width: 5px; }
.grey_bottom .bottom_text { height: 78px; background: url(https://media1.shmoop.com/images/sprites/repeat-x.png) 0 -1780px; position: absolute; top: 0; bottom: 0; left: 5px; right: 5px; padding: 5px 10px; overflow: hidden; }
.grey_bottom .bottom_text p { margin: 0; }
div#photo_image { background-color: #e5e5e5; text-align: center; position: relative; margin-bottom: -3px; }

#photos_embed { margin-top: 15px; }
textarea#photos_embed_code { width: 258px; height: 14px; overflow: hidden; margin-top: 10px; line-height: 16px; padding:6px 5px; font-size: 11px; margin-bottom: 5px; }

/* instructions */
#widget_instructions p { line-height: 22px; }
textarea#widget_instructions_code { width: 510px; height: 70px; padding: 6px; line-height: 17px; font-size: 12px; }
div#sample_widget { width: 300px; margin-right: auto; margin-left: auto; }
#widget_instructions ol { margin: 0 0 15px 0; padding-left: 20px; }
#widget_instructions ol li { margin: 10px 0; }