@charset "utf-8";
/*
/* 
 * HTML5 ✰ Boilerplate
 *
 * What follows is the result of much research on cross-browser styling. 
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 *
 * Detailed information about this CSS: h5bp.com/css
 * 
 * Dreamweaver modifications:
 * 1. Commented out selection highlight
 * 2. Removed media queries section (we add our own in a separate file)
 *
 * ==|== normalize ==========================================================
 */

/* Some style for weblink
*
*/
textarea.roundedcorner {
  border-radius: 25px;
}
select.roundedcorner {
  border-radius: 25px;
}
input.roundedcorner {
  border-radius: 25px;
}

input.rounded {

  border: 1px solid #ccc;
   
  /* Safari 5, Chrome support border-radius without vendor prefix.
   * FF 3.0/3.5/3.6, Mobile Safari 4.0.4 require vendor prefix.
   * No support in Safari 3/4, IE 6/7/8, Opera 10.0.
   */
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  
  /* Chrome, FF 4.0 support box-shadow without vendor prefix.
   * Safari 3/4/5 and FF 3.5/3.6 require vendor prefix.
   * No support in FF 3.0, IE 6/7/8, Opera 10.0, iPhone 3.
   * change the offsets, blur and color to suit your design.
   */
  -moz-box-shadow: 2px 2px 3px #666;
  -webkit-box-shadow: 2px 2px 3px #666;
  box-shadow: 2px 2px 3px #666;
  
  /* using a bigger font for demo purposes so the box isn't too small */
  font-size: 20px;
  
  /* with a big radius/font there needs to be padding left and right
   * otherwise the text is too close to the radius.
   * on a smaller radius/font it may not be necessary
   */
  padding: 4px 7px;
  
  /* only needed for webkit browsers which show a rectangular outline;
   * others do not do outline when radius used.
   * android browser still displays a big outline
   */
  outline: 0;

  /* this is needed for iOS devices otherwise a shadow/line appears at the
   * top of the input. depending on the ratio of radius to height it will
   * go all the way across the full width of the input and look really messy.
   * ensure the radius is no more than half the full height of the input, 
   * and the following is set, and everything will render well in iOS.
   */
  -webkit-appearance: none;
  
}

input.rounded:focus {
  
  /* supported IE8+ and all other browsers tested.
   * optional, but gives the input focues when selected.
   * change to a color that suits your design.
   */
  border-color: #339933;
  
}




    input:hover[type="submit"] 
    {
      border-radius: 25px;
      background: #daf0f5;
      color: #145766;

    }
    .button1   {
      border-radius: 25px;
      background-color: #000099;
      color:#feffdd;
      text-align:left;
      height:100%; 
      max-height:25px;
      max-width:110px;
      width:100%;
    }

.button2   {
        border-radius: 25px;
      background-color: #000099;
      color:#feffdd;
      text-align:left;
      height:100%; 
      width:100%;
    }
    .button3   {
      border-radius: 25px;
      background-color: #000033;
      color:#feffdd;
      text-align:left;
      height:100%; 
      width:100%;
    }

    .hidden { display: none; }
.unhidden { display: block; } 
#picture {width:100%; max-width:120px; height:100%; max-height:120px; background-color:#ffffff; float: left; width: 100%;}
#picture a.small, #picture a.small:visited { display:block; width:100%; max-width:120px; height:100%; max-height:120px; text-decoration:none; background:#ffffff; top:0; left:0; border:0;}
#picture a img {border:0;}
#picture a.small:hover {text-decoration:none; background-color:#000000; color:#000000;}
#picture a .large {display:block; position:absolute; width:0; height:0; border:0; top:45; left:10;}
#picture a.small:hover .large {display:block; position:absolute; top: 45px; left:10px; width:240px; height:240px; }


/*position:absolute;  position: -webkit-sticky;   position: sticky; When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .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 a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}



/* Add a black background color to the top navigation */
.topnav {
  
  position: relative;
 top: 0;
  background-color: #000099;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  border-radius: 25px;
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  /* padding: 8px 10px; */
  text-decoration: none;
  font-size: 15px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #daf0f5;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #000033;
  color: white;
}

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



/* END some style for weblink
*/


.menyn ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  

}

.menyn li  {
  display: block;
  color:white;
  padding: 1px 4px;
  text-decoration: none;
background-color:  #538cc6;
  
}

.menyn li a {
  display: block;
  color: #000;
  padding: 6px 10px;
  text-decoration: none;
background-color: #e6e6ff;

}

/* Change the link color on hover */
.menyn li a:hover {
  background-color: #003366;
  color: white;
}


div.texttoright {
  text-align: right;
} 


// Div as tables

.easyDiv {
  padding: 50px;
  margin: 20px;
}

