/*Stylesheet originally stored in main.html- allows it to be versioned*/

.portrait {
            height: 256px;
            vertical-align: top;
            width: 192px;
        }

            /*Art*/
            .portrait.Elaine {
                background-image: url("art/Fire_Elemental.png");
            }

            .portrait.Pirate {
                background-image: url("art/Enemy_Pirate.png");
            }

            .portrait.Sailor {
                background-image: url("art/Sailor.png");
            }

            .portrait.DogPirate {
                background-image: url("art/Enemy_Pirate4.png");
            }

            .portrait.DogMage {
                background-image: url("art/Mage.png");
            }

            .portrait.Merchant {
                background-image: url("art/Merchant.png");
            }

            .portrait.Deckhand {
                background-image: url("art/Deckhand.png");
            }

            .portrait.TownMerchant {
                background-image: url("art/Merchant3.png");
            }

        .selected {
            color: orange;
        }

        .effectWrapper {
            height: 26px;
        }

        .icon {
            background: url("art/ui/allButtons.png") no-repeat -1px -1px;
            width: 26px;
            height: 26px;
            display: inline-block;
        }

            .icon.effect {
                text-align: center;
            }

            .icon.stagger {
                background: url("art/ui/allButtons.png") no-repeat -85px -29px;
            }

            .icon.block {
                background: url("art/ui/allButtons.png") no-repeat -57px -29px;
            }

            .icon.skipBlock {
                background: url("art/ui/allButtons.png") no-repeat -1px -29px;
            }

            .icon.KO {
                background: url("art/ui/allButtons.png") no-repeat -113px -1px;
            }
        /*TODO: Use LESS*/
        .outputPlaceholder {
            /*Taller than output, to account for padding, etc*/
            height: 170px;
        }

        .output {
            background-color: black;
            color: white;
            width: 100%;
            height: 150px;
            overflow-y: scroll;
            /*Stick to the bottom*/
            position: fixed;
            bottom: 0px;
        }

        .character {
            border: 1px black solid;
        }

        .statPane {
            border-radius: 10px 10px;
            border: 1px solid black;
        }

        .portcommands {
            position: fixed;
            bottom: 170px;
        }
        /*http://stackoverflow.com/questions/18153234/center-a-div-using-bootstrap-3-markup-or-css*/
        .col-centered {
            float: none;
            margin: 0 auto;
        }

        .title {
            font-size: 2em;
            font-weight: bolder;
            font-style: oblique;
            text-align: center;
        }

            .title .versioninfo {
                font-weight: normal;
                font-style: italic;
                font-size: 0.4em;
            }