﻿/* VGS Victoria Genealogical Society - Style Sheet for victoriags.org - 2 column home page */

/* 2017 color pallet
Darkest green: 225301
dark green: 2c6c00
mid green: 42930a
emerald: 47ac39  --- text
lime: 78bf31
brown: 774800 --- tree trunk
black: 000000
white: ffffff
*/

/* OLD colors used (see kuler.adobe.com color pallet file):
sage green matte - #78ad78
green/grey outer border - #496949 
dark green - #2e432e
green, h1 - #398939
pale green (menu bg) - #abd2a4
palest green: - #e3f6e2
dark plum - #603048
pale lilac - #F1B9FF looks pink on Mac
rose - #ad7892 - d08fae - e49dbf
*/

/* ----------------- page layout ------------------- */

body {
background-color: #ffffff;
text-align:center; /*trying to fix an IE display bug */
font:normal normal normal 14px Arial, Helvetica, sans-serif;
color:#000000;
} 

div#outer { 
/* background-color:#42930a; 
border: 3px #225301 solid; */
width:1080px;
margin:20px auto;	
padding:10px;			
}

div#wrapper1 {
/* background-color: #e8d9c1; 
border:3px #774800 solid; */	
margin:0;
padding:20px;	
}

div#wrapper2 {
background-color:#ffffff;
/* border:2px #774800 solid; */				
}

/* holds logo image in background, top left header */
div#header {
height:200px;
background:#ffffff url('../graphics/vgslogo_201710_260x200.jpg') no-repeat left top;
/* background:#ffffff url('../im/maple_leaves_left267x200.jpg') no-repeat left top; */				
margin:0;
padding:0;
text-align:center;
position:relative; /*trying to fix IE bg display issue */
left:0;
top:0;		
}

/* holds optional background image, top right header - also holds full width header text! */
div#header_right {			
/*width:267px;*/
/*background:transparent url('../graphics/vgsPersonTree_icon_2017_200.jpg') no-repeat right top;*/
height:200px;
margin:0;
padding: 0px 20px 0 20px;
/*float:right;
position:absolute;
right:0px;
top:0px;*/
text-align:left;
}

div#header_right p {
font-size:12px;
margin:0;
padding:8px 250px 0 250px;
text-align:center;	
font-weight:bold;			
}

div#header_right p.note11 {
font-size:1.2em;			
}


/* holds optional text on the right side of the top header */
div#header_text {
width:260px;
margin:0;
position:absolute;	
right:0;
top:20px;
text-align:center;
font-size:14px;
font-family:Arial, Helvetica, sans-serif;	
}

div#header_right p.f1 {
font-size:13px;
}

/*  3 columns intro section  */
div#intro_wrap2 {
margin:0;
padding:0;
background-color:transparent;
background-image:url('../graphics/promo_bg.jpg');
background-repeat:repeat-y;
background-position:top right;
text-align:center;		
}

div#intro_wrap1 {
margin:0;
padding:0;
background-color:transparent;
background-image:url('../graphics/quicklink_bg.jpg');
background-repeat:repeat-y;
background-position:top left;
text-align:left;		
}

div#intro {
margin:0;
padding:20px 0px 20px 0px;
background-color:transparent;
/*background-image:url('../im/tree_isolated_watermark279x250.jpg');
background-repeat:no-repeat;*/
background-position:center center;
text-align:left;
border: 1px #2e432e solid;	
position:relative;
top:0px;
left:0px;	
}

div#quick {
padding:0; 
margin:0; 
width:200px;
position:absolute;
background-color:transparent;
top:0px;
left:0px;
border: 0px solid #603048;
border-left: 1px #2e432e solid;
text-align:center;	
}
	
div#quick h3 {
	color:#603048;
	font-size:1.5em;
	padding:0;
	margin:10px 0;
}
  
div#quick ul {
      text-indent:0px; 
      margin: 0;
      padding: 0;	
}
   	
div#quick li { 
	  list-style-type:none; 
      margin:0 auto 0 auto;
      padding:12px 0 0px 0px; /* was 12 0 0 38 */
      height:36px;
      background-color:transparent;
      background-image:url('../graphics/quickButton_green2.jpg');
      background-repeat:no-repeat;
      text-align:center; 
} 
	  
