﻿
/*----------------------------------------------------------------    */
/* see color samples at http://www.immigration-usa.com/html_colors.html */
Colors used on pages are:
background color for regular page content blocks  :#06061d  (a dark blue)
background color for special page content blocks  :#0f0f29 (a medium blue)
background color for heading blocks  :#0b0b3b (a very dark, almost black blue)


background color for regular page content blocks  :#06061d  (a dark blue)
background color for special page content blocks  :#80825 (a medium blue)

background color for regular page content blocks  :#80826  (a dark blue)
background color for special page content blocks  :#70737 (a medium blue)

text color for regular text  :#dddd5f  (white)
text color for heading text  :#ffcc00  (yellow)
hotlink outline color on hover  :#54af62
*/
/*----------------------------------------------------------------    */

p 
 {
 margin-left:0px;
 background-color:#0f0f29;
 color:#dddd5f;
 text-align: left;
 font-weight:100;
 }
 
 p.inset6lightbg 
 {
 padding:6px 6px 6px 6px;
 background-color:#06061d;
 color:#dddd5f;
 text-align: left;
 font-weight:100;
 }
 
 p.invisibleText 
 {
 padding-left:6px;
 background-color:#06061d;
 color:#06061d;
 text-align: left;
 font-weight:100;
 }
 

 p.inset6medbg 
 {
 padding:6px 6px 6px 6px;
 background-color:#0f0f29;
 color:#dddd5f;
 text-align: left;
 font-weight:100;
 }
 
 p.center 
 {
 margin-left:0px;
 background-color:#0f0f29;
 color:#dddd5f;
 text-align: center;
 }
 
p.headingX-Large 
 {
 color: #ffcc00;
 background-color: #0b0b3b;
 text-align: left;
 font-size:x-large;
 font-family: "Arial Black", Gadget, sans-serif;  }
 
p.headingLarge 
 {
 color:#ffcc00;
 background-color:#0b0b3b;
 text-align:left; 
 font-size:large;
 font-family:"Arial Black", Gadget, sans-serif;
 }

 body 
 {
 color:#dddd5f;
 background-color:#0f0f29;
 text-align:left;
 font-family:Arial, Helvetica, sans-serif;
 font-size:large; /*font-size:small;*/
 margin:0;
 padding:0;
 font-weight:100;
 }
  
 /* STYLES FOR HEADINGS */ 
 
 h1 
 {
 color: #ffcc00;
 background-color: #0b0b3b;
 font-size:x-large;
 text-align: left;
 font-weight: 100;
 font-family: "Arial Black", Gadget, sans-serif;
 padding:6px 6px 6px 6px; 
 margin:4px 4px 4px 4px;
 }
   
 h1.center 
 {
 color: #ffcc00;
 background-color: #0b0b3b;
 font-size:x-large;
 text-align: center;
 font-weight: 100;
 font-family: "Arial Black", Gadget, sans-serif;
 padding:6px 6px 6px 6px;
 margin:4px 4px 4px 4px;
 }
 
h2 
 {
 color:#ffcc00;
 background-color: #0b0b3b;
 font-size:large;
 text-align:left;
 font-weight:120;
 font-family:"Arial", Gadget, sans-serif; 
 padding:6px 6px 6px 6px;
 margin:4px 4px 4px 4px;
 }

 h2.center 
 {
 color:#ffcc00;
 background-color: #0b0b3b;
 font-size:large;
 text-align:center;
 font-weight:100;
 font-family:"Arial", Gadget, sans-serif;
 padding:6px 6px 6px 6px;
 margin:4px 4px 4px 4px;
}
 
 h3 
 {
 color:#ffcc00;
 font-size:medium;
 text-align:left;
 font-weight: bold;
 font-family:"Arial Black", Gadget, sans-serif; 
 padding:0px 0px 0px 6px;
 }
 
 h4 
 {
 color:#ffcc00;
 font-size:medium;
 text-align:left;
 font-weight:100;
 font-family:"Arial", Gadget, sans-serif; 
 padding:0px 0px 0px 6px;
 }

 
 hr
 {
 color: #dddd5f
 }

 /* SUPERSCRIPT FOR TM AND R */
 .super {
    position: relative;
   vertical-align: 0.5em;
    font-size: 0.5em;
}
 
    
 /* STYLES FOR BLOCKS THAT REPLACE TABLES */
    
.pageContainer { 
 white-space: nowrap;  
 background:#06061d; 
 margin-bottom:6px; 
 }

.ContainerCenter {
 display: block; 
 margin: 0 auto; 
 }

.column20pctNormalMiddle { 
 display: inline-block; 
 width: 20%; 
 white-space: normal; 
 padding: 2px; 
 vertical-align:middle  
 }  

.column48pctDark { 
 display: inline-block; 
 width: 48%; 
 white-space: normal; 
 background:#0f0f29; 
 padding: 6px; 
 vertical-align:top; 
  margin:4px 4px 4px 4px;
  }
    .ie7 .column1 {display:inline; zoom:1}
 
.column48pctNormal { 
 display: inline-block; 
 width: 48%; 
 white-space: normal; 
 padding: 6px; 
 vertical-align:top; }
    .ie7 .column2 {display:inline; zoom:1}
  
.column48pctNormalMiddle { 
 display: inline-block; 
 width: 48%; 
 white-space: normal; 
 padding: 2px; 
 vertical-align:top  
 }  

.columnFlexDark { 
 display: inline-block; 
 white-space: normal; 
 background:#0f0f29; 
 padding: 6px; 
 vertical-align:top; 
  margin:4px 4px 4px 4px;
  }


.columnFlexNormalMiddle { 
 display: inline-block; 
 white-space: normal; 
 padding: 12px; 
 vertical-align:top  
 }  

