@import url("../styles/print.css");

/**
 * Styles that are global to all of Gallery go in here.
 */
  
/* Global Styles */

/* The image for the tiled triangle background. */
body {
	background: url('graphics/background_gallery.gif');
}

/* Default color for all text. */
p, div, li, span {
  color: #CDCDCE
}

#imageData span { color: black }

/* Color for all home page nav box elements */
div.menu-box li a, div#intro-text, div.nav-box span.p, a.nav-box span.p {
  /* Spec: 2nd Color */
  color: #FFFFFF;
}

/* Color for hyperlinks */
div#subpage-content a, div#subpage-content span.link {
  /* Not Spec: Not 5th Color */
  color: #CCCCCC
}

div#subpage-content a,
div#subpage-content .yellow {
  color: #D1D184
}

/* Image to use for link arrows. */
.arrow {
  background-image: url('graphics/gallery_double_arrow_cccccc.gif');
}

/* Background color to use for insetted objects. */
.inset { 
  background: #1E2331
} 

/* Color definitions for all nav boxes */
.nav-box-padding {
  /* Spec: 1st Color */
	border: solid #454F6E 1px;
	
	background-color: #1E2331
}

/* Color definition for titles of all nav boxes */
.nav-box-padding span.h1 {
  background-color: #10131A;
}

/* Color definition for "icon" images - usually navigation elements */
.icon {
  border: solid #454F6E 1px ! important
}

/* The background image for the search bar and the main container.
   Duplicated so that it appears in both elements, but shifted upward in
	 div#container-padding so that the backgrounds are seamless. */
div#search-section-bar, div#container-padding {
	background-image: url('graphics/gallery_logo.jpg');
}

/* div#intro-text {
  font-size: 14pt
} */

/* Primary Container and Its Contents */

/* Color definitions for the body container (the div
   that holds all page elements. */
div#container {
  /* Not Spec: Not 5th Color */
	border-right:  solid #343B53 1px;
	border-bottom: solid #343B53 1px;
	width: 968px;
	max-width: none;
	min-width: none;
}

/* Color definition for the border around nav box images. */
.box-image {
  /* Spec: 1st Color */
  border-color: #454F6E
}

.nav-box-padding a {
  color: #CC6600;
}

/* Background image and color definitions for all nav boxes. */
.content-box-padding {
  /* Spec: 3rd Color */
  background-image: url('graphics/gallery_grad4.jpg');
	background-color: #10131A;
	
	/* Spec: 1st Color */
	border:     solid #454F6E 1px;
}

/* Background image and color definitions for all nav box titles. */
.content-box span.h1 {
  /* Spec: 1st Color */
  background-image: url('graphics/gallery_grad1.jpg');
	background-color: #454F6E;
}

/* Background image and color definitiions for all nav box subtitles. */
.content-box span.h2 {
  /* Spec: 4th Color */
  background-image: url('graphics/gallery_grad2.jpg');
	background-color: #6B7595;
	
	/* Spec: 5th Color */
	color:      #10131A;
}

/* Left Hand Navigation (LHN) Definitions */

/* Border color definition for all LHN items. */
div.menu-box h1, div.menu-box li {
  border-bottom: solid #6B7595 1px
}

/* Background color and image (the circle) for top level LHN items. */
div.menu-box li {
  background-color: #191D28;
}
div.menu-box li a {
	background-image: url('graphics/gallery_side_nav_menu_item.gif');
}

/* Background color and image (the circle) for the active top level LHN item. */
div.menu-box li.active {
  /* Spec: 4th Color */
  background-color: #6B7595
}
div.menu-box li.active a.active {
	background-image: url('graphics/gallery_side_nav_menu_item_active.gif');
}

/* Text color and background image (the circle) for a top level LHN item
   that is being hovered. */
div.menu-box li.active a:hover {
  color: #007173 !important;
  background-image: url('../graphics/side_nav_menu_item_hover_dark.gif') !important;
}

/* Background color and image (the circle) for a sub level LHN item. */
div.menu-box ul.submenu li.selected-submenu a.active {
  background-image: url('graphics/gallery_sub_nav_menu_item_active.gif');
	
	/* Spec: 5th Color */
  color: #454F6E
}

/* Backgrouned color for the whole menu and for sub menu items. */
div.menu-box, div.menu-box ul.submenu li {
  background-color: #D9DEEC
}

