/* ands2.css - CSS file for the www.ands.org.au website, built in the Monash University CMS.

Original author unknown, perhaps Dennis Gellert?
Many changes by Steve Bennett July-Oct 2010, including conversion to tableless layout. */

/******************************** Basic text properties for the whole site ************************/
body {
	background-color: white;
	color: black;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	height: 100%;
}
html { height: 100%; }


h1, h2, h3, h4, h5, h6 {
	
    font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
    margin: 1em 0em 0.5em 0em;
	padding: 0;
}
#main-content-div h1, 
#main-content-div h2, 
#main-content-div h3,
#main-content-div h4,
#main-content-div h5,
#main-content-div h6 {
 	clear: left; /* risky? */
}

h1 { 
  font-size: 1.5em; 
  color: #DF781C; /* "ANDS orange" */
  font-weight: bolder;
  border-bottom: 1px #666 solid;
  margin-right: 160px; /* to leave space for navbox */
  text-shadow: #CCC 2px 2px 2px;
}

h2 { 
  font-size: 1.2em; 
  color: #303F38; /* "ANDS olive green" */
}

h3 { 
  font-size: 1.0em; 
  color: #303F38;
}

h4 { 
  font-size: 0.9em; 
  color: #303f38;
  font-style:italic;
  font-weight: normal;
  margin-bottom: 0px;
  text-decoration: underline;
}


hr {
  color:#888888;
  height:1px;
}

a:link, a:hover, a:visited {
  text-decoration: none;
/*  color:#DF781C;*/
  color:#d0681C;  

}

a:hover {
  text-shadow: -0px 0px 1px #fdd;
/*  color:#c0580C;    */
  color:#e0782C;      
}



#main-content a:link {
/*	font-weight: 600;*/
}

.mailing-list-div {
	width: 20em;
	margin: 1em;
	border-top: 1px gray dashed;
	border-bottom: 1px gray dashed;	
	padding: 0.5em;
}

.mailing-list-div p{
	margin-top: 0;
}

p {
  margin-top: 0;
}

/******************************************************* Header **********************************************************/

.header-table {
    font-size: 14px;
    width:100%;
}

/* The green bar with links on it */
.header-links-bar {
	padding: 2px;
	background:#303F38; 
	color:white;
}

.header-links-bar .snav {
	border-top: 1px solid black;
}

/* a couple of little divs between the two bars */
.header-links-bar-transition1 {
	background:#303F38; 
	width: 100%; 
	height: 3px; 
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#303F38', endColorstr='#DF781C'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#303F38), to(#DF781C)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #303F38,  #DF781C); /* for firefox 3.6+ */
}

.header-links-bar-transition2 {
	background:#303F38; 
	width: 100%; 
	height: 3px; 
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DF781C', endColorstr='#FF9D40'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#DF781C), to(#FF9D40)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #DF781C,  #FF9D40); /* for firefox 3.6+ */
}


/* An orange bar with search boxes in it */
.header-searchbox-bar {
	padding: 2px;
	color: white;
    background-color: #FF9D40; /* paler orange */
}

/* Transition from orange bar to page (white) */
.header-searchbox-bar-transition {
  background:white; 
  width: 100%; 
  height: 2px; 
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9D40', endColorstr='#FFFFFF'); /* for IE */
  background: -webkit-gradient(linear, left top, left bottom, from(#FF9D40), to(#FFF)); /* for webkit browsers */
  background: -moz-linear-gradient(top,  #FF9D40,  #FFF); /* for firefox 3.6+ */
}

#header-rda-label a {
  font-size: 1em; 
  color: black;
  font-weight: bolder;
  margin-left: 10px;

/*  text-shadow: #CCC 2px 2px 2px;*/
  text-decoration: underline;	
}

/* .snav used randomly: thin green bar above header-table bar, around the google search box, and for the bulk of the left side section nav */

.snav a:link, .snav a:visited {
  color: #dddddd;

}

.snav a:hover {
  color: #ffffff; 
}


/* Table cell with Google search box */
#global-utils-links {
	padding-right: ;
}
 

#global-utils a:hover {
    text-decoration: underline;
}

#global-utils form {
    display: inline;
    padding: 0;
    margin: 0;
}

/*
#breadcrumbs, #breadcrumbs a:link, #breadcrumbs a:hover, #breadcrumbs a:visited {
	font-size: 0.9em;
	padding: 0.2em;
	color: #000000;
}
*/

/* form for searching RDA from front page */
#rda-search-label, #rda-search-label a {
    color: #000;
    font-weight: bold;

}


/******************************************************* Left sidebar **********************************************************/
/* Section navigation */

/* Whole sidebar */
#ands-section-nav {
  color:#ffffff;
  background-color: #303F38;
  margin-top: 0px;
	margin-right: 0;
	margin-left:5px;
	padding: 0;
	font-size: 0.9em;
	width: 210px;
	min-width: 210px;
	vertical-align: top;
}

#ands-section-nav .snav {
  background-color: #303F38;
/*   	margin-top: 20px;*/
}

#section-nav-items {
/*  An extraneous div grouping all the items. */

}


.ands-section-nav-body ul {
  background-color: #FFFFFF;
  color: #ffffff;
	margin-top: 0.4em;
	margin-left: 1em;
}

/* A div around each item in the sidebar */
.section-nav-item {
	width:100%;
}

/* A link that points to the page we're currently on. Set by javascript in head-include.shtml */
.section-nav-item .active {
	background-color: #564; 
	color: #FFAA4D !important;
}

.section-nav-item a.active {
	color: #FFAA4D !important;
}


/* Header items are currently marked as bold */
.section-nav-item b {
  text-shadow:  gray 0.5px 0.5px 1px;
  color: white;
}

/* "Subitems" are less prominent, pushed in */
.ands-section-nav-subitem {
   margin-left:28px;
}

/* both kinds of items */
.section-nav-item a {
   display: block;
   min-height: 1.45em;
   padding-top: 0.5em;
   /* separating line between items */
   border-bottom: #607970 2px ridge;
}

.section-nav-item a:hover {
  text-decoration: underline;
  background: #446655;
}


