/* -----------------------------------------
Style Sheet for Number 007 web site
version: 1.0
author: Ian Dunross
email: info@thegoldeneye.com
web site: http://n007.thegoldneye.com
------------------------------------------- */



/* Page styles
-------------------------------------------------------------*/
body {margin: 0;
      padding: 0;
      width: 100%;
      font-family: Roboto, sans-serif;
	   color: #222;
     }
	 	 

#page_position {max-width: 960px;
                margin: auto;}



p {margin-top: 0px;      
   margin-bottom: 25px;
   line-height: 1.65em;
   font-size: 20px;                               /* Default paragraph font size */
   font-weight: normal;}
   
   
   
.first_paragraph {margin-top: 50px;      
                  margin-bottom: 25px;
                  line-height: 1.65em;
                  font-size: 20px;               /* Default paragraph font size */
                  font-weight: normal;}




/* Settings for the top navigation bar
--------------------------------------------------------------*/


/* Set up the logo */

.logo_area {padding-top: 40px;
            padding-left: 40px;
            padding-bottom: 40px;
            border-bottom: 1px solid #999999;}


/* Set up the top navigation bar */
.topnav {width: 100%;
         overflow: hidden;
         background-color: #FFFFFF;                              /* Color of the navigation bar */
         border-bottom: 1px solid #999999;}


/* Style the links inside the navigation bar */
.topnav a {
           float: left;                                          /* alignment of links */   
           text-align:center;
           padding: 14px 16px;
           text-decoration: none;
           font-size: 15px;
          }


/* Add an active class to highlight the current page */
.active {background-color: #FFFFFF;
            color: #DA4236;
}


/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}


/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
}


/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: 15px;
  border: none;
  outline: none;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}


/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}


/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}


/* Add a background color on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: none;
  color: #DA4236;
}


/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}


/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}




/* Landing Page Layouts
------------------------------------------------------------------------------------- */


/* Front Banner position */

.front_banner_position {/* These max-width and height settings are for responsive adjustment */
	
	                    max-width: 100%;
                        height: auto;
						 /* These margin and display settings center the image */
                        margin: auto; 						
                        display: block;}

            
/* Set up the 3 columns */
.icon-Col1, .icon-Col2, .icon-Col3 {
    width: 30%;
    float: left;
    margin-right: 5%
}

.icon-Col3 {
    margin-right: 0;
}

.clear {
    clear: both;
}


.front_icons_synopsis {font-size: 16px;}




/* Area for latest entries
---------------------------------------------------- */


/* Here is the wrapper for the latest entries area */

#latest_entries_area {margin-top: 60px;
	                  margin-left: 0px;
					  margin-bottom: 60px;}



/* This is for the text "Latest Entries" */

#update_title {margin-left: 5px;
               font-family: Arial, sans-serif; 
               font-size: 16px;}



/* This is the shaded area for the recent entries */

#show_latest_entries {margin-left: 5px;
                      border:1px solid #a1a1a1;
                      font-size: 16px;
                      margin-top: 20px;
                      padding: 10px 15px; 
                      background: #f9f9f9;
                      width: 480px;
                      border-radius: 8px;} 


/* This is the red arrow bullet list */

#recent_entries_list {list-style-type: none;}

#recent_entries_list li {padding-left: 10px;
                         margin-bottom: 0.2em;
                         background: url(../images/red_arrow.png) no-repeat 0 0.4em;} 
				 
			 			 

/* Links
--------------------------------------------------------------------- */

