/*Initial Creation: 9-24-2013*/
/*9-24-2013: Combined seperate CSS files required by CIT 180 into otherpages.css*/

*
{
    margin: 0;
    padding: 0;
}

article, aside, figure, footer, header, nav, section
{
    display: block;
}

figcaption
{
    margin-left: 15px;
}

html
{
    background-image: url("../images/background.jpg");
}
/*Styles for the header*/
header
{
    height: 202px;
}

    header img
    {
        display: none;
        /*padding-left: 1em;*/
    }

    header h1
    {
        text-indent: 10px;
    }

    header h2
    {
        text-indent: 10px;
    }

    #orangeline {display: none;}

.logo
{
    border-width: 0;
}
/*Styles for the elements*/
body
{
    border: 2px solid black;
    font-family: Arial, Helvetica, sans-serif;
    width: 766px;
    background-color: white;
    box-shadow: 5px 5px 15px 5px;
    margin: 25px auto;
    background-image: url("../images/bodybackground.jpg");
}

#izikar
{
    border: 2px solid black;
    font-family: Arial, Helvetica, sans-serif;
    width: 766px;
    background-color: white;
    box-shadow: 5px 5px 15px 5px;
    margin: 25px auto;
    background-image: url("../images/contentbackground.jpg");
}

video {width: 480px; height: 270px;}
/*End Nav bar*/
#nav_bar li
{
    display: none;
}

p
{
    font-size: 80%;
}

h1
{
    font-size: 100%;
    padding-left: 2em;
}

h2
{
    font-size: 100%;
}

h3
{
    font-size: 90%;
    padding-bottom: .1em;
}
/*Left Book Page style*/
section
{
    float: left;
    width: 58.74%;
    height: 325px;
    margin-left: 50px;
    margin-top: 50px;
    margin-bottom: 65px;
}

#booktabs
{
    float: left;
    width: 58.74%;
    height: 325px;
    margin-left: 60px;
    margin-top: 20px;
    margin-bottom: 65px;
}

#videos
{
    float: left;
    width: 58.74%;
    height: 325px;
    margin-left: 50px;
    margin-top: 10px;
    margin-bottom: 65px;
}

#seperated
{
    float: left;
    width: 26.11%;
    height: 325px;
    margin-left: 75px;
    margin-top: 50px;
    margin-bottom: 65px;
}

#form
{
    float: left;
    width: 58.74%;
    height: 325px;
    margin-left: 75px;
    margin-top: 50px;
    margin-bottom: 65px;
}
/*Right Book Page style*/
aside
{
    float: left;
    width: 26.11%;
    height: 325px;
    margin-top: 50px;
    margin-bottom: 65px;
    padding-left: 30px;
}
/*Styles for Images*/
#imageleft
{
    float: left;
    padding-right: 1em;
    border-width: 0px;
    width: 20px;
    height: 20px;
    -moz-transition: all 0.7s;
    -o-transition: all 0.7s;
    -webkit-transition: all 0.7s;
    transition: all 0.7s;
}

    #imageleft:hover
    {
        transform: rotateX(360deg);
    }

#bookimage
{
    width: 75px;
}

/*Styles for links*/
a
{
    font-weight: bold;
    color: green;
}

    a:link
    {
        font-weight: bold;
        color: olive;
    }

    a:hover, a:focus
    {
        color: orange;
        font-weight: bold;
    }
/*Styles for lists */
ul
{
    line-height: 1.5;
    padding-left: 1em;
}
/*Styles for footer*/
footer p
{
    font-size: 80%;
    text-align: center;
    padding: 10px;
}

footer
{
    border-top: 2px solid black;
    padding-left: 2em;
    background-image: -moz-linear-gradient(45deg, black 5%, olive 25%, white 100%);
    background-color: olive;
    margin-top: 10px;
    clear: both;
}
/*Styles for form*/
label
{
    color: black;
    float: left;
    width: 8em;
    font-weight: bold;
    text-align: left;
    padding-left: 80px;
}

input
{
    width: 15em;
    margin: 0 0 .5em 1em;
}

textarea
{
    width: 15em;
    margin: 0 0 .5em 1em;
}

#button, #reset
{
    width: 7em;
    background-color: silver;
    box-shadow: 2px 2px 0 blue;
}