#section-nav-right-gradient {
	background:white; 
	width: 5px; 
	min-width: 5px; 
    background: -webkit-gradient(linear, left top, right top, from(#303F38), to(#ffffff)); /* for webkit browsers */
    background: -moz-linear-gradient(left,  #303F38,  #ffffff); /* for firefox 3.6+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#303F38', endColorstr='#ffffff', GradientType=1); /* for IE 5.5-7*/
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#303F38', endColorstr='#ffffff', GradientType=1); /* for IE 8*/
}





/********************************************* Right-hand side navigation boxes *******************************************/

/* Navigation box */

.navBoxDiv {
/* The space that the "navbox" (right-hand side navigational box) sits in */
	float: right;
	margin-left:10px;
	margin-right: 2px; /* Need to create space for the shadow, else firefox scrolls */

}

.section-navbox {
/* The navigational box itself */
   margin-bottom: 5px;
   padding: 0;
   border-width:0;

	border:1px solid black; margin-top: 0;
	width:150px;
	-moz-border-radius-bottomleft: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    border-bottom-left-radius: 10px;

    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
    -khtml-border-top-left-radius: 10px;
    border-top-left-radius: 10px;
   
    /* Drop a little eye candy... */
	-moz-box-shadow: -3px 3px 4px #555;
	-webkit-box-shadow: 3px 3px 4px #555;
	box-shadow: 3px 3px 4px #555;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=#555555)";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#555555')
	
}

/* Distinguish external links in navbox */
.section-navbox a[href^="http"]{
   padding-right: 14px;
   background: transparent url(/assets/images/external-orange.png) no-repeat center right;
}



.navbox-header {
    background: #303F38;
    font-size: 14px;
    color: white;
    margin: 0;
    padding: 0;
	padding-left: 20px;
	padding-bottom: 5px;
	/* border-bottom: 1px solid #36c; */
    background-repeat: no-repeat;
    background-position: left top;	

/* Curved corners, where supported */
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
    -khtml-border-top-left-radius: 10px;
    border-top-left-radius: 10px;

}


.navbox-header img {
/* This kludge will probably come back to bite us. This lets us switch all the image
elements (ie, the rounded top left corner) from being HTML to CSS, without having to edit all the templates and regenerate 
all the pages. So, hiding the HTML elements here, and displaying CSS versions above. */

    display: none;

}

.navbox-body {
	background-color: #E7E7DF;
	color: #000;
	font-size: 0.8em;
	padding: 0 0 0 0;

	
/* Curved corners, where supported */	
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

/* A row of a navbox that doesn't link to anything - display like a subheading */
.navbox-heading-nonlink {
    font-size: 14px;
    color: white;
}

.navbox-link-td {
    border-bottom: 1px dashed #ccc;
	font-weight: bold;
}

.navbox-nonlink-td {
    background: #303F38;
}

.navbox-img-td {
	border-bottom: 1px dashes #ccc;
	width: 0;
}

.navbox-item-table {
	width: 100%;
}

.navbox-item-table a {
	display: inline-block; /* to make the next line work */
	margin-left: 10px;
}

/* Navbox link that points to the page we're currently on, set by javascript. */
.navbox-link-active {
	background: #ccc;
	border-left: 2px solid #888;
    border-right: 2px solid #888
}

/****************************************** Page layout *************************************/
#ands-section-nav, #section-nav-right-gradient, #main-content {
  display: table-cell;
}

/* The table that the main page content (everything except header and footer) sits inside */
/* Actually a div */
#page-layout-table {
  padding: 0; 
  margin: 0;
  min-height: 100%;
  position: relative;
  display: table;
}

#page-layout-table tr {
 /* height: 500px; /* !! */
}

/* Div containing everything except header, sidebar, and footer. (Includes nav boxes) */
#main-content {

  width: 100%;
}

/* redundant, delete when definitely no longer needed */
#page-spacer-cell {
  width: 25px;
  margin: 0 0 0 0;
  border: 0px;
  padding: 0;
  background-color: white;
}

/* Sits inside #main-content, with a bit of spacing */
#main-content-div {
	margin-left: 20px;
	/* Top spacing comes from .h1 */
	

/*  min-height:100%;
  position:relative;
  overflow:auto;*/
}


/**************** Footer ************************/
#page-footer-spacer {
  /*height:5px;*/
}

.footer {
  background-color:#EEEEEE; 
  font-family: Arial, Helvetica, sans-serif; 
  font-size: 12px;
/*  position: absolute;
  bottom: 0;*/
  width: 100%;
  border-top: 1px black solid;
  border-bottom: 1px black solid;
}

.footer-text {
  margin-left:10px;
}


/****************************************** "Highlight" box on front page (actually news) ******************/
/* Whole box */
.section-highlight {
	/*margin-top: 4em; */
	margin-top: 0;
	width:300px;
	

}

/* Top row */
.highlight-header {
    background: #303F38;
    color: #ffffff;
    margin: 0;
    padding: 0;
	padding-left: 0;
	padding-bottom: 5px;
	/* border-bottom: 1px solid #36c; */
}

/* Rest of box */
.highlight-body {
	background-color: #E7E7DF;
	color: #000;
/*	font-size: 0.95em;*/
	font-size: 0.90em;	
	padding: 0.25em 0.5em 0.25em 0.5em;

     -moz-box-shadow: -4px 4px 8px #AA9; /* FF3.5+ */
  -webkit-box-shadow: #AA9 -4px 4px 8px;	
          box-shadow: -4px 4px 8px #AA9; /* Opera 10.5, IE 9 */
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=215, Color=#555555)";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=215, Color='#555555')

}
.highlight-body p {
	margin-top: 0.5em;
}