a {color: #333;}

a:hover {color: #DA4236;
         border-bottom-color: transparent;}

.page_links a {color: #003366;}
.page_links a:active {color: #003366;}
.page_links a:link {color: #003366;}
.page_links a:visited {color: purple;}
.page_links a:hover {color: #003366; background-color: #E7E7E7; font-style: normal;}
.page_links a.no_hover:hover {background-color: transparent;}

.front_icon_link {text-decoration: none;}


/* This is the link formatting for the "Latest Entries" link */

a.update_title:link {text-decoration: none;}

.section_links {font-size: 18px;}


/* Link for back to top */

#backtotop {color:#FFFFFF; 
            background-color:#000000;} 

#backtotop a:link {color: #FFFFFF;
                   text-decoration: none;}

#backtotop a:hover {color: #DA4236;}


/* Color of the circle */
#backtotop {border-radius:50%; background-clip:padding-box;}

#backtotop {z-index:999; display:inline-block; position:fixed; visibility:hidden; 
            bottom:20px; 
            right:20px; 
            width:36px; 
            height:36px; 
            line-height:36px; 
            font-size:16px; 
            text-align:center; 
            opacity:.2;}

#backtotop i {display:block; width:100%; height:100%; line-height:inherit;}
#backtotop.visible {visibility:visible; opacity:.5;}
#backtotop:hover {opacity:1;}



/* Headings
--------------------------------------------------------------------- */

h1.Bullet_Title  {font-family: Arial, sans serif;
	               font-size: 38px;               /* Title for site information pages */
                  font-weight: normal;
                  margin-top: 60px;
                  margin-bottom: 10px;
                  padding-left: 40px;
				  background: url(../images/red_square_bullet.png) no-repeat 0 0.30em;}     /* 0.30em is the height position of the bullet image
                                                                                               Increasing the em value, lowers the position of the bullet */
		  


h1.Title {font-family: Arial, sans serif;
	       font-size: 40px;                      /* Generic heading 1 */
          font-weight: normal;
          margin-top: 60px;
          margin-bottom: 30px;
	      background: none;}  




h1 {font-family: Arial, sans serif;
	 font-size: 35px;                      /* Generic heading 1 */
    font-weight: normal;
    margin-top: 5px;
    margin-bottom: 30px;
	background: none;}       

h2 {font-family: Arial, sans serif;
	font-size: 30px;
    margin-bottom: 10px;
    font-weight: normal;}

h3 {font-family: Arial, sans serif;
	 font-size: 24px;
    margin-bottom: 10px;
    font-weight: bold;}
	

.subhead {color:#7f8080;                   /* This is used for a subtitle  of an article */
          font-family:Arial, sans-serif;
          font-size:20px;
          font-weight:normal;
          margin-top:20px;
          margin-bottom:40px;}

    
.heading_front_icons  {color: #999999;
                       font-size: 20px;;
                       font-weight: normal;}




					   
/* Lists 
------------------------------------------------------------------- */

ul {line-height: 1.6em;
    list-style-type: disc;
    margin: .3em 0 0 1.5em;
    padding: 0;}


ol {list-style-type: decimal;
    line-height: 1.6em;
    margin: .3em 0 0 2.0em;
    padding: 0;}

li {margin-bottom: .10em;}

.list_font {font-size: 1.6em;
            margin-top: 10px;
            margin-bottom: 20px;}
                           
 
/* Custom Lists */

#list_links {list-style-type: none;
             font-size: 10pt;
             margin-top: 8px;
             margin-left: 5px;
             margin-bottom: 2em;}


#list_links li {padding-left: 10px;
                margin-bottom: 0.2em;
                background: url(../images/gray_arrow.gif) no-repeat 0 0.4em;}
                
#list_in_body_text {font-size: 20px;  
                    margin-left: 30px;        
                    line-height: 1.6em;
                    margin-bottom: 20px;}
                    
#list_in_body_text li {margin-bottom: .85em;}
                
#list_body li {font-size: 15px;
                list-style-type: square;
               line-height: 1.7em;
               margin-bottom: .5em;}     
               
.subtitle_toc {font-size: 10pt;} 

#paragraph_list li {font-size: 1.6em;
                    margin: .4em 0 1.2em 0;        
                    line-height: 1.6em;} 

/* Used for the lists at the Terms of Use page */				
.terms_list_font {font-size: 21px;}





/* Readers' comments: formatting
----------------------------------------------------------------- */

#reader_comment {width: 50%;
                 margin-left: 40px;
                 font-size: 18px;
                 font-style: italic;
                 line-height: 1.5em;
                 color: #474747;
                 margin-top: 20px;
                 background: url(../images/left_double_quote.png) top left no-repeat;
                 padding-top: 40px;
                 padding-left: 75px;}
              
