/* ********************************************************************************************
Header for main pages
*/
.mainHeader
{
    width: 100%;
    background-color:#222222;
    position: relative;
    background-image: url('imgs/shahab.png');
    background-repeat: no-repeat;
    background-position: left center;
    font-family:Helvetica;
}

.mainHeader table
{
    width: 100%;
    height: 200px;
    background: linear-gradient(to left, #222222, 90%, transparent);
    color: #DD00AA;
}

.mainHeader table td
{
    text-align: left;
    padding-left: 20%;
    padding-right: 10px;
}

.mainHeader table tr:first-child td
{
    vertical-align: bottom;
    font-size: 36pt;
    font-weight: bold;
}

.mainHeader table tr:nth-child(2) td
{
    vertical-align: top;
    font-size: 18pt;
    font-weight: 900;
}

.mainHeader table tr:last-child td
{
    vertical-align: bottom;
}

.mainHeader hr
{
    border: 3px solid #770044;
    margin-top: 0pt;
    margin-bottom: 0pt;
}

/* ********************************************************************************************
Header for details pages
*/
.header
{
    width: 100%;
    background-color:#222222;
    background: linear-gradient(to right, #222222, 90%, transparent);
    position: relative;
    font-family:Helvetica;
}

.header table
{
    width: 100%;
    height: 200px;
    background-size: 180px 180px;
    background-repeat: no-repeat;
    background-position: right center;
    color: #DD00AA;
}

.header table tr:first-child td
{
    text-align: left;
    vertical-align: bottom;
    font-size: 36pt;
    font-weight: bold;
    padding-left: 5%;
    padding-right: 180px;
}

.header table tr:nth-child(2) td
{
    text-align: left;
    vertical-align: top;
    font-size: 18pt;
    font-weight: 900;
    padding-left: 5%;
    padding-right: 180px;
}

.header table tr:last-child td
{
    text-align: left;
    vertical-align: bottom;
    padding-left: 5%;
    padding-right: 180px;
}

.header a {
    text-decoration: none;
}

.header hr
{
    border: 3px solid #770044;
    margin-top: 0pt;
    margin-bottom: 0pt;
}

.header .MobileMenu, .mainHeader .MobileMenu {
    position: absolute;
    display: none;
    left: 0px;
    top: 160px;
    z-index: 99;
    border: none;
    background-color: #161616;
    color: #770044;
    border-radius: 4px;
    padding: 10px;
    font-size: 16pt;
}

.header .on, .mainHeader .on {
    display: block;
}

.header .MobileMenu button, .mainHeader .MobileMenu button {
  background-color: transparent;
  border: none;
  color: #990066;
  font-size: 16px;
  cursor: pointer;
}

.header .MobileMenu button:hover, .mainHeader .MobileMenu button:hover {
    color: #DD00AA;
}

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

.menu {
    background-color:#222222;
    background: linear-gradient(to right, #222222, 90%, transparent);
    width: 100%;
    text-align: center;
    font-size: 16pt;
/*    margin: auto;*/
}

.menu button {
  background-color: transparent;
  border: none;
  color: #990066;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.menu button:hover {
    color: #DD00AA;
}
/* ********************************************************************************************
Message Page
*/
.messageMe {
    width: 90%;
    position: relative;
    margin-top: 30pt;
    font-family: Helvetica;
    font-size: 12pt;
    padding-left: 5%;
    padding-right: 5%;
    color: #DD00AA;
}

.messageMe table {
    width: 100%;
}

.messageMe input {
    background-color:#222222;
    width: 50%;
    border-color: #770044;
    border-width: 1pt;
    font-size: 12pt;
    border-style: solid;
    color: white;
}

.messageMe textarea {
    background-color:#222222;
    width: 100%;
    border-color: #770044;
    border-style: solid;
    font-size: 12pt;
    border-width: 1pt;
    color: white;
    resize: vertical;
}

.messageMe input:focus, textarea:focus {
    border-color: #DD00AA;
}

.messageMe label {
    padding-top: 0pt;
}

.messageMe td:first-child {
    vertical-align: top;
    padding-top: 1pt;
}

.messageMe tr:last-child {
    text-align:right;
}

.messageMe button {
  background-color: transparent;
  border-color: #DD00AA;
  color: #DD00AA;
  font-size: 12pt;
  font-weight: 500;
  cursor: pointer;
  margin-right: 0;
}

.messageMe #idSend {
  border-width: 1pt;
  border-style: solid;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
}

.messageMe #idSend:hover {
    font-weight: bold;
}

/* ********************************************************************************************
Page Contents for details pages
*/
.pageContents
{
    width: 90%;
    padding-left: 5%;
    color: white;
    font-size: 18pt;
    font-family: Helvetica;
}

.pageContents p, td
{
    font-size: 15pt;
    margin-top: 0pt;
}

.pageContents hr
{
    border: 2px solid #770044;
    margin-top: 0pt;
}

.pageContents h2
{
    font-size: 25pt;
    color: #DD00AA;
    margin-top: 50pt;
    margin-bottom: 0pt;

}

.pageContents ul
{
    font-size: 12pt;
    list-style: none;
}

.pageContents li::before {
    content: "\25A0";
    color: #DD00AA;
    font-weight: bold;
    display: inline-block;
    width: 15pt;
    margin-left: -15pt;
}

.pageContents a:link
{
    color: #DD00AA;
    text-decoration: none;
}

.pageContents .readMore
{
    color: #DD00AA;
    font-size: 10pt;
    text-decoration: none;
}

.pageContents a:visited
{
    color: #DD00AA;
}
.pageContents a:hover
{
    color: #990066;
}

#idBackToTop {
  display: none;
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #770044;
  color: white;
  cursor: pointer;
  padding: 5px;
  border-radius: 4px;
}