div#quick li.wrap { 
	  list-style-type:none; 
      margin:0 0 4px 0; /* was 0 auto 0 auto */
      padding:4px 5px 4px 5px; /*was 4 10 8 10 */
      /*padding:5px 0 7px 38px;*/
      height:36px;
      background-color:transparent;
      background-image:url('../graphics/quickButton_green2.jpg');
      background-repeat:no-repeat;
      text-align:center; 
	  } 
	  	  
div#quick a { 
	  display:block; 
	  font-family:arial, verdana, sans-serif; 
	  font-size:1.1em; 
	  font-weight:bold;
	  vertical-align:middle;
	  text-align:center;  
	  text-decoration:none; 
	  color:#000000; 
	  padding:0;/*was 0.6em*/  
}
	  
div#quick a:active { 
	  display:block; 
	  font-family:arial, verdana, sans-serif; 
	  font-size:1.1em; 
	  font-weight:bold;
	  text-align:center;  
	  vertical-align:middle;
	  text-decoration:none; 
	  color:#000000; 
	  padding:0;  
	  } 
	  
div#quick a:visited { 
	  display:block; 
	  font-family:arial, verdana, sans-serif; 
	  font-size:1.1em; 
	  font-weight:bold;
	  text-align:center;  
	  vertical-align:middle;
	  text-decoration:none; 
	  color:#000000; 
	  padding:0;  
} 
	  
div#quick li a:hover { 
	  background-image:url('../graphics/quickButton_green1.jpg');
	  color:#774800;
	  height:28px;
	  margin-top:-12px;
	  padding-top:12px;
	  padding-bottom:4px;
} 
	  
div#quick li.wrap a:hover { 
	  background-image:url('../graphics/quickButton_green1.jpg');
	  color:#774800;
	  height:28px;
	  margin-top:-4px;
	  padding-top:4px;
	  padding-bottom:9px;
} 

div#quick table#q {
	border: 0 solid #ffffff;
	width: 180px;/* was 160px */
	color : #000000;
	margin: 0 10px 0 10px;
	padding:0;
}

div#quick table#q td {
	border:0 solid #ffffff;
	background-color:transparent;
	padding:2px;
	margin:0px;				
}

div#quick table#q a { 
	  border:0 solid #ffffff;
	  vertical-align:middle;
	  text-align:center;
	  text-decoration: none;
	  margin:0;  
	  padding:0;/*was 0.6em*/  
}
	  
div#quick table#q a:active { 
	  border:0 solid #ffffff;
      border:0 solid #ffffff;
	  text-align:center;
	  text-decoration: none; 
	  vertical-align:middle;
	  padding:0;  
	  } 
	  
div#quick table#q a:visited { 
	  border:0 solid #ffffff;
	  border:0 solid #ffffff;
	  text-align:center;  
	  text-decoration: none;
	  vertical-align:middle;
	  padding:0;  
} 

div#quick table#q a:link { 
	  border:0 solid #ffffff;
	  border:0 solid #ffffff;
	  text-align:center;  
	  text-decoration: none;
	  vertical-align:middle;
	  padding:0;  
} 
  
div#quick table#q a:hover { 
	  background-color:transparent;
	  border:0 solid #2e432e;
	  text-decoration: none;
	  margin:0;
	  padding:0;
}

div#intro div#thanks {
	padding:0px 0 0 0;
	margin:-10px 0 20px 0;
	text-align:center;
	font-size:.9em;
	font-style:italic;			
}
	
div#promo {
padding:6px 0; 
margin:0; 
width:200px;
position:absolute;
top:0px;
right:0px;
text-align:center;
background-color:transparent;
border-right: 1px #2e432e solid;
/*border-top: 2px solid green;
border-bottom: 2px solid green;
background-image:url('../graphics/right_intro_bg.jpg');
background-repeat:repeat-y;*/
}

#promo p {
	margin:0;
	padding:6px;
}

#promo a:active { 
	  display:block; 
	  font-family:arial, verdana, sans-serif; 
	  font-size:1.1em; 
	  font-weight:bold;
	  text-align:center;  
	  text-decoration:underline; 
	  color:#000000; 
	  padding:0;  
} 

#promo a:visited { 
	  display:block; 
	  font-family:arial, verdana, sans-serif; 
	  font-size:1.1em; 
	  font-weight:bold;
	  text-align:center;  
	  text-decoration:underline; 
	  color:#000000; 
	  padding:0;  
} 