#reader_name {text-align:center;
              font-size: 16px;
              margin-top: 10px;
              margin-bottom: 30px;}





/* Works Cited formatting
--------------------------------------------------------------------- */

.citation    {width: 65%;
              line-height: 1.7em;
              color: #484848;
              font-size: 18px;
              margin-bottom: 10px;}

/* dl, dt, .citation_line2 are used for Works Cited formatting */

dl {line-height: 1em;
    color: #484848;
    font-size: 18px;}
    
dt {color: #484848;
    margin-bottom: 10px;}

.citation_line2 {margin-left: 25px;
                 color: #484848;
                 font-size: 18px;
				     line-height: 1.5em;}
				 
				 


/* Bottom Banner
---------------------------------------------------------------------- */

#bottom_banner {width: 100%;
                background-color: #F8F8F8;}



/* Footer Area
-------------------------------------------------------------------- */
footer {padding: 4em 0 8em 0; 
         background-color: #F8F8F8;}


footer a:hover {color: #DA4236;                           /* Hover color of links in the footer area */
				 border-bottom-color: transparent;
			    }

footer .container {margin-bottom: 4em;}
	
footer .copyright {
			        color: #898888;
			        margin-top: 1.5em;
			        text-align: center;
			        font-size: 0.9em;
		           }



/* Copyright formatting
------------------------------------------------------------------------- */

	ul.copyright_format {
		list-style: none;
		padding-left: 0;
	}

		ul.copyright_format li {
			border-left: solid 1px #5b5b5b;
			display: inline-block;
			padding: 0 0 0 1em;
			margin: 0 0 0 1em;
		}

			ul.copyright_format li:first-child {
				border-left: 0;
				margin-left: 0;
				padding-left: 0;
			}





/* Image Formats
-------------------------------------------------------------------- */

#picture_area {max-width: 100%;
                padding: 0;
                margin: 0;} 

figure {border: 1px #808080 solid;
        margin-left: 0px;
		  margin-top: 11px;
		  margin-right: 25px;
        padding: 9px;                  /* Defines space between image and border */
		 }

figcaption {padding: 2px;
            font-size: 15px;}


img {max-width: 100%;
     height: auto;}


.image_left_first_paragraph {float: left;
                             margin-top: 45px;
                             padding-right: 20px;
                             padding-bottom: 20px;}

.image_left {float: left;
             padding-right: 20px;
             padding-bottom: 20px;}
			 
.image_line_separator {margin: auto; 						
                       display: block;
					   margin-top: 50px;
					   margin-bottom: 20px;} 



/* Directory Area
--------------------------------------------------------------------- */

.directory_header {font-family: Arial, sans-serif;
                   font-size: 17px;
                   font-weight: bold;
                   font-style: italic;
			          margin-top: 30px;
			          padding-top: 0.583em; /* 7px */
                   background: url("../images/border-triline.png") repeat-x;
                   margin-bottom: 40px;}
				   
				   
.directory_header_v2 {font-family: Arial, sans-serif;
                      font-size: 17px;
                      font-weight: bold;
                      font-style: italic;
			             margin-top: 30px;
			             padding-top: 0.583em; /* 7px */
                      background: url("../images/border-triline.png") repeat-x;
                      margin-bottom: 20px;}


				   
			 
/* For the category heading in the directory area */
.category {font-size: 16px;
           color: #999999;
		   font-weight: bold;
           border-bottom: 1px solid #000000;
		   margin-top: 25px;
	       margin-bottom: 15px;}

/* Set up 3 columns */
.directory_column {
  float: left;
}

.left, .right {
  width: 45%;
}

/* space between columns 1 and 3 */
.middle {
  width: 10%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}



/* Other Text Styles
---------------------------------------------------------------------- */

.colophon {font-size: 16px;
           line-height: .5em;
           padding-top: 50px;}

.publication_date {font-size: 16px;
                   line-height: .5em;
                   margin-bottom: 40px;}