.highlight-body ul {
  color: #000;
  margin-top: 0.25em;
  margin-left: 1.5em;
}

.highlight-body li {
	margin: 0;
	border: 0;
	padding-top: 0.1em;
}

.highlight-image-div {
/*	border-bottom: 1px dashed #ccc;*/
	float: left;
	margin-right: 5px;
}

.highlight-image-div img {
    /* Not sure where the actual height and width (95px) come from */
/*	width: 80%;
	height: 80%;*/
	

     -moz-border-radius: 4px; /* FF1+ */
  -webkit-border-radius: 4px; /* Saf3-4 */
          border-radius: 4px; /* Opera 10.5, IE 9, Saf5, Chrome */

}

.highlight-text-div {
/*	border-bottom: 1px dashed #ccc;*/
}
.highlight-item-heading {
	color: #DF781C;
}


/************* Just the front page  *****************/
#front-page #main-content-div, #front-page #highlight-box-div {
	display: table-cell;
}

#front-page-transformations-div {
    text-align: center;
}

#front-page-transformations {
/*    text-align: center;*/
    border-spacing: 10px;
    margin-left: auto;
    margin-right: auto;
}

#front-page-transformations .cell1 {
	text-align: right;
}

#front-page-transformations .cell3 {
	text-align: left;
}


#front-page-transformations .cell-item {
/*	border-bottom: orange solid 1.5px;*/
}

#front-page-transformations img {
/*    width: 80%;*/
}

/* Not supported by anything :( */
#front-page-transformations .col1 {
/*	text-align: right;*/
}

#front-page-transformations .col3 {
/*	text-align: left;*/
}


#front-page .centered-text {
	margin-left: auto;
	margin-right: auto;
	max-width: 700px;
	min-width: 500px;
	padding-right: 1em;
	padding-left: 1em;
}

#front-page-funding-blurb {
	margin:10px;
	margin-top: 50px;
}

#front-page h1 {
	font-family: Verdana, Helvetica, Arial, sans-serif; 
	font-size: 2.1em; 
	color:#303F38; 
	font-weight: lighter; 
	margin-top:1em;
	margin-left: 0em;
	margin-right: 0em;
	border: none;
	text-align: center;
	letter-spacing: -1px;
}

.tagline {
	font-style: italic;
	font-weight: bold;
	text-align: center;
	font-size: 120%;
}


#front-page #main-content-div {
/* Equalise the space on the right side due to highlight box. */
	margin-right: 20px;
}

#front-page p {
	margin-bottom: 0.5em;
	padding: 0.5em;
}

#project-partners-table {
	width: 90%;
	border-top: solid gray 2px;
	border-bottom: solid gray 2px;	
/*	padding: 0.5em;*/
	margin-top: 1em;
}

#project-partners-table td {
/*	padding: 0.5em 2em;*/
}



#funding-statement {
	margin: 0.5em 4em;
}
#funding-statement p {
	font-size: 80%;
}

#front-page-rda-link {
	left: auto; 
	right: auto; 
	text-align: center;
	margin-top: 3em;
}
#front-page-rda-link span  {
	border: 1px #303F38 solid;
	padding: 0.5em 2em;
	margin-left: auto;
	margin-right: auto;
	margin-top: 2em;
     -moz-border-radius: 12px; /* FF1+ */
  -webkit-border-radius: 12px; /* Saf3-4 */
          border-radius: 12px; /* Opera 10.5, IE 9, Saf5, Chrome */	
	background: #E7E7DF;
	
     -moz-box-shadow: 2px 2px 4px gray; /* FF3.5+ */
  -webkit-box-shadow: 2px 2px 4px gray; /* Saf3.0+, Chrome */
          box-shadow: 2px 2px 4px gray; /* Opera 10.5, IE 9 */	

}	