/* Background images for the top element in the LHN (the arrow). */
div.menu-box h1 a {
  background-image: url('graphics/gallery_side_nav_menu_header.gif');
}
div.menu-box h1.active a {
  background-image: url('graphics/gallery_side_nav_menu_header_active.gif');
}
div.menu-box h1 a:hover {
  background-image: url('graphics/gallery_side_nav_menu_header_hover.gif');
}

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

/* Subpages */

/* Link color for subpages. */
/*
div#subpage-content a {
  color: #C0C7CF
}

div#subpage-content a:visited {
  color: #999999
}
*/

div#subpage-content-container h4 {
  margin: 0;
  padding-top: 10px;
}

div#subpage-content-container h4.first {
  padding-top: 0
}

/* Background color for the subpage-content-container (the 1px/10px at top border
   around the subpage body. */
div#subpage-content-container {
  background-color: #454F6E;
}

/* The background color and default padding/margin/width of the subpage body. */
div#subpage-content-body {
  background-color: white;
	width: 100%; 
	padding: 0px; 
	margin: 0px;
}

/* Currently not used. */
div#subpage-content-body div.subpage-right-inset-container {
  background-color: #FFF7D9;
}
div#subpage-content-body div.subpage-right-inset,
div#subpage-content-body div.subpage-right-callout-padding {
	background-color: #E6DDC6;
}

/* Default text options for text within subpage */
div#subpage-content-container div, 
div#subpage-content-container span, 
div#subpage-content-container p, 
div#subpage-content-container li {
  font-size: 12px;
	line-height: 140%;
	color: #CCC
}

span.import { font-weight: bold }

div#subpage-content-container span.import {
 	color: #838EA6
}

h4, div#subpage-content-container span.h4,
div#subpage-content-container div.back-to-detail-holder strong {
  color: #D16669
}

/* The color of the page title (the text to the right of the section logo). */
div#subpage-content h1#page-title,
div.subpage-content-non-javascript h1#page-title {
	color: #CCCCCC;
}

/* The color and background image to be used for a 'return' or 'back' arrow. */
div#subpage-content a.return-arrow {
  /* Spec: Color 1 */
	color: #CCC;
	background-image: url('graphics/gallery_back_arrow_grey.gif');
	border-right-color: #CCC;
}

/* Additional padding that is added to an h1 that also holds a back arrow.
   Right now only used in Image Tours. */
h1.return-arrow-holder {
  padding-bottom: 14px !important
}

/* Currently not ussed. */
div#subpage-content h3 {
  background-image: url('graphics/gallery_divider_bar.gif');
}

div#subpage-content h3 span {
  background-color: #191D28;
  color: #6B7595;	
}
ul.two-column li {
  width: 340px
}
a.back-to-top {
  background-image: url('graphics/gallery_up_arrow.gif');
	margin-top: 13px;
}

/* The background image and text color for 130px wide buttons. */
a.button-130px {
  background-image: url('graphics/gallery_button_130.gif');
  color: #D1D184 !important;
}
a.button-130px:hover {
  background-image: url('graphics/gallery_button_130_hover.gif');
}

/* The background image and text color for 150px wide buttons. */
a.button-150px {
  background-image: url('graphics/gallery_button_150.gif');
  color: #D1D184 !important;
}
a.button-150px:hover {
  background-image: url('graphics/gallery_button_150_hover.gif');
}

div#subpage-content a.button {
  text-decoration: none
}

div#subpage-content a.button span {
  line-height: 20px
}

div#subpage-content a.button span.link {
  color: white;
	font-size: 11px;
}

/* Previous/Next Navigation */
div.previous-next-navigation {
  overflow: hidden;
  height: 40px;
	border-bottom: solid #454F6E 1px 
}

div#subpage-content-container div.previous-next-navigation .back {
  float: left;
  display: inline;
  width: 150px; 
  text-transform: uppercase;
  padding-left: 30px;
  background: url(graphics/backarrow.gif) 5px center no-repeat;
	text-decoration: none;
}

div#subpage-content-container div.previous-next-navigation .back:hover {
  background-image: url(graphics/backarrow_f2.gif);
}

div#subpage-content-container div.previous-next-navigation span {
  font-size: 11px;
  line-height: 11px;
	text-decoration: none;
  padding-top: 11px;
  padding-bottom: 9px;
	display: block;
}