#promo a { 
	  display:block; 
	  font-family:arial, verdana, sans-serif; 
	  font-size:1.1em; 
	  font-weight:bold;
	  text-align:center;  
	  text-decoration:underline; 
	  color:#000000; 
	  padding:0;  
} 

#promo a:hover { 
	  color:#603048;
	  text-decoration:none;
}
  
div#main {
margin:0;
padding:20px 20px 0px 20px;
text-align:left;
/*position:relative;*/				
}

div#right {
float:right;
/*background-color:#ffd3d6; ***was #c0ecb7 light green or ddffdd -----pale pink: ffe5ec or ffc8d4*/
background-color:#e8d9c1;/*was #dcc6ff lavender*/
width:280px;
padding:10px 10px 10px 10px;
margin-left:10px;
/*position:absolute;
right:10px;
top:10px;*/
border: 1px #2e432e solid;			
}
/* see below for more right column styles - headers etc.  */

div#footer {
margin:0;
padding:0px;/* was 0 20px 10px 20px*/
text-align:center;
width:100%;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
/*position:relative;*/				
}

div#menu_top {
background-color:#abd2a4;/* lighter is #b7fdb1 or c0ecb7*/
border-top: 2px #2e432e ridge;
border-bottom:2px #2e432e ridge;
text-align:center;	
padding:5px 20px 5px 20px;			
}

div#menu_bottom {
width: 98%;
background-color:#c0ecb7;
border-top: 2px #2e432e ridge;
border-bottom:2px #2e432e ridge;
border-left: 1px #2e432e solid;
border-right: 1px #2e432e solid;
text-align:center;	
padding:5px 20px 5px 20px;					
}

div.clear {
clear:both;			
}

table {
border-color: #496948; /* was #cc9900 */
border-style: ridge;
}

table.p {
border-style: none;
background-color : #ffffff;
color : #000000;
}

table.p h3 {
text-align:center;
color:black;	
}

table.c {
border-color: #cc9900;
border-style: solid;
} 

table.a {
border-color: #cc9900;
border-style: solid;
border-width: 1px;
} 

table#f {
width: 400px;
margin: 0px auto 0px auto;
border-collapse: collapse; 
border: none;			
}

table#f td {
font-size:10px;					
}

table#f td a{
font-size:10px;					
}

/* ------------------- text tag formating ----------------------- */

ol {
font-family : Arial, Helvetica, sans-serif; 
font-size : 13px;  
}

dl {
font-family : Arial, Helvetica, sans-serif; 
font-size : 13px;  
}

ul {
font-family : Arial, Helvetica, sans-serif; 
font-size : 13px;  
}

ul.narrow {
font-family : Arial, Helvetica, sans-serif; 
font-size : 12px;
list-style-type: none;
padding:10px;
margin:0;
text-align: left;
}

ul.narrow li {
padding-bottom:10px;				
}

ul.narrow li a {
font-size:12px;			
}

li {
padding-bottom:10px;								
}

ul {
list-style-position : inside; 
} 

ul.o {
list-style-position : outside; 
background-color : transparent; 
}

blockquote {
font-family : Arial, Helvetica, sans-serif; 
font-size : 13px;  
}

th {
font-family : Arial, Helvetica, sans-serif; 
font-size : 14px;  
}

td {
font-family : Arial, Helvetica, sans-serif; 
font-size : 13px;  
}

div {
font-family : Arial, Helvetica, sans-serif; 
font-size : 14px;  
}

p {
font-family : Arial, Helvetica, sans-serif; 
font-size : 14px;  
}

h1 {
margin: 0;
padding: 10px 10px 6px 10px;
font-family : Verdana, Arial, Helvetica, sans-serif; 
font-size : 20px; 
font-weight : bold; 
color:#398939; /* was #996600 or cc6600 gold */
background-color : transparent;
text-align:center;
}

h2 {
padding:5px 5px 5px 40px;
font-family: Arial, Helvetica, sans-serif; 
font-size: 18px; 
font-weight: bold; 
color: #4fad03; /* #4fad03 */
background-color: transparent; /* was transparent; f1b9ff pale lilac, or #d08fae dusty rose  */
background-image: url('../graphics/vgsPersonTree_icon_2017_31x32.png');
background-repeat:no-repeat;
border-bottom: 2px #4fad03 groove;  /* was 4fad03  */
} 