#button
{
    margin-left: 8em;
}
/* the styles for the tabs */
#tab_list
{
    margin: 0;
    padding: 5px 6px;
    border-bottom: 2px solid black;
    clear: both;
}

    #tab_list li
    {
        list-style: none;
        display: inline;
    }

        #tab_list li a
        {
            padding: 5px 2em;
            text-decoration: none;
            font-weight: bold;
            color: black;
            background: olive;
            border: 3px solid black;
            border-radius: 15px 15px 0 0;
        }

            #tab_list li a:hover
            {
                background: silver;
            }

            #tab_list li a.active
            {
                background-color: #993300;
                border-bottom: 3px solid #993300;
            }

#tab_contents div
{
    padding: 5px 10px 10px;
    border: 3px solid black;
    border-top: 0;
    height: 250px;
    overflow: auto;
}

.hide
{
    display: none;
}
/* the styles for the carousel */
#carousel
{
    margin: 10px 0 0 0;
    padding: 0;
    width: 475px;
    height: 125px;
}

.button
{
    margin: 45px 10px 0 10px;
    float: left;
    height: 25px;
    width: 25px;
}

.panel
{
    margin: 0;
    overflow: hidden;
    position: relative;
    float: left;
    width: 375px;
    height: 125px;
}

.panel-inner
{
    left: 0;
    position: absolute;
    height: 125px;
    list-style: none;
    margin: 0;
    padding: 0;
}

    .panel-inner li
    {
        text-align: center;
        padding: 0;
        margin: 1px 1px 0 0;
        float: left;
        width: 125px;
        height: 125px;
        background: #FFF;
    }

        .panel-inner li img
        {
            width: 125px;
            height: 125px;
            margin: 1px 0 0 1px;
        }

.fadein
{
    position: relative;
    width: 200px;
    height: 250px;
}

    .fadein img
    {
        position: absolute;
        width: 200px;
    }

/*Responsive Design*/
@media screen and (max-width: 768px)
{
    /*Nav bar*/
    #nav_bar ul
    {
        list-style: none;
        padding-left: 2.5em;
        padding-top: 9.6em;
    }

    #nav_bar li
    {
        display: inline;
        padding: 0 1em;
    }

    #nav_bar a
    {
        font-weight: bold;
        font-size: .88em;
        color: tan;
        -moz-transition: all 0.5s;
        -o-transition: all 0.5s;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
        -webkit-text-shadow: 0px 1px black;
        text-shadow: 0px 1px black;
    }

        #nav_bar a.current
        {
            color: white;
            text-decoration: none;
            -webkit-text-shadow: 0px 1px black;
            text-shadow: 0px 1px black;
        }

        #nav_bar a:hover
        {
            color: orange;
            font-weight: bold;
            -webkit-text-shadow: 0px 2px black;
            text-shadow: 0px 2px black;
            -moz-transform: translateY(-5px);
            -ms-transform: translateY(-5px);
            -o-transform: translateY(-5px);
            -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
        }
    /*End Nav bar*/
    #seperated
    {
        display: none;
    }

    #flash
    {
        display: none;
    }

    aside
    {
        margin-left: 40px;
        width: 40%;

    }
    /*Changed width from 525px to 70%*/
    body
    {
        width: 70%;
        background-image: url("../images/Jarod_half.jpg");
    }

    #izikar
    {
        width: 70%;
        background-image: url("../images/Izikar_half.jpg");
    }

    #booktabs
    {
        float: left;
        width: 235px;
        height: 400px;
        margin-left: 54px;
    }

    #tab_contents div
    {
        padding: 5px 10px 10px;
        border: 3px solid black;
        border-top: 0;
        height: 300px;
        overflow: auto;
    }

    #form
    {
        float: left;
        width: 235px;
        height: 400px;
        margin-left: 54px;
    }

    #form h2
    {font-size: 90%;
     padding-left: 15px;
    }

    #form label {
    padding-left: 15px;
    width: 8em;
    font-size: 80%;
    }

    #button, #reset {
    margin-left: 15px;
    width: 6.5em;
    }

    #tab_list li a
    {
        padding: 5px .75em;
    }
    video{width: 220px;}
}

/* the styles for the carousel */
#carousel
{
    margin: 10px 0 0 0;
    padding: 0;
    width: 225px;
    height: 125px;
}

.button
{
    margin: 45px 10px 0 10px;
    float: left;
    height: 25px;
    width: 25px;
}

.panel
{
    margin: 0;
    overflow: hidden;
    position: relative;
    float: left;
    width: 125px;
    height: 125px;
}

.panel-inner
{
    left: 0;
    position: absolute;
    height: 125px;
    list-style: none;
    margin: 0;
    padding: 0;
}

    .panel-inner li
    {
        text-align: center;
        padding: 0;
        margin: 1px 1px 0 0;
        float: left;
        width: 125px;
        height: 125px;
        background: #FFF;
    }

        .panel-inner li img
        {
            width: 125px;
            height: 125px;
            margin: 1px 0 0 1px;
        }
/*Max-Width changed from 550*/
@media screen and (max-width: 470px)
{
    header
    {
        height: 70%;
        /*background-image: url("../images/background_eighth.jpg");
        background-size: 100%;
        background-repeat: no-repeat;*/
    }

    header img
    {
        display: inline;
        width: 100%;
    }

    #orangeline 
    {
     display: inline; 
     width: 100%;
     /*padding-left: 5%;*/
    }

    body
    {
        background-image: url("../images/background2.jpg");
        width: 70%;
        /*background-size: 100% 96%;*/
        /*background-size: 100%;
        background-repeat: no-repeat;*/
    }

    #izikar
    {
        /*background-image: url("../images/background_eighth.jpg");*/
        background-image: url("../images/background2.jpg");
        width: 70%;
        /*width: 320px;*/
        /*background-size: 100%;*/
    }

    aside
    {
        padding-top: 5%;
        margin-top: 5%;
        margin-bottom: 10%;
        margin-left: 5%;
        height: 100%;
        border: 2px solid black;
        width: 75%;
        padding-bottom: 5%;
    }

    #form
    {
        margin-top: 10%;
        margin-bottom: 10%;
        margin-left: 10%;
        height: 100%;
        width: 100%;
    }

    #form h2
    {font-size: 70%;
     padding-left: 0px;
    }

    #form label {
    padding-left: 0px;
    width: 8em;
    font-size: 70%;
    }

    #button, #reset {
    margin-left: 0px;
    width: 30%;
    }
    
    input, textarea {
    margin-left: 0px;
    width: 80%;
    }

    #videos
    {
        margin-top: 10%;
        margin-bottom: 10%;
        margin-left: 10%;
        height: 100%;
        width: 80%;
    }

    #videos figcaption{font-size: 80%;}

    video{width: 100%; height: auto;}

    h2{font-size: 80%;}

    #screenshots
    {
        margin-top: 10%;
        margin-bottom: 10%;
        margin-left: 10%;
        height: 100%;
        width: 80%;
    }

    #screenshots h1 {font-size: 80%;}

    #carousel {
    height: auto;
    margin-left: 0px;
    padding: 0;
    width: 100%;
}

    #booktabs
    {
        float: left;
        width: 90%;
        height: 100%;
        margin-left: 5%;
    }

    #tab_contents div
    {
        padding: 5px 10px 10px;
        border: 3px solid black;
        border-top: 0;
        height: 300px;
        overflow: auto;
    }
    #tab_contents img{width: 25%; height: 25%; min-width: 30px;}

    #tab_list li a
    {
        padding: 5px 1em;
        font-size: 80%;
    }

        /*Nav bar*/
    #nav_bar ul
    {
        list-style: none;
        padding-left: 10%;
        /*padding-top: 9.0em;*/
        padding-top: 0px;
        /*background-color: #2e2e22;*/
        background-image: url("../images/buttonbackground.jpg");
    }

    #nav_bar a
    {
        font-weight: bold;
        font-size: .80em;
        color: tan;
        -moz-transition: all 0.5s;
        -o-transition: all 0.5s;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
        -webkit-text-shadow: 0px 1px black;
        text-shadow: 0px 1px black;
    }
    p {
        font-size: 75%;
    }

    .displayed{width: 60%; height: 60%; min-width: 30px;}

    aside ul {font-size: 75%; padding-bottom: 10%;}
}
/*Body Width changed from 250px*/
@media screen and (max-width: 320px)
{
    /*body
    {
        width: 70%;
        background-image: url("../images/background_eighth.jpg");
    }
    #izikar
    {
        width: 70%;
        background-image: url("../images/background_eighth.jpg");
    }*/
/*   aside {
        margin-top: 0px;
        margin-bottom: 0px;
        height: 150px;
    }*/ 
    #nav_bar a
    {
        font-size: .8em;
    }

    p {
        font-size: 70%;
    }

    footer p 
    {
    font-size: 50%;
    text-align: center;
    }

    #videos figcaption{font-size: 70%;}
}