div.previous-next-navigation .next, div.previous-next-navigation .prev {
  float: right;
  display: inline;
  height: 42px;
  width: 130px;
}

div.previous-next-navigation .next {
  background: url(graphics/right_arrow.gif) right center no-repeat;
	margin-right: 5px
}

div.previous-next-navigation .next:hover {
  background-image: url(graphics/right_arrow_f2.gif)
}

div.previous-next-navigation .prev {
  background: url(graphics/left_arrow.gif) left center no-repeat;
}

div.previous-next-navigation .prev:hover {
  background-image: url(graphics/left_arrow_f2.gif)
}

div#subpage-content div.previous-next-navigation a {
  text-decoration: none
}

div.previous-next-navigation img {
  border: solid #454F6E 1px; 
	margin-top: -1px;
	z-index: 1
}

div.previous-next-navigation a:hover img {
	border-color: #00B2B3;
}

div#subpage-content div.previous-next-navigation a:hover span {
  color: #00b2b3 
}

div.previous-next-navigation .next span {
  position: absolute;
  width: 64px;
  text-align: right;
  text-transform: uppercase;
  line-height: 100%
}

div.previous-next-navigation .has-prev {
  border-left: solid #454F6E 1px;
}

div.previous-next-navigation .next img {
  position: absolute;
  margin-left: 72px;
}

div.previous-next-navigation .prev span {
  position: absolute;
  width: 70px;
  text-transform: uppercase;
  line-height: 100%;
  margin-left: 68px;
}

div.previous-next-navigation .prev img {
  position: absolute;
	margin-left: 17px;
}

div#bottom-navigation div.previous-next-navigation {
	border-bottom: none; 
	border-top: solid #454F6E 1px 
}

div#back-link-holder {
  display: block;
  margin-bottom: 10px
}

h4, div#subpage-content-container span.h4 {
  font-size: 13px;
	text-align: left;
	display: block;
	padding: 0
}

div#subpage-content a#newscenter-info-holder {
  background-color: #323849;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	display: block;
	padding: 10px;
	text-decoration: none;
}

p.credit + a#newscenter-info-holder {
	margin-top: 15px;
}

a#newscenter-info-holder span.h4 {
  color: #D1D184;
	text-decoration: underline
}

a#newscenter-info-holder:hover span.h4 {
  color: #00B2B3
}

ul.icons li a {
  background-image: url(graphics/gallery_download_icon.gif);
}

ul.icons li a:hover {
  background-image: url(graphics/gallery_download_icon_hover.gif);
}

div#subpage-content-container div.back-to-detail-holder {
  display: block;
	padding: 10px;
	padding-bottom: 0;
	color: #838EA6;
	font-weight: bold
}

div#subpage-content-container div.gallery-alert {
  background: url(graphics/gallery_warning_icon.gif) 10px 10px no-repeat #D9DEEC;
	padding: 10px 10px 10px 50px;
	color: black
}

a.return-arrow-separator { border-color: #ccc }

div#subpage-content div.gallery-alert a { color: #191D28 }

ul.inline-links {
  padding-left: 20px;
	margin-left: 0
}

/* New Menu Stuff */

div#hubblesite-menu-box {
  background-color: #191D28;
}

ul.level-1 li a {
  background-image: url(graphics/gallery_side_nav_menu_header.gif);
}

ul.level-1 li.active.final a {
  background-image: url(graphics/gallery_side_nav_menu_header_active.gif);
}

ul.level-1 li a:hover {
  background-image: url(graphics/gallery_side_nav_menu_header_hover.gif) !important;
}

ul.level-1 ul.level-2 li a {
  color: #FFFFFF
}

ul.level-1 ul.level-2 li {
  border-bottom-color: #7C8782
}

ul.level-1 ul.level-2 ul.level-3 li {
  background-color: #D9DEEC
}

ul.level-1 li.final ul.level-2 a,
ul.level-2 li a {
  background-image: url(graphics/gallery_side_nav_menu_item.gif);
}

ul.level-2 li.active {
  background-color: #6B7595
}

ul.level-1 ul.level-2 li.active a {
  background-image: url(graphics/gallery_side_nav_menu_item_active.gif);
}

ul.level-1 ul.level-2 li.active ul.level-3 li.active.final a {
  background-image: url(graphics/gallery_side_nav_menu_item_active.gif);
}