#idBackToTop:hover {
  background-color: #DD00AA;
}

/* ******************************************************************************************** */
/* This is for an image at right and text wraping around it on left. In mobile case, the image
 moves below the text.
 In HTML we have: <div class="TextImage"> <img1><p><img2> </div>
 img1 can specify width. <img2> is the same image as <img1> without width.
*/
.TextImage img:first-child {
    padding-left: 10px;
    float: right
}

.TextImage img:last-child {
    width: 100%;
    padding: 0;
    display: none;
}

/* ******************************************************************************************** */
.footer
{
    width: 90%;
    padding-left: 5%;
    font-family:Helvetica;
    font-size: 12pt;
    margin-top: 20pt;
}

.footer p
{
    text-align: center;
    color: #990066;
}

.footer hr
{
    border: 3px solid #770044;
    margin-top: 0pt;
}

body {
    background-color: #222222;
    background-image: linear-gradient(to right, #222222 , 90%, #444444);
}

@media only screen and (max-width: 768px) {
    #idMenu {
        display: none;
    }
 
    .mainHeader table
    {
        height: 160px;
    }
    
    .mainHeader table tr:first-child td {
         font-size: 24pt;
         padding-top: 30px;
         padding-left: 0px;
         padding-right: 0px;
    }

    .mainHeader table tr:nth-child(2) td
    {
         font-size: 12pt;
         padding-left: 0px;
         padding-right: 0px;
    }
     
    .mainHeader table tr:last-child td
    {
         padding-left: 0px;
         padding-right: 0px;
    }
 
    .header table
    {
        height: 160px;
        background-size: 100px 100px;
    }
    
    .header table tr:first-child td {
        font-size: 24pt;
        padding-left: 0px;
        padding-right: 100px;
    }

    .header table tr:nth-child(2) td
    {
        font-size: 12pt;
        padding-left: 0px;
        padding-right: 100px;
    }
    
    .header table tr:last-child td
    {
        padding-left: 0px;
        padding-right: 0px;
    }
    
    .messageMe
    {
        width: 95%;
        padding: 0;
    }

    .messageMe input, textarea {
        width: 100%;
    }
    
    .messageMe td:first-child {
        padding-top: 4pt;
    }

    .pageContents
    {
        width: 100%;
        padding: 0;
    }
    
    .pageContents p, td
    {
        font-size: 12pt;
    }
    
    .pageContents h2
    {
        font-size: 20pt;
    }

    .pageContents ul
    {
        font-size: 10pt;
    }

    .pageContents li::before {
        font-size: 8pt;
        content: "\25A0";
        color: #DD00AA;
        font-weight: bold;
        display: inline-block;
        width: 10pt;
        margin-left: -10pt;
    }

    .pageContents .readMore
    {
        font-size: 8pt;
    }

    .TextImage img:first-child {
        display: none;
    }

    .TextImage img:last-child {
        display: block;
    }
    
    .footer
    {
        width: 100%;
        padding: 0;
        font-size: 10pt;
    }
}

@media only screen and (min-width: 768px) {
    #idToggleMenu, .header .on , mainHeader .on {
        display: none;
    }
}