html {
    height:100%;
    /*width:100%;*/
}
body {
    background-color:#fff;
    height:100%;
}

/*screen is bigger than width of box1 and box2*/
/*both boxes are fixed with, box2 is centered between box 1
 and edge of screen*/
/*somehow there is a mysterious 25 pixels on left side idk wehre it comes from */
/*min width is 25 + 25 + 400 + 50 + 350 + 25 = 850*/


/*@media screen and (min-width:850px) {*/

/* THE RED MODE */
@media screen and (min-width:1100px) {

    /*body
    {
      background-color:red;
      
    }*/
  
    /* box one is sitting there on the side, static*/
    #box1
    {
        width:400px;
        margin-top:200px;
    }
    
    /*this div is necessary in order to center box 2 within it.
     it is liquid here.*/
    #box2container
    {
        width:auto;
        margin-left:500px;
        margin-right:25px;
        text-align:center;
    }
    
    /*box2 is a static size inside of its container*/
    #box2.cswork
    {
        width:350px;
    }
    
    #box2.cswork p
    {
        text-indent: 30px;
    }
    
    #box2.cswork h1
    {
        font-size:16pt;
        font-weight: bold;

    }
    
    #box2.resume
    {
        width:95%;
    }
    
    /*container B takes over when we are in a three-box layout.*/
    /*here it has a fixed position on the side of the screen*/
    #box2container.layoutB
    {
        position:fixed;
        right:25px;
    }

    /*box 3 is liquid here*/
    /*this just exists so that if box3 becomes short+fat then the page won't scroll up creating a jarring effect*/
    #box3container
    {
        min-width:600px;
        height:100%;
        margin-left:25px;
        margin-right:450px;
        top:50px;
        position:relative;
        clear:both;
        
    }


}

/* THE GREEN MODE */
@media screen and (min-width:850px)  and (max-width:1099px)
{
    /*body
    {
        background-color:green;
    }*/
    
    /*still just static here*/
    #box1
    {
        width:400px;
        margin-top:200px;
    }
    
    /*liquid*/
    #box2container.layoutA
    {
        width:auto;
        margin-right:25px;
        text-align:center;
    }
    
    #box2container.cswork
    {
        margin-left:500px;
        
    }
    
    /*liquid, fits inside its parent*/
    #box2
    {
        width:auto;
    }
    
    #box2container.resume
    {
        width:100%;
        min-width:200px;
        position: relative;
        float:left;
        margin:25px;
    }
    
    /*fixed again*/
    #box2container.layoutB
    {
        width:auto;
        position:fixed;
        left:700px;
        right:25px;
    }

    /*box 3 is static here*/
    /*this just exists so that if box3 becomes short+fat then the page won't scroll up creating a jarring effect*/
    #box3container
    {
        width:600px;
        height:100%;
        margin-left:25px;
        margin-right:125px;
        top:50px;
        position:relative;
        clear:both;
        
    }


}

/* THE BLUE MODE */

/*min-width calculated by 25 + 25 + 400 + 50 + 175 + 25 = 625*/
@media screen and (min-width:675px)  and (max-width:849px)
{
   /* body
    {
      background-color:blue;
      
    }*/

    #box1
    {
        width:400px;
        margin-top:200px;
    }
    
    #box2container
    {
        width:auto;
        margin-right:25px;
        text-align:center;
        
    }
    #box2container.artwork
    {
        margin-left:500px;

    }
    #box2container.cswork
    {
        margin-left:500px;

    }
    #box2container.resume
    {
        width:90%;
        min-width:200px;
        position: relative;
        float:left;
        margin:25px;
    }
 
    /*static again*/
    #box2container.layoutB
    {
        width:100px;
        position:fixed;
        right:25px;
    }    
    
    #box2
    {
        width:auto;
    }
    


    /*box 3 is liquid here*/
    /*this just exists so that if box3 becomes short+fat then the page won't scroll up creating a jarring effect*/
    #box3container
    {
        max-width:600px;
        min-width:0px;
        width:auto;
        height:100%;
        margin-left:25px;
        margin-right:125px;
        top:50px;
        position:relative;
        clear:both;
        
    }
    /*max height is necessary to be set so it won't go larger than the screen.
     *ideally we could just look at screen height but apparently thats impossible.*/
    .box3
    {
        width:inherit;
    }
    

    
}

/* THE YELLOW MODE */
@media screen and (max-width:676px) {
   /* body
    {
        background-color:yellow;
      
    }*/
    
    #box1
    {
        /*width:auto*/
        max-width:400px;
        min-width:200px;

    }
    
    #box2container.layoutA
    {
        width:100%;
        max-width:400px;
        min-width:200px;
        position: relative;
        float:left;
        margin:25px;
    }

    #box2container.layoutB
    {
        width:90%;
        min-width:200px;
        position: relative;
        float:left;
        padding:25px;
    }
       
    #box2 
    {
        width:90%;
    }
    
    #box3container
    {
        width:90%;
        position: relative;
        float:left;
        margin:25px;
    }
    
    #box3
    {
        width:inherit;
    }
    
    #myName
    {
        visibility:hidden;
    }

}
@media screen and (max-width:400px) {

    #box1 #face
    {
        visibility:hidden;
    
    }
}




#box1 {
   /* position: absolute;
    margin-left: 25px;
    margin-top: 200px;
    width:400px;*/
    position: relative;
    float:left;
    margin-left:25px;
    padding:15px;
    border: 3px solid #000000;
    background-color:#eee;
    font-family: Courier, fixed-width;
    font-size: 8pt;
}

#box1 #links {
    float:right;
    width:250px;
    
}


#box1 #face {
    width:auto;
    margin-right:265px;
    text-align:center;
    overflow: hidden;
    
}

#box1 #face img {
    width:90%;
    padding:8px;
    
}


#box1 #contact {
    clear:both; 
}


#box1 ul {
    list-style-type: circle;
    padding: 0px;
    margin: 20px;
    font-size: 18pt;
    font-weight: bold;
    font-family: Helvetica, Arial, sans-serif;
    letter-spacing: 6pt;
    text-transform: uppercase;


}

#box1 ul li {
    padding: 5px;
    margin: 5px;
    border-width: 1px;
    border-style: solid;
    border-color: #222;
}

#box1 ul li:hover {
    border-color: #fff;
    background-color: #fff;
}

#box1 ul li a {
    text-decoration: none;
    color: #888;      
}

#box1 ul li a:hover {
    text-decoration: none;
    color: #333;

}

#box1 #links.no-script {
    display:none;
}

#box2 {
   /* position: absolute;
    margin-left:500px;
    margin-top: 100px;
    width:400px;*/
    padding: 15px;
    border: 3px solid #000000;
    background-color:#eee;
    font-family: Courier, fixed-width;
    font-size: 8pt;
    text-align:left;
    display:none;
    overflow-y:scroll;
    
}

#box2container {
    position:relative;
}
#genericBox {
    padding: 15px;
    border: 3px solid #000000;
    background-color:#eee;
    font-family: Courier, fixed-width;
    font-size: 8pt;
    text-align:left;
}


#box2 #resumeBody {
    background-color:#fff;
    padding:10px;
    overflow:scroll;
    font-family: Helvetica, sans-serif;
    font-size: 8pt;    
    
}

#box3container {
    
    display:none;

}

#box3 {

    padding: 15px;
    border: 3px solid #000000;
    background-color:#eee;
    font-family: Courier, fixed-width;
    font-size: 8pt;
    margin-bottom: 50px;
    max-height:600px;
    /*display:none;*/
    
}

#box3 #viewerSelector {
    /*display: inline-block;*/
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#box3 #viewerImgDiv {
    background-image: url(spinning-wheel.gif);
    background-repeat: no-repeat;
    background-position: center;
    text-align:center;

}

#box3 #viewerImgDiv img
{
    max-height: 525px;
    max-width:100%;
    margin:5px;
}

#box3 #viewerTitle {
    text-align:center;
    font-weight:bold;
    margin: 5px;
}
#box3 #viewerDescription {
    text-align:center;    
    margin: 5px;

}


#box3 #viewerSelector #circledark {
    display: inline-block;
    width:5px;
    height:5px;
    background-image: url(circledark.gif);
    background-size: 100% 100%;
    margin-bottom:5px;
    margin-left:10px;
    margin-right:10px;
   
   /* float:left;*/

}

#box3 #viewerSelector #circlelight {
    display: inline-block;
    width:5px;
    height:5px;
    background-image: url(circlelight.gif);
    background-size: 100% 100%;
    margin-bottom:5px;
    margin-left:10px;
    margin-right:10px;
  /*  float:left;*/
}

#box3 #viewerSelector #leftarrow {
    display: inline-block;
    width:15px;
    height:20px;
    background-image: url(lefttrianglelight.gif);
    background-size: 100% 100%;
    margin-right:30px;
}

#box3 #viewerSelector #leftarrow:hover {
    background-image: url(lefttriangledark.gif);
    
}

#box3 #viewerSelector #rightarrow {
    display: inline-block;
    width:15px;
    height:20px;
    background-image: url(righttrianglelight.gif);
    background-size: 100% 100%;
    margin-left:30px;
    
}


#box3 #viewerSelector #rightarrow:hover {
    background-image: url(righttriangledark.gif);
    
}


.xButton {
    float:right;
    width:15px;
    height:15px;
    background-image: url(xbuttonlight.gif);
    background-size: 100% 100%;    
}

.xButton:hover {
    background-image: url(xbuttondark.gif);
}

#myName {
    width:100%;
    height:100%;
    position: absolute;
    color:#ddd;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 135pt;
    text-transform: uppercase;
    letter-spacing: 20px;
    text-shadow: 10px 10px #777;
    z-index: -3;
    overflow: hidden;
}

#myName #lastName {
    position: absolute;
    padding-left: 500px;
    
}

#websiteName {
    color:#222;
    font-family: "Times New Roman", serif;
    font-weight: bold;
    font-style: italic;
    font-size: 24pt;
    text-transform: lowercase;
    position: fixed;
    bottom: 15px;
    right: 25px;    
}

#websiteAcronym {
    position: fixed;
    bottom: -5px;
    right: 5px;      
    font-family: Courier, fixed-width;
    font-size: 8pt;
    color: #fff;
    height: 30px;
    margin: 10px;

}

#thumbnailHolder {
    display:none;
    width: 100px;
    height: 100px;
    border: 2px solid;
    padding-left:3px;
    padding-top:3px;
    padding-right:3px; 
    padding-bottom:3px;
    position:absolute;
    z-index:3;

}

#websiteAcronym:hover {
    color: #000;
}

#box2::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
#box2::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}