/*	Conversion notes

		body					==> body
		#topblock + .topblock	==>	#topPanel		(changes)
		.topblock p				==>	#topPanel p
		.topblock div			==>	#topPanel div	(changes)
		#vertical				==> #vertical		(changes)
		#picblock + .picblock	==>	#picblock
		.picblock h1			==>
		.picblock p				==>
		.greenblock				==>
		#main + .main			==> #menuPanel		(changes)
		.main a...				==> #menuPanel a...
		.main h1				==>
		.main p					==>
		#foto1					==> #horizontalBar	(big changes)
		#foto1 a				==>
		#welcome_box			==> #pictureCaption	(changes)
		#welcome_full			==> #fullRightPanel	(changes)
		#welcome_part			==>
		.welcome				==>
		#l_news					==> #picture
		#l_news img				==> #picture img
		#foot + .copyright		==> #footer
		.copyright p			==> <deleted>

		#storyPanel				==> (#scrollFrame + #scrollMe)

		top frames height went from 125px to 100px

*/

body
{
  background: #33283e url("images/bkg.jpg") top center repeat-y; 
  text-align:    center;
  margin-top:     0px;
  margin-bottom:  0px;  /* ...but we are not currently tall enough to bump against this */
  width:         100%;  /* Using 100% centers the page */
}

#fullScreen
{
  background:       MintCream;
  background-color: MintCream;
  color:            black;
  text-align:       left;
  font-family:      Arial, Helvetica, sans-serif;
  font-size:        14px;
  font-weight:      normal;
  padding:          25px;
  margin:            0px;
  width:             95%;
}

#fullScreen h1
{
  color:         #228822;
  text-align:    center;
  font-family:   Arial, Helvetica, sans-serif;
  font-size:     24px;
  font-weight:   bold;
  margin-top:    25px;
  margin-bottom: 35px;
}

/*	Top width is:
		800 = (610) + (10) + (180) = (#topPanel) + (#vertical) + (#picblock)

	Menu width is:
		190 = (170+20)

	Story width is:
		610 = (610+0+0)
		
	About width is:
		610 = (312+12+10) + (190+43+43) = (#pictureCaption) + (#picture)
*/


#topPanel
{
  background-color: white;
  opacity:          0.5;		/* For IE9, Firefox, Chrome, Opera, and Safari */
  filter:alpha(opacity=50);		/* For IE8 and earlier */
  height:           100px;
  width:            610px;
  padding:            0px;
  margin:             0px;
  font-weight:      normal;
  color:          #171411;
  font-family:    "Lucida Grande","Lucida Sans Unicode", Verdana, Arial, sans-serif;
}

#topPanel p
{
  vertical-align: top;
  float:         left;
  padding:        0px;
  margin-left:   55px;
  margin-top:    15px;
  font-size:     36px;
  line-height:   36px;
}

#topPanel div
{
  vertical-align: top;
  padding:        0px;
  margin-top:    60px;
  margin-right:  15px;
  margin-bottom:  0px;
  float:         right;
  font-size:     18px;
  line-height:   18px;
}


#vertical
{
  background-color:  #458b74;
  vertical-align:    top;
  height:            100px;
  width:              10px;
  padding:             0px;
  margin:              0px;
}


#picblock
{
  background-image:  url("images/nuSuit.jpg");
  background-repeat: no-repeat;
  border-bottom:     1px #458b74 dotted;
  vertical-align:    top;
  text-align:        left;
  height:            100px;
  width:             180px;
  padding-top:         0px;
  padding-bottom:      0px;
  padding-left:        0px;
  padding-right:       0px;
  margin:              0px;
  color:             #000000;
  font-weight:       normal;
  font-family:       Arial, Helvetica, sans-serif;
  font-size:         11px;
}

#picblock h1
{
  color:         #669966;
  font-weight:   bold;
  font-family:   Arial, Helvetica, sans-serif;
  font-size:     13px;
  margin-top:    35px;
  margin-bottom: 10px;
  margin-left:   60px;
}

#picblock p
{
  margin-top:    0px;
  margin-bottom: 5px;
  margin-left:  60px;
}



#picture
{
  background-color: white;
  height:           284px;	/* The pix is 160x254.  With 15 border this becomes 190x284 */
  width:            190px;
  padding:           43px;
  text-align:       center;
  font-family:      "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
}