h3 {
font-family : Arial, Helvetica, sans-serif; 
font-size : 16px; 
font-weight : bold; 
color : #496949; 
background-color : transparent;
}

h4 {
font-family : Arial, Helvetica, sans-serif; 
font-size : 14px; 
font-weight : bold; 
color :#78ad78; /* was ad7892 lilac */
background-color : transparent; 
}

h5 {
font-family : Arial, Helvetica, sans-serif; 
font-size : 13px; 
font-weight : bold; 
color : #1a1a1a;  /*was #339966 green*/
background-color : transparent;
} 

div#right h1 {
color:#603048;				
}

div#right h2 {
color : #774800; /* was #603048 plum */
background-color:#f1e8db; /* was c38ffe plum  */
/*background-image:url("../im/periwinkle_bar.jpg");*/
background-image:none;
background-repeat:repeat-x;
padding: 5px;	
border-bottom: 2px #744800 groove; /* was 944a6f   */		
}

div#right h3 {
color:#1a1a1a;				
}

div#right h4 {
color:#ad7892;				
}

div#right h5 {
color: #d08fae;				
}

a {
background:transparent;
font-weight:normal;
font-family: Arial, Helvetica, sans-serif; 
font-size: 14px; 
color: #398939; 
text-decoration: none;				
}

a:link {
color: #398939; 
text-decoration: underline;
}

a:visited {
color: #398939; 
text-decoration: underline;
} 
 
a:hover {
color: #603048; 
text-decoration: underline;
}
 
a:active {
color: #398939; 
text-decoration: none;
}

div#right a {
background:transparent;
font-weight:normal;
font-family: Arial, Helvetica, sans-serif; 
font-size: 14px; 
color: #603048; 
text-decoration: none;				
}

div#right a:link {
color: #603048; 
text-decoration: underline;			
}

div#right a:visited {
color: #603048; 
text-decoration: underline;
} 

div#right a:hover {
color: #398939; 
text-decoration: underline;				
}

div#right a:active {
color: #603048; 
text-decoration: none;				
}

a.n:link {
color : #496949; /*originally 009933*/
text-decoration : none;
font-size : 14px;  
}

a.n:visited {
color : #496949; 
text-decoration : none;
font-size : 14px;  
} 

a.n:hover {
color : #603048; 
text-decoration : none;
font-size : 14px;  
} 

a.n:active {
color : #496949; 
text-decoration : none;
font-size : 14px; 
}

span.on {
background : transparent; 
color : #603d48; /*was 996600 gold*/
text-decoration : none;
font-weight : bold; 
font-family : Arial, Helvetica, sans-serif; 
font-size : 14px;  
}

table#schedule {
width: 90%;
margin: 20px auto 20px auto;
border-collapse: collapse; 
border: ridge #222222 3px;				
}

table#schedule tr th{
border: solid black 1px;	
padding: 5px;	
margin-left : 10%;
margin-right : 10%;
color : #000000;
background-color:#339966;		
}

td {
background-color : #ffffff;
padding : 5px;
margin-left : 10%;
margin-right : 10%;
color : #000000;				
}

td.c {
background-color : #ffff99;
border-width: 1px;
color : #000000;
}

table#schedule tr td{
padding: 5pt;
margin-left : 10%;
margin-right : 10%;
color : #000000;
border: solid #339966 1px;
text-align:center;			
}

div#seve {
font-family : Comic Sans MS, Arial, Helvetica, sans-serif; 
font-size : 13px; 
color : #000000; 
background-color : transparent; 
}

div.menu2 {
text-align: center;	
}

div.menu2 a {
font-size: 1.1em;
font-variant: small-caps;
}

div.menu2 a:hover {
font-size: 1.1em;
font-variant: small-caps;
}

p.sm {
font-family : Arial, Helvetica, sans-serif; 
font-size : 9px; 
font-weight : bold; 
background-color : transparent; 
}

p.lar {
font-family : Arial, Helvetica, sans-serif; 
font-size : 14px; 
font-weight : normal; 
background-color : transparent; 
}

p.ex {
border : 3pt solid #cc9900;
background-color : #ffffff;
padding : 5px;
margin-top : 5px;
margin-bottom : 5px;
margin-left : 10%;
margin-right : 10%;
color : #000000;
}

.caption {
text-align: center;
font-style: italic;
font-size:.9em;
font-weight:normal;				
}

.caption2 {
text-align: center;
font-style: italic;
font-size:.8em;
font-weight:normal;				
}

.caption3 {
text-align: center;
font-style: italic;
font-size:1em;
font-weight:bold;				
}

.rightnote {
text-align: right;
font-size:.9em;
font-weight:normal;					
}

.note {
text-align: center;								
}

.note1 {
text-align: left;	
font-weight: bold;
font-size:1.1em;							
}

.note2 {
text-align: center;
font-style: normal;
font-size:1.1em;
font-weight:bold;
margin-top:0;				
}

.note3 {
text-align: center;
font-style: italic;
font-size:1.1em;
font-weight:bold;
margin-top:0;			
}

.note4 {
text-align: center;	
font-weight: bold;
color:red;						
}

.note5 {
text-align: center;	
font-weight: bold;
color:yellow;						
}

.note6 {
text-align: center;	
font-weight: bold;
font-size:1.1em;
color:green;						
}

.note7 {
color:#CC00FF; /*magenta*/	
text-align: center;	
font-size:3em;
font-weight:bold;
}

.note8 {
color:#222222; 	
text-align: center;	
font-size:2em;
font-weight:bold;	
}

.note9 {
color:#CC0000; /*red*/	
text-align: center;	
font-size:2em;
font-weight:bold;
}

.note10 {
text-align: center;	
font-weight: bold;
font-size:1.1em;
color:#603048;						
}

.note11 {
font-weight: bold;
font-size:1.2em;	
}

.note12 {
text-align: center;	
font-weight: bold;
font-size:2em;
color:#704a16;	/* trunk brown */					
}

.note13 {
text-align: center;	
font-weight: bold;
color:green;
font-size:1.1em;						
}


.reduced {
color:#603048;
font-size:.85em;
font-style:normal;
}

.highlight1 {
background-color:yellow				
}

.highlight2 {
background-color:#80f94a /*green*/				
}

.highlight3 {
background-color:#ff3a26 /*red*/			
}

.highlight4 {
background-color:#03fbf8; /*aqua*/			
}

i.g {
color : #006600; 
background-color : transparent;
font-weight : bold;  
}

i.gr {
color : #ff0000; 
background-color : transparent;
font-weight : bold;  
}

i.s {
font-family : Verdana, Arial, Helvetica, sans-serif; 
font-size : 10px; 
font-weight : normal; 
color : #000000; 
background-color : transparent; 
} 

img.left {
float : left
} 
img.right {
float : right
}

.floatl {
float:left;
margin:0;
padding-right:10px;
padding-left:0;	
border:0;
}

.floatr {
float:right;
margin:0;
padding-left:10px;
padding-right:0;
border:0;				
}

table.photo180_left {
width:200px;
float:left;	
border:0;
}

table.photo180_right {
width:200px;
float:right;
border:0;	
}

table.photo300_right {
width:320px;
float:right;
border: 0;			
}

table.photo300_left {
width:320px;
float:left;
border:0;			
}

.inset {
margin:10px 40px 20px 40px;
padding:10px 20px;
border:2px #78ad78 groove;
text-align:center;				
}

.inset1 {
margin:10px 160px 20px 160px;
padding:10px 20px;
border:2px #78ad78 groove;
text-align:center;				
}

.inset2 {
margin:10px 40px 20px 40px;
padding:10px 20px;
border: 0;
font-style: italic;
font-size:.9em;
font-weight:normal;				
}

.inset3 {
margin:20px auto 20px auto;
padding:20px;
border:0 #78ad78 groove;				
}

.inset4 {
margin:0px 20px 0px 20px;
padding:5px;
border:1px #78ad78 solid;
}

.inset5 {
width:60%;
margin:10px auto 20px auto;
padding:10px 20px;
border:2px #78ad78 groove;	
text-align:center;
font-size: 3em;
font-weight:bold;			
}

.inset6 {
margin:0px 20px 0px 20px;
padding:0;
border:none;
}

div#summary {
display:none;				
}