blockquote {font-size: 18px;
            line-height: 1.4em;
            width: 50%;
            border-left: solid 0.1em #CCCCCC;
            padding-left: 10px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 20px;
            margin-bottom: 20px;}


#verse {font-size: 18px;
            line-height: 1.4em;
            width: 50%;
            border-left: solid 0.1em #CCCCCC;
            padding-left: 10px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 20px;
            margin-bottom: 20px;}


#reference_source {margin-top: 0;
                   margin-left: 50%;
                   font-size: 16px;
                   margin-bottom: 40px;}


/* This is the citation warning at the bottom of each article */

#citation_note {margin-top: 50px;      
                font-size: 18px;
                width: 60%;
                line-height: 1.3em;
                border: solid 1px red;
                padding: 20px;
                margin-bottom: 40px;}


#epigraph {width: 500px;
           font-family: Arial, sans-serif;
           font-size: 18px;
           font-style: italic;
           margin-left: 25px;
           margin-top: 30px;
           margin-bottom: 3px;}    

#epigraph_source {width: 500px;
                  font-family: Arial, sans-serif;
                  font-size: 16px;
                  font-style: normal;
                  margin-left: 75px;
                  margin-bottom: 30px;}
				  
				  
strong, b {font-weight: 600;}

em, i {font-style: italic;}

sub {
     font-size: 0.8em;
     position: relative;
     top: 0.5em;
	}

sup {
     font-size: 0.8em;
     position: relative;
     top: -0.5em;
	}

hr {
    border-top: solid 1px #e0e0e0;
    border: 0;
    margin-bottom: 1.5em;
	}

dt {padding-bottom: 15px;}


.spoiler_note {width: 65%;
               border-top: 1px solid #aaa;
               font-size: 15px;
               line-height: 1.5em;
               border-bottom: 1px solid #aaa;
               padding: 10px;
               margin-top: 30px;
               margin-bottom: 30px;}

.section_number {margin-top: 40px;
                text-align: center;
                font-size: 2.5em;
                margin-bottom: 30px;}


.book_title {font-variant: small-caps;
             font-weight: normal;}
             
.book_title2 {font-variant: small-caps;
             font-size: 12pt;}
             
             

				
/* Media Queries
--------------------------------------------------------------------------------------------- */

/* When the screen is less than 600 pixels wide, hide all links. 
   Show the icon that opens and closes the topnav. */
@media screen and (max-width: 600px) {
  .topnav a, .dropdown .dropbtn {
    display: none;
  }
  
/* .icon is the so-called "hamburger" icon, which opens and closes the topnav */  
  .topnav a.icon {   
    float: right;
    display: block;
  }
}


/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. 
   This class makes the topnav look good on small screens (display the links vertically instead 
   of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}



/* This is the responsive layout for the 3 icon columns
----------------------------------------------------------------------- */

@media screen and (max-width: 600px) {
    .icon-Col1, .icon-Col2, .icon-Col3 {
        width: 100%;
        float: none;
        margin: 0;
    }

    .icon-Col1, .icon-Col2 {
        padding-bottom: 30px;
    }
}



/* For the 3 columns in the directory area
---------------------------------------------------------------------- */

/* When the screen is less than 600px wide, make the three columns
   stack on top of each other instead of next to each other */
   
@media screen and (max-width: 600px) {
  .directory_column {
    width: 100%;
  }
}



/* For images: remove the float-left alignment and stack 
   the image and the paragraph. Also, display the image
   at 100% width.
---------------------------------------------------------------------- */

@media screen and (max-width: 600px) {
	#picture_area {width: 100%;
	               float: none;
				      padding: 0;
				      margin: 0;}

figure {max-width: 65%;}   /* Scale down the image so that the border effect displays correctly */	 
 
}


/* For poetry quotations */

#verse {max-width: 100%;}


/* This is for the copyright area 
--------------------------------------------------------------------- */

@media screen and (max-width: 600px) {

/* For the bottom copyright formatting */

ul.copyright_format li {
border: 0;
padding: 0;
margin: 0;
display: block;
line-height: 2em;}

}