#picture img
{
  border: 15px solid #85AD85;
}


#horizontalBar
{
  background-color: #e3e3e3;	/* From old foto1 */
  color:            #565F67;	/* From old foto1 */
  vertical-align:   middle;
  font-family:      "Lucida Grande", Tahoma, "Times New Roman";
  font-size:        18px;
  font-weight:      bold;
  text-align:       center;
  height:            60px;
  width:            610px;
  padding:            0px;
  margin:             0px;
}


#menuPanel
{
  background-color: #458b74;
  vertical-align:   top;
  height:           380px;		/* Menu lines must sum to less than this */
  width:            170px;
  text-indent:        0px;
  padding-top:       25px;		/* Height + padding top & bottom is the full rendered height */
  padding-bottom:    25px;
  padding-left:      20px;		/* Sets overall row width - do not change */
  padding-right:      0px;
  margin:             0px;
}
/*
#menuPanel p
{
  margin-top:   30px;
  margin-bottom: 0px;
}
#menuPanel a
{
  font-size:        16px;
  line-height:      18px;
  text-decoration:  none;
  text-shadow:      silver 3px 2px 3px;
  letter-spacing:   3px;
}

#menuPanel a:link    {color: White;      text-decoration: none; font-weight: normal;}
#menuPanel a:visited {color: lightgreen; text-decoration: none; font-weight: normal;}
#menuPanel a:hover   {color: White;      text-decoration: none; font-weight: bold;}
#menuPanel a:active  {color: White;      text-decoration: none; font-weight: bold;}

*/

/*
	Total height of the menu lines is:
		+5 +5		UL top and bottom padding
		+24*l		l is the number of lines
		(+8+8)*m	m is the number of menu items
*/

#menuPanel ul
{
  list-style-type: none;
  display:         block;
  position:        relative;
  padding-top:      5px;		/* Small gap at the top of the entire Unordered List */
  padding-bottom:   5px;		/* ...and at the bottom                              */
  padding-left:     0px;
  padding-right:    0px;
  margin:           0px;
}

#menuPanel ul li
{
  font-family:      "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
  font-size:        18px;
  line-height:      24px;
  font-weight:      normal;
  font-variant:     small-caps;
  text-align:       left;
  text-indent:     -15px;		/* OUTDENT row 1 */
  padding-top:       7px;		/* Leave some room above and below each line of the submenu */
  padding-bottom:    7px;
  padding-left:     25px;		/* 10px padding (25-15) for submenu text inside hover highlight */
  padding-right:     0px;
}

#menuPanel ul li:hover   ul		/* >> This defines the BLOCK of the submenus << */
{
  background-color:#559080;
  opacity:         0.9;			/* For IE9, Firefox, Chrome, Opera, and Safari */
  filter:alpha(opacity=90);		/* For IE8 and earlier */
  display:         block;
  position:        absolute;	/* From top left of the outer <ul> */
  float:           right;
  top:             197px;
  left:            160px;
  text-indent:       0px;
  padding:           0px;
  margin:            0px;
}

#menuPanel ul li:hover   ul li	/* >> This defines EACH of the submenus << */
{
/*
  background-color: #458b74;
*/
  background-color: #60B090;
  text-align:       left;
  width:            380px;
  padding-top:        5px;
  padding-bottom:    10px;
  padding-left:      25px;
  padding-right:      0px;
  font-size:         13px;
  font-weight:      normal;
  line-height:      normal;
}

#menuPanel ul li         ul            {display:none;}
#menuPanel ul li       a               {                                              color:#D5D5D5; text-decoration:none;}
#menuPanel ul li:hover                 {background-color:#60B090; width:135px;}
#menuPanel ul li:hover a               {                          font-weight:bold;   color:white;}
#menuPanel ul li:hover span            {background-color:#458b74;}
#menuPanel ul li:hover   ul li       a {                          font-weight:normal; color:#171411; text-decoration:underline;}
#menuPanel ul li:hover   ul li:hover a {                          font-weight:bold;   color:#171411; text-decoration:none;}