.columnFlexNormalBlock { 
 display: block; 
 white-space: normal; 
 padding: 6px; 
 vertical-align:top  
 }  

.contacts200pxNormal { 
 display: inline-block; 
 width: 200px; 
 white-space: normal;
 padding: 6px; 
 vertical-align:bottom; 
 }

/* The following div clases are used in the facilities page to place photos along the left around the 'INSET' text */
.bigBlock {

}

.bigBlockInset {
	float: left; width: 70%; padding: 6px;
}

.bigBlockNoFloat {
	width: 95%; padding: 6px;
}

.iframeMargins  {
 margin:4px 4px 4px 4px;
 }

/* END div clases are used in the facilities page to place photos along the left around the text */


 
/* STYLES FOR LINKS */

/* The following classes affect all hyperlinks */

a:link
{
display:inline;
font-weight:bold;
color: #33CCFF;
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
} 
 
a:visited
{
display:inline;
font-weight:bold;
color: #33CCFF;
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
}

a:hover
{
color: #33CCFF;
font-family:Arial, Helvetica, sans-serif;
<!--outline: 2px solid #54af62; 
outline-offset: 1px; -->
}

a:active
{
color: #33CCFF;
font-family:Arial, Helvetica, sans-serif;
background-color:#dddd5f;
}

/* The following classes are meant to NOT produce the #54af62 green outline seen on regular hyperlinks as defined above in a.hover */

a.plainlink:link, a.plainlink:hover, a.plainlink:visited, a.plainlink:active 
{
display:inline;
position: relative;
font-weight:bold;
color: #33CCFF;
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
outline: 0px solid #ffcc00;
outline-offset: 0px;
/*padding: 0px; 
cursor: pointer;
border: none;
text-indent: -999em;*/
}

/* END of STYLES FOR LINKS */

#pagehead {
	text-align:left; 
	padding: 0px 0px 0px 0px; /*top right bottom left*/
	background-color:#0b0b3b;
	color: #ffcc00;
	border:0px solid black;
 	margin:0px 0px 0px 20px;  /*top right bottom left*/
	font-family:Arial; 
	} 

#content {  /* This is an id and can only be used once on a page  */
	text-align:left; 
	padding: 0 0 0px 0; /*top right bottom left*/
	background-color:#06061d;
	color: #dddd5f;
	border:1px solid black;
 	margin:4px 20px 0px 20px;  /*top right bottom left*/
	font-family:Arial; 
	} 
	

.pagebody {  /* This is a class and can be used mutliple times within a page and can be combined with other classes*/
	text-align:left; 
	padding: 0 0 0px 0; /*top right bottom left*/
	background-color:#06061d;
	color: #dddd5f;
	border:1px solid black;
 	margin:4px 20px 0px 20px;  /*top right bottom left*/
	font-family:Arial; 
	} 

#navigation {
   float: left;
   top:4px;
   width: 200px;
   /* height: 600px;*/
   margin: 0;
   text-align:center;
   border:1px solid black;
   background-color:#06061d;
   font-family:Arial, Helvetica, sans-serif;
   font-weight: normal;
}


#pagefoot {
    text-align:center; 
	vertical-align:middle;
	font-family:Arial;
 	color: #dddd5f;
 	font-size: small;
 	padding: 8px; /*top right bottom left*/
    background-color:#0b0b3b;
	border-color: #0f0f29;	
	border:0px solid black;
 	margin:4px 20px 8px 20px;  /*top right bottom left*/
	} 

#centerDoc {
   position: absolute;
   padding: 0 0 20px 0; /*top right bottom left*/
   margin-top: 50px;
   margin-left: 235px;
   background-color:#06061d;
   color: #dddd5f;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* STYLES FOR POSITIONING IMAGES and PHOTOS  */

.valignmiddle { 
 vertical-align: middle; 
 padding: 0; margin: 0; 
} 
 
img.right { 
 float: right;
 display: block;
 margin:4px;
 border:2px #06061d;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;  
}
 
/* Note - there is no such thing as float: center */
/*        All workarounds require a fixed amount of px to ceneter within, which violates the idea of using blocks in the first place */

 
img.left { 
 float: left;
 display: block;
 margin:4px;
 border:2px #06061d;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;}
 
img.inline { 
 display: inline-block;
 /* display: block; */
 margin:2px;
 border:4px #0048B5;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;  
}
 
img.inlinetight { 
 display: inline-block; 
 margin:-2px;
 border-width:0px; 
}
 
img.leftplain {
 float: left;
 display: block;
 margin:4px;
 border-color: #06061d;
 border-style: solid;
 border-width: 2px; 
} 

img.rightplain {
 float: right;
 display: block;
 margin:4px;
 border-color: #06061d;
 border-style: solid;
 border-width: 2px;
} 
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Styles to make Images and Photos Pop-Up on Mouseover 
   as documented at http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer
Use the following code in the web page:   
<a class="thumbnail" href="#thumb">
 <img src="imagename_thumb.jpg"  title="title here" alt="title here">
 <span><img  src="imagename.jpg" title="title here" alt="title here">
 </span>
</a>   
*/
   
.thumbnail{
 position: relative;
 z-index: 0;
}

.thumbnail:hover{
 background-color: transparent;
 z-index: 50; 
}

.thumbnail span{ /*CSS for enlarged image*/
 position: absolute;
 background-color: lightyellow;
 padding: 2px;
/*left: -1000px;*/ 
 border: 1px gray;
 visibility: hidden;
 color: black;
 text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
 border-width: 0;
 padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
 visibility: visible;
 top: -300px;  /*position where enlarged image should offset vertically */ 
 left: -300px; /*position where enlarged image should offset horizontally */
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */


