/* 
    Document   : mp-alt.css
    Created on : Oct 12, 2013, 6:56:39 PM
    Author     : frank
    Description:
        Purpose of the stylesheet follows.
*/

/* ************ MEDIA PRINT SECTION ************ */
@media print {
    body { 
	background: white; 
	font-size: 12pt; 
    }

    
    
    .title {
        font-size:large;
    }
    .navbar, 
    #menu { 
	display: none; 
    }

   
	
    #wrapper, 
    #content { 
            width: auto; 
            margin: 0 5%; 
            padding: 0; 
            border: 0; 
            float: none !important; 
            color: black; 
            background: transparent none; 
    }

    div#content { 
            margin-left: 10%; 
            padding-top: 1em; 
            border-top: 1px solid #930; 
    }

    div#mast { 
            margin-bottom: -8px; 
    }

    div#mast img { 
            vertical-align: bottom; 
    }

    a:link, 
    a:visited { 
             color: #520;
            
            background: transparent; 
            font-weight: bold; 
            text-decoration: underline; 
    }

    #content a:link:after, 
    #content a:visited:after { 
            content: " (" attr(href) ") "; 
            font-size: 90%; 
    }

    #content a[href^="/"]:after { 
            content: " (http://www.madpharoah.com" attr(href) ") "; 
    }
}