.rss-icon {
	border-style: none;
	float: right;
	margin-right: 0.5em;
	margin-top: 4px;
}

/*********** Other page-specific classes/ids ***********/
#events-table {
 /* border: 1px black solid;*/
  border-collapse: collapse;
  border-bottom: 2px #303F38 solid;
  border-left: 8px #FB7 solid;
}

#events-table td {
  border-top: 2px #303F38 solid;
  padding: 0.5em 1em;
}

#publishing-guides-table {
  border: 1px solid black;
  border-spacing: 1px;
  border-collapse: collapse;
  
}

#publishing-guides-table td, #publishing-guides-table th {
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px gray dashed;
  
  padding: 5px;
}


/* Contents table used on CPG page. Big letters in left column; small, spaced links in right column. */
table.contents {
  border: 1px solid black;
  width: 600px;
  border-spacing: 0;
  
     -moz-border-radius: 2px; /* FF1+ */
  -webkit-border-radius: 2px; /* Saf3-4 */
          border-radius: 2px; /* Opera 10.5, IE 9, Saf5, Chrome */  
}
table.contents td {
  padding: 10px;
  font-size: 12px;
  line-height: 200%;  
  letter-spacing:1px;
}

table.contents a {
  letter-spacing:-0.5px;
  /*text-decoration: underline;*/
}
table.contents a:hover {

  text-shadow: -2px 2px 3px #aaa;
}



table.contents td:first-child {
  background-color: #E7E7DF;
/*  background-color: #ACB2AF;*/
  font-size: 15px;
  letter-spacing:0px;
  border-right: 1px solid #333;
}

table.contents tr:first-child td {
  border-top: none;
}

table.contents td {
  border-top: 1px solid #a99;
}



/**********************/

table.definition-table {
    border: 2px ridge gray;
	width: 500px;
	border-collapse: collapse;

	
}
.definition-table td {
	vertical-align: top;
	font-size: 80%;
	border: 1px solid #ccc;
}
.definition-table caption {
	text-align: left;
	font-weight: bold;
}







#gdocs{
	overflow: visible;

}
#tblMain{
	overflow: auto;
}

.guide-level {
    border-style: solid;
    border-width: 1px;
    padding: 10px;
    background: #dddddd;
	margin-top: 10px;
    display: inline-block;
}

.pdf-box {
    float: right;
	padding: 5px;
    background-image: url(/assets/images/pdf-icon.gif);
    background-repeat: no-repeat;
    background-position: left center;

}

.pdf-box a {
/* Make space to left of text for image to occupy. */
	margin-left: 20px;
 
}

/* Scrolling table box used on 'making connections' page */

.scrolling-table-header, .scrolling-table-body {
	border-width: 3px;
	border-style: outset;
/*	border-color: #FF9900;*/
	border-color: gray;
	border-collapse: collapse;
	background-color: white;
/*	margin-right:160px;*/
}

.scrolling-table-header {
    margin-bottom: 0px;
    border-bottom: 1px gray solid;
}

.scrolling-table-body {
    margin-top: 0px;
}

.scrolling-table-div {
	margin-right: 160px;         
}

.scrolling-table-body .subheading-row {
/*   background: #ff9D40; /* light orange */
   background: #303F38;
   border-width: 0px;
   padding: 2px;

}
.scrolling-table-header-div {
    width: 98%;
}
#making-connection-table-body-div {
	overflow: auto;
	height:450px;
    font-size: 12px; 	
    margin-top: 0px;
    border: none;
}

#making-connection-table-body-div h3 {
   font-size: 14px;
   color: white;
   margin-top: 4px;
   margin-bottom: 4px;
}

.scrolling-table-header {
/*    table-layout: fixed;*/
    width: 100%;
    font-size: 12px;
    background: #E7E7DF;
}

.scrolling-table-header th {
    text-align: center;
}