/*
#menuPanel ul li:hover   ul li       a {                          font-weight:normal; color:PapayaWhip; text-decoration:underline;}
#menuPanel ul li:hover   ul li:hover a {                          font-weight:bold;   color:PapayaWhip; text-decoration:none;}
#menuPanel ul li:hover   ul li       a {                          font-weight:normal; color:Black; text-decoration:underline;}
#menuPanel ul li:hover   ul li:hover a {                          font-weight:bold;   color:Black; text-decoration:none;}
  color:#171411;			<<<
  background-color:#55A080;
  background-color: #458b74;
*/

#bookImage
{
  background-color: #E5FFE5;
  height:           250px;	/* The book image is 148x220.  With 15 border this becomes 178x250 */
  width:            178px;
  padding:           15px;
  text-align:       center;
  font-family:      "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
}

#bookImage img
{
  border: 15px solid #85AD85;
}

#bookCaptionFrame
{
  background-color: #E5FFE5;
  vertical-align:   top;
  height:           370px;
  width:            402px;
  padding:            0px;
  margin:             0px;
}

#scrollBook
{
  background:       #E5FFE5;
  background-color: #E5FFE5;
  width:            365px;
  margin-top:        10px;
  margin-bottom:     10px;
  margin-left:       10px;
  margin-right:       8px;
  font-size:         12px;
  color:            black;
  font-weight:      normal;
  text-align:       left;
  font-family:      Helvetica, Arial, sans-serif, Tahoma;
}

#scrollBook h1
{
  color:         #50A050;	/* 669966 */
  margin-top:    10px;
  margin-bottom: 10px;
  font-size:     18px;
  font-weight:   bold;
}

#scrollBook p
{
  margin-top:    10px;
  margin-bottom: 10px;
  font-size:     12px;
}




#scrollHorizBarFrame
{
  background-color: white;
  vertical-align:   middle;
  height:            60px;
  width:            610px;
  padding:            0px;
  margin:             0px;
}

#scrollHorizBarInsert
{
  background:       #e3e3e3;
  color:            #565F67;
  font-family:      "Lucida Grande", Tahoma, "Times New Roman";
  font-size:        18px;
  font-weight:      bold;
  text-align:       center;
  line-height:      normal;
  white-space:      nowrap;
  width:            573px;
  margin-top:        12px;
  margin-bottom:      0px;
  margin-left:       12px;
  margin-right:       8px;
}

#scrollHorizBarInsert span
{
  background-color: white;
}

#scrollHorizBarInsert a
{
  color:        #448044;
  font-weight:  bold;
  font-variant: small-caps;
  text-decoration: underline;
}

#scrollHorizBarInsert a:hover
{
  color:        #448044;
  font-weight:  bold;
  font-variant: small-caps;
  text-decoration: none;
}


#scrollFrame			/* This defines the frame container for the scrolling insert */
{
  background-color: white;
  vertical-align:   middle;
  text-align:       left;
  height:           370px;
  width:            610px;
  padding:            0px;
  margin:             0px;
}

#scrollMe				/* This is the scroll insert */
{
  background:       #E5FFE5;
  background-color: #E5FFE5;
  width:            573px;
  margin-top:        10px;
  margin-bottom:     10px;
  margin-left:       10px;
  margin-right:       8px;
  font-size:         12px;
  color:            black;
  font-weight:      normal;
  text-align:       left;
  font-family:      Helvetica, Arial, sans-serif, Tahoma;
}

#scrollMe h1
{
  color:         #228822;
  margin-top:    10px;
  margin-bottom: 15px;
  font-size:     22px;
  font-weight:   bold;
  text-align:    center;
}

#scrollMe h2
{
  color:        #448044;
  font-weight:  bold;
  font-size:    17px;
  margin-top:    5px;
  margin-bottom: 8px;
}


#scrollMe ul li a, #scrollMe a
{
  color:       #609060;
  font-weight: bold;
  line-height: 15px;
}

#scrollMeWhite
{
  background:       white;
  background-color: white;
  width:            573px;
  margin-top:        10px;
  margin-bottom:     10px;
  margin-left:       10px;
  margin-right:       8px;
  font-size:         12px;
  color:            black;
  font-weight:      normal;
  text-align:       left;
  font-family:      Helvetica, Arial, sans-serif, Tahoma;
}

.quickLinkApp
{
  background-color: #E5FFE5;
  width:			435px;
  font-size:         14px;
  text-align:       center;
  padding-top:        2px;
  padding-bottom:     3px;
  padding-left:      10px;
  padding-right:      8px;
  margin-top:       -15px;
  margin-bottom:     15px;
  margin-left:      auto;
  margin-right:     auto;
  border:             1px #565F67 dotted;
}

.quickLinkTrouble
{
  background-color: #E5FFE5;
  width:			350px;
  font-size:         14px;
  text-align:       center;
  padding-top:        2px;
  padding-bottom:     3px;
  padding-left:      10px;
  padding-right:      8px;
  margin-top:       -15px;
  margin-bottom:     15px;
  margin-left:      auto;
  margin-right:     auto;
  border:             1px #565F67 dotted;
}

.quickLinkDev
{
  background-color: #E5FFE5;
  width:			350px;
  font-size:         14px;
  text-align:       center;
  padding-top:        2px;
  padding-bottom:     3px;
  padding-left:      10px;
  padding-right:      8px;
  margin-top:       -15px;
  margin-bottom:     15px;
  margin-left:      auto;
  margin-right:     auto;
  border:             1px #565F67 dotted;
}


#scrollMeWhite h1
{
  color:         #228822;
  margin-top:    10px;
  margin-bottom: 15px;
  font-size:     22px;
  font-weight:   bold;
  text-align:    center;
}

#scrollMeWhite h2, #scrollMeWhite h2 a
{
  color:        #448044;
  font-weight:  bold;
  font-variant: normal;
  font-size:    17px;
  margin-top:    5px;
  margin-bottom: 8px;
}

#scrollMeWhite h3
{
  color:        black;
  font-weight:  bold;
  font-variant: normal;
  font-size:    14px;
  margin-top:    5px;
  margin-bottom: 8px;
}

#scrollMeWhite ul li a, #scrollMeWhite a
{
  color:        #448044;
  font-weight:  bold;
  font-variant: small-caps;
  font-size:    14px;
  line-height:  15px;
}

#scrollMeWhite input
{
  margin-left:  100px;
}


#footer
{
  background-color:  #BABABA;
  background-repeat: no-repeat;
  vertical-align:    top;
  text-align:        center;
  width:             100%;
  height:            15px;
  padding-top:       10px;
  padding-bottom:     5px;
  margin-bottom:     10px;
  color:             #000000;
  font-family:       Arial, Helvetica, sans-serif;
  font-weight:       normal;
  font-size:         11px;
}

#footer a
{
  color:           black;
  font-family:    "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
  text-decoration: underline;
  font-weight:     normal;
  font-variant:    small-caps;
  padding:         3px;
}

#footer a:link    {color: black;   text-decoration: underline; font-weight: bold;}
#footer a:visited {color: #308050; text-decoration: underline; font-weight: normal;}
#footer a:hover   {color: black;   text-decoration: none;      font-weight: bold;}
#footer a:active  {color: black;   text-decoration: underline; font-weight: bold;}


#fullRightWhite
{
  background-color: white;
  vertical-align:   top;
  height:           360px;
  width:            590px;
  padding-top:       10px;
  padding-left:      10px;
  padding-right:     10px;
  padding-bottom:     0px;
  margin:             0px;
  font-size:         12px;
  font-weight:      normal;
  text-align:       left;
  font-family:      Helvetica, Arial, sans-serif, Tahoma;
}

/*
#fullRightWhite ul li, #fullRightWhite p
{
  color:       #669966;
  font-weight: bold;
}
*/

#fullRightWhite ul li a:link    {color: #609060; line-height: 15px; font-weight: bold;   text-decoration: underline;}
#fullRightWhite ul li a:visited {color: gray;    line-height: 15px; font-weight: normal; text-decoration: none; font-variant: small-caps;}
#fullRightWhite ul li a:hover   {color: #609060; line-height: 15px; font-weight: bold;   text-decoration: none;}
#fullRightWhite ul li a:active  {color: #609060; line-height: 15px; font-weight: bold;   text-decoration: underline;}

#fullRightWhite p     a:link    {color: #609060; text-decoration: underline; font-weight: bold;}
#fullRightWhite p     a:visited {color: #609060; text-decoration: underline; font-weight: normal;}
#fullRightWhite p     a:hover   {color: #609060; text-decoration: none;      font-weight: bold;}
#fullRightWhite p     a:active  {color: #609060; text-decoration: underline; font-weight: bold;}






#fullRightPanel
{
  background-color: #E5FFE5;
  vertical-align:   top;
  height:           360px;
  width:            590px;
  padding-top:       10px;
  padding-left:      10px;
  padding-right:     10px;
  padding-bottom:     0px;
  margin:             0px;
  font-size:         12px;
  font-weight:      normal;
  text-align:       left;
  color:            black;
  font-family:      Helvetica, Arial, sans-serif, Tahoma;
}

/* Do not include "#fullRightPanel ul li" in the following since
   that will disturbe the placement screen
*/
#fullRightPanel ul li a, #fullRightPanel p a
{
/*
  color:       #669966;
*/
  color:       #609060;
  font-weight: bold;
  line-height: 15px;
}

#fullRightPanel h1
{
  color:         #228822;
  margin-top:    10px;
  margin-bottom: 15px;
  font-size:     22px;
  font-weight:   bold;
  text-align:    center;
}

#fullRightPanel h2
{
  color:        #448044;
  font-weight:  bold;
  font-size:    17px;
  margin-top:    5px;
  margin-bottom: 8px;
}


#fullRightPanel p
{
  margin-top:     5px;
  margin-bottom: 10px;
}

#fullRightPanel p input
{
  vertical-align: top;
  padding:         2px;		/* This is padding for the actual input text cell */
  margin-left:    80px;
}

#fullRightPanel div
{
  text-align:     left;
  font-weight:    normal;
  font-size:      12px;
  margin-top:      0px;
  margin-bottom:  10px;
  margin-left:    50px;
  margin-right:    6px;
}

#fullRightPanel p input[type="text"]
{
  margin-left:   50px;
}

#fullRightPanel p input[type="submit"]
{
  margin-left:    10px;		/* Positions the Send Mail button */
}

#fullRightPanel p textarea
{
  vertical-align: top;
  padding:        5px;
  margin-left:   50px;
}


.radioButtons
{
  text-align:  left;
  padding-left:  0px;
  margin-top:    0px;
  margin-left: 100px;
}

.submitButton
{
  text-align:  left;
  padding-left: 0px;
  margin-top:   0px;
  margin-left: 15px;
}


#pictureCaption
{
/*  background-color: white;
*/
  background-color: #E5FFE5;
  vertical-align:   top;
  height:           370px;
  width:            312px;
  padding-top:        0px;
  padding-left:      12px;
  padding-right:     10px;
  padding-bottom:     0px;
  margin:             0px;
  font-size:         13px;
  font-weight:      normal;
  text-align:       left;
  color:            black;		/* Set the text color in the caption */
  font-family:      Helvetica, Arial, sans-serif, Tahoma;
}

#pictureCaption h1
{
  color:         #669966;
  margin-top:    20px;
  margin-bottom: 25px;
  font-size:     22px;
  font-weight:   bold;
}

#pictureCaption p
{
  margin-top:    25px;
  margin-bottom: 10px;
}


.jumplink
{
  text-align:     right;
  padding-right:  50px;
  padding-top:     0px;
  margin:          0px;
  padding-bottom: 35px;
  font-size:      14px;
}

.jumplink a:link    {color: blue; text-decoration: underline; font-weight: bold;}
.jumplink a:visited {color: blue; text-decoration: underline; font-weight: normal;}
.jumplink a:hover   {color: red; text-decoration: none;      font-weight: bold;}
.jumplink a:active  {color: blue; text-decoration: underline; font-weight: bold;}


.code
{
  background-color: #D5FFE5;
  font-size:         11px;
  width:            565px;
  padding-left: 5px;
  border: 4px double #669966;
  overflow-x: auto;
  overflow-y: auto;
}

.codeFS
{
  background-color: #D5FFE5;
  font-size:         11px;
  padding-left: 5px;
  border: 4px double #669966;
  overflow-x: auto;
  overflow-y: auto;
}


#goFullScreen
{
  background-color: #FFFF50;
  position:         fixed;
  top:               0px;
  left:            438px;
  text-indent:       0px;
  text-align:       center;
  font-size:        14px;
  height:            20px;
  width:            150px;
  border-style:     dotted;
  border-width:      1px;
  border-color:     #228822;
  padding:           0px;
  margin:            0px;
}

#goFullScreen a        { font-weight: normal; text-decoration: none; color: black; }
#goFullScreen a:hover  { font-weight: bold; }