@media screen {
    

    body {
        background-color: #000000;
        color: lightgrey;
        font-family: 'Noto Sans', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';

    }
    
    

    a {
        color: lightgray;
        text-decoration: none;
        margin-top: 5px;
    }

    a:hover {
        color: whitesmoke;
        text-decoration: none;
    }

    a:active {
        text-decoration: none;
        color: white;
    }

    p {
        font-family: 'Noto Sans', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
    }

    object {
        width:100%;
    }

   

    #category {
        float: left;
        font-size: larger;
    }

    .mp-footer {
        background: linear-gradient(to left, #000000 0%, rgb(58,58,58) 100%);
        width:100%;
        float:right;
        text-align: right;
        color:darkgray;
    }

    .navbar {
        background: #000000;
        color: lightgray; 
        line-height: 30px;
        font-family: 'Noto Sans', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';      
        width: 100%;
        overflow:hidden;   
    }

    .navbar .navbar-title {
        position:relative;
        margin:0px;
        top: 0px;
        margin-bottom: 0px;
    }

    .navbar-title {

        padding-left: 0px; 
        width: auto; 
        position: relative;
        float: left;
        background-size:auto auto;
        text-shadow: #666677 3px 3px 3px;

    }

    .navbar-topic {
        background: linear-gradient(to left, #000000 0%, rgb(58,58,58) 100%);
        position: relative;
        float: left;
        text-align: left;
        top:0px;
        width: auto;
    }
    .navbar-menu {
        background: linear-gradient(to right, #000000 0%, rgb(58,58,58) 100%);
        position: relative;
        float: right;
        text-align: right;
        top:0px;
        width: auto;
    }

    .navbar-section {
        background-color: rgb(58,58,58);
        position: relative;
        float: right;
        margin-right: 0px;
        left: 0px;
        top:10px;
        width: auto;

    }
    
    .navbar-subtopic {
        float:left;
        color:lightblue;
   
        
    }

    .navbar-title h1 {
        position: absolute;
        margin-top:0;
        top: 10px;
        width: 400px;

        font-size: xx-large;
    }

    .navbar-topic li,
    .navbar-menu li,
    .navbar-title li,
    .navbar-mid-section li {
        list-style-type:none;
        display: inline;
    }

    .navbar-topic ul,
    .navbar-menu ul, 
    .navbar-title ul,
    .navbar-section ul {
        margin:0;
        padding:0;
        list-style:none;
    }

    .navbar-title img {
        width: 80px;
        height: auto;
    }

    .navbar-topic li {
        list-style-type:none;
       
        margin:0;
        padding:0;
        padding-left: 20px;
        padding-right: 10px;
        position: relative; 
        float: left;
        display: inline;

    }
    
    .navbar-topic li ul
     {
        position:fixed;
        display:block;
        float:none;
        line-height: 10px;
        padding-top: 0px;
    }
    
   

    .navbar-menu li,
    .navbar-section li {
        list-style-type:none;
        margin:0;
        padding:0;
        padding-left: 20px;
        padding-right: 10px;
        position: relative; 
        float: right;
        display: inline;
    }



    .category li {
        float: left;
    }

    
    .gallery-intro {
        width: 50%;
        padding-left: 25%;
        padding-right:25%;
        display: block;
        float:none;
        text-align: justify;

    }
    
    .spaced {
        margin-top: 0px;
        margin-right: 2px;
        margin-bottom: 0px;
        margin-left: 2px;    
        text-align: center;
    }



     .photo {
        width: 330px; 
        height: 223px;
        border-style: solid;
        border-color: #333333;
        border-width: 3px;
        position: relative;
        float: left;
        border-radius: 15px;
        text-align: center;
    }
    
    
    .slidesurface {
        margin-top: 0px;
        margin-right: 2px;
        margin-bottom: 0px;
        margin-left: 2px;    
        display:inline;
        vertical-align: middle;
    }
     
    
    .slidesurface h1,h2,h3 {
        
        color: lightblue;
        display:inline;
        vertical-align: middle;
        
    }
    
     .slidesurface h1 {
        font-size: 72px;
    }
    
    .slidesurface h2 {
        font-size: 64px;
    }
    
    .slidesurface h3 {
        font-size: 56px;
    }
    
    .slidecontrol {
        display:inline-table;
        padding-top:10px;
        padding-bottom:10px;
        padding-left: 10px;
        padding-right: 10px;
        border:none;
        height: 72px;
        width: 20px;
        cursor: pointer;
        
    }

      .bigphoto {
        width: 800px; 
        vertical-align:middle;
        border-style: solid;
        border-color: #333333;
        border-width: 3px;
        position: relative;
        float: none;
        border-radius: 15px;
        text-align: center;
        opacity: 1;
         -webkit-transition: opacity 2s ease-in-out;
        -moz-transition: opacity 2s ease-in-out;
        -o-transition: opacity 2s ease-in-out;
        transition: opacity 2s ease-in-out; 
 
    }
    
  
    .fade-in {
        opacity: 1;
    }

    .coverphoto {
        position:relative;
        float: left;
        width: 330px; 
        margin: 15px 15px 15px 15px;
    }
    
    /* The text above the cover photos */
    .covertext {
        height: 90px;
        display: inline-block;
        
    }

    .coverphototext {
        position:relative;
        float: left;
        width: 40%;
        height: 260px;
        min-width: 200px;
        margin: 15px 15px 15px 15px;
        text-align: left;
    }

    .coverphototext a,
    .coverphoto a, 
    .navbar-menu a,
    .navbar-title a,
    .navbar-section a {
        text-decoration: none;
        color: whitesmoke;     
    }
    
    .coverphototext a:hover,
    .coverphoto a:hover,
    .navbar-menu a:hover,
    .navbar-title a:hover,
    .navbar-section a:hover {
        color: white; 
        text-decoration: none;
    }

    .navbar-notmypage a {
        color: rgb(173,173,173);     
    }
    
    .navbar-mypage a {
        color: lightblue;
    }  
    
    .navbar-mypage img {
       border-bottom-color:lightblue;
       border-bottom-style:solid; 
    }

    /* Adapted from tenmilesquare.com */
    #socialMedia {
        position:absolute;
        top:45px;
        height: 20px;
        right:20px;
    }

    #socialMedia P {
        margin:0;
        padding:0;
    }

    #socialMedia IMG {
        padding-left:1.0em;
    }
    #socialMedia P > * {
        padding-left:18px;
    }
    
    #socialMedia IMG {
        height:20px;
        width:20px;
    }	


    #home IMG {
        height:20px;
        width:20px;
        padding-top:5px;
    }



    /* Added for Unit 5 - Tables */
    .centralContent {
        width:100%;
        text-align:center;
    }

    table, tr, td {
        border: 0px solid green;
        border-collapse: collapse;
        color: whitesmoke;
    }

    table {

        margin: 0 auto; /* or margin: 0 auto 0 auto */

    }

    thead {
        background: linear-gradient(to bottom, #000000 0%, darkgray 25%, rgb(58,58,58) 100%);
    }

    tbody tr:nth-child(odd) {
       background-color: #ccc;
    }

    tbody tr:nth-child(even) {
       background-color: #aaa;
    }


    td
    {
        padding:15px;

    }



    .buy {
        background-color:green;
        color:white;
        width:60px;
        height:30px;
        border-style:none;
    }

    .thumb {
        width:80px;

    }

    .imageCol {
        width:120px;
        text-align:center;

    }

    .descCol {
        width:300px;
        text-align:right;
    }

    .dimCol {
        width:100px;

    }

    .qtyCol {
        width:40px;
        text-align:right;
    }

    .priceCol {
        width:40px;
        text-align:right;
    }
    /* Styling for the purchase review table */
    .purchaseReview {
        color:white;

    }

    /* hl = highlighted */
    .hl,
    .hl a {
        color: lightblue;

    }
    
    .contact {
        float:left;
        margin-top: 0px;
        margin-right: 2px;
        margin-bottom: 0px;
        margin-left: 15px;    
        width: 95%;
        text-align: center;
        
        
    }
    
    .subgallery-title {
        color:lightblue;
    }
    
    
 
}