.scrolling-table-body {
/*    table-layout: fixed;*/
    width: 100%;   

}

.scrolling-table-body td {
	border-width: 1px;
	padding: 3px;
	border-style: inset;
	border-color: gray;
	background-color: white;
	-moz-border-radius: 0px 0px 0px 0px;
}

.scrolling-table-body thead {
/*   visibility: hidden;*/ /* an ugly attempt to make thead in a separate table line up with tbody in this table */
   height: 1px;
/*   overflow: hidden;*/
}

.scrolling-table-col1 {
    width: 100px;
}
.scrolling-table-col2 {
    width: 50px;
}
.scrolling-table-col2a {
    width: 30px;
}
.scrolling-table-col3 {
    width: 200px;
}
.scrolling-table-col4 {
    width: 220px;
}
.scrolling-table-col5 {
    width: 100px;
}

#main-content table.thin td h3 {
	text-align: center;
}


/*********************************************************************************/
dl
{
	float: left;
/*	width: 520px;*/
	margin: 0.5em 0 0.5em 1em;
	padding: 0;
	border-bottom: 1px solid #999;
}

dt
{
	clear: left;
	float: left;
	min-width: 180px;
	max-width: 180px;
	margin: 0;
	padding: 5px;
	border-top: 1px solid #999;
	font-weight: bold;
	font-size: 90%;
}

dd
{
	float: left;
	min-width: 350px;
	max-width: 350px;
	margin: 0;
	padding: 5px;
	border-top: 1px solid #999;
	font-size: 80%;
}

/* The "described-links" table mimics the above, and is probably more robust across browsers. IE7 renders the above badly. */
table.described-links, table.described-links tr {
	border-collapse: collapse;
	border-left: none;
	border-right: none;
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
	margin: 0.5em 0 0.5em 1em;
	background: #eec;
	width: 530px;
}

table.described-links td {
	font-size: 80%;
	padding: 0.5em;

}


table.described-links td:first-child {
	font-size: 90%;
	width: 180px;
	font-weight: bold;
	vertical-align: top;
}




.profile-pic {
	float: right;
	margin: 0 1em 1em 2em;
}


/*** CPG title bar ***/
div.cpg-title {
    border-left:1px none gray; 
    border-right:1px none gray; 
    border-top:1px solid gray; 
    border-bottom:1px solid gray; 
    padding:0.5em; 
    width: 600px;
  background-color: #444444;
  
  	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #444444,  #999999); /* for firefox 3.6+ */
}

/* snippets of RIF-CS. We don't have a style for in-line (not block) snippets yet. */
pre, code {
	font-family: monospace;
}

pre, code {
	font-size: 80%;
	padding: 0;
	margin: 0;
	background: #E7F7D7;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	line-height: 20px; /*--Height of each line of code--*/
	overflow: auto; /*--If the Code exceeds the width, a scrolling is available--*/
	overflow-Y: hidden;  /*--Hides vertical scroll created by IE--*/
	margin: 1em 30px 1em 30px;  /*--Left Margin--*/
	display: block;
}

td ul {
	padding-left: 1.5em;
	font-size: 12px;
}

img.img-highlight {
     -moz-box-shadow: 2px 2px 4px gray; /* FF3.5+ */
  -webkit-box-shadow: 2px 2px 4px fray; /* Saf3.0+, Chrome */
          box-shadow: 2px 2px 4px gray; /* Opera 10.5, IE9 */
          

     -moz-border-radius: 5px; 
  -webkit-border-radius: 5px; 
          border-radius: 5px; 
          
}

.hatnote {
    border: 2px ridge gray;
    padding: 1em;
    background: #EEE;
    -moz-box-shadow: 2px 2px 4px gray;
    -webkit-box-shadow: 2px 2px 4px gray;
    box-shadow: 2px 2px 4px gray;
    font-size: 80%;
    font-family: sans-serif;
    margin-right: 170px;
}