#resp-table {
width: 100%;
display: table;
border: 2px solid blue;
  border-radius: 5px;
  box-shadow: 5px 10px 8px #888888;
z-index:99;
position:relative;
background-color: white;
}

#resp-table-caption{
display: table-caption;
//text-align: center;
font-size: 20px;
font-weight: bold;
}

#resp-table-header{
display: table-header-group;
//background-color: yellow; gray;
font-weight: bold;
font-size: 14px;
}

.table-header-cell{
display: table-cell;
padding: 10px;
text-align: justify;
border-bottom: 1px solid black;
}

#resp-table-body{
display: table-row-group;
border-bottom: 5px solid black;
}

.resp-table-row{
display: table-row;
}

.resp-table-row-red{
display: table-row;
background-color: #ffe8ea;
color: red;
border-bottom: 2px red;
}

.resp-table-row-yellow{
display: table-row;
background-color: #fdff96;
}

.resp-table-row-green{
display: table-row;
background-color: #59f07c;
}

.resp-table-row-blue{
display: table-row;
background-color: #cce7ff;
}

.resp-table-row-grey{
display: table-row;
//background-color: yellow; grey;
}

.table-body-cell{
display: table-cell;
}

#resp-table-footer {
display: table-footer-group;
background-color: gray;
width: 100%;
font-weight: bold;
font-size: 14px;
color: rgba(255, 255, 255, 0.45);
}

.table-footer-cell{
display: table-cell;
padding: 10px;
text-align: justify;
border-bottom: 1px solid black;
}



// End of Div as tables



/* =============================================================================
   HTML5 display definitions
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

/* =============================================================================
   Base
   ========================================================================== */

/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 * 2. Force vertical scrollbar in non-IE
 * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
 */

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body { margin: 0; font-size: 13px; line-height: 1.231; }

body, button, input, select, textarea { font-family: sans-serif; color: #222; }

/* 
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate
 * Also: hot pink! (or customize the background color to match your design)
 */

/* Dreamweaver: uncomment these if you do want to customize the selection highlight
 *::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
 *::selection { background: #fe57a1; color: #fff; text-shadow: none; }
 */

/* =============================================================================
   Links
   ========================================================================== */
   a.news { color: #b2b6bf; text-decoration: none;}
 a.news:visited { color: #717378; text-decoration: none;}
 a.news:hover { color: #0049ff; text-decoration: none;}
 a.news:focus { outline: thin dotted; }

/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
 a.news:hover, a:active { outline: 0; }


 a.toplinks { color: #fdffe0; }
 a.toplinks:visited { color: #edf9fa; }
 a.toplinks:hover { color: #bef6fa; }
 a.toplinks:focus { outline: thin dotted; }

/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
 a.toplinks:hover, a:active { outline: 0; }


a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }

/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }


/* =============================================================================
   Typography
   ========================================================================== */

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

blockquote { margin: 1em 40px; }

dfn { font-style: italic; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }

/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }

/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }


/* =============================================================================
   Lists
   ========================================================================== */

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }


/* =============================================================================
   Embedded content
   ========================================================================== */

/*
 * 1. Improve image quality when scaled in IE7: h5bp.com/d
 * 2. Remove the gap between images and borders on image containers: h5bp.com/e 
 */

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }



/*
 * Correct overflow not hidden in IE9 
 */

svg:not(:root) { overflow: hidden; }


/* =============================================================================
   Figures
   ========================================================================== */

figure { margin: 0; }


/* =============================================================================
   Forms
   ========================================================================== */

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }

/* 
 * 1. Correct color not inheriting in IE6/7/8/9 
 * 2. Correct alignment displayed oddly in IE6/7 
 */

legend { border: 0; *margin-left: -7px; padding: 0; }

/*
 * 1. Correct font-size not inheriting in all browsers
 * 2. Remove margins in FF3/4 S5 Chrome
 * 3. Define consistent vertical alignment display in all browsers
 */

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

/*
 * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
 * 2. Correct inner spacing displayed oddly in IE6/7
 */

button, input { line-height: normal; *overflow: visible; }

/*
 * Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
 */

table button, table input { *overflow: auto; }

/*
 * 1. Display hand cursor for clickable form elements
 * 2. Allow styling of clickable form elements in iOS
 */

button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }

/*
 * Consistent box sizing and appearance
 */

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/* 
 * Remove inner padding and border in FF3/4: h5bp.com/l 
 */

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/* 
 * 1. Remove default vertical scrollbar in IE6/7/8/9 
 * 2. Allow only vertical resizing
 */

textarea { overflow: auto; vertical-align: top; resize: vertical; }

/* Colors for form validity */
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }


/* =============================================================================
   Tables
   ========================================================================== */

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }


/* ==|== primary styles =====================================================
   Author: 
   ========================================================================== */
















/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */

/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: h5bp.com/q */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }


/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */
 
 @media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}