body { 
	font-size: 12px; 
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; 
	background-image: url("TextureBackground.jpg");
	margin: 8px;
}
input {
	font-size: 12px; 
}

.centered {
	text-align: center;
    margin-left:auto;
    margin-right:auto;
}

.larger {
	font-size: large;
}

ul#tabs { 
	list-style-type: none; 
	margin: 3em 0 0 0; 
	padding: 0 0 0.3em 0; 
}

ul#tabs li { 
	display: inline; 
}

ul#tabs li a { 
	color: #42454a; 
	background-color: #BAA699; 
	border: 1px solid #c9c3ba; 
	border-bottom: none; 
	padding: 0.3em; 
	text-decoration: none; 
	border-top-left-radius: 9px;
	border-top-right-radius: 9px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 0px; 
}
ul#tabs li a:hover { 
	background-color: #FCF9F3; 
}

ul#tabs li a.selected { 
	color: #000; 
	background: #FCF9F3;
	/*background-color: #FCF9F3; */
	font-weight: bold; 
	padding: 0.7em 0.3em 0.38em 0.3em; 
	border-top-left-radius: 9px;
	border-top-right-radius: 9px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 0px;
}

div.tabContent { 
	border: 1px solid #c9c3ba; 
	height: 100%;
	min-width: 905px;
}

div.contentoftab {
	border-top: medium none; 
	background-color: #FCF9F3; 
	padding: 0px 5px 5px 5px;
	float:left;
	min-width:805px;
	max-width: 900px;
}

div.tabContent.hide { 
	display: none; 
}

table, th, td {
	border: 1px solid gray;
	border-collapse: collapse;
	padding-top: 0px;
	padding-right: 3px;
	padding-bottom: 0px;
	padding-left: 3px;
}
.none {
	border: none;
	border-collapse: collapse;
}

#wrap {
   width:1130px;
   margin:0 auto;
}
#left_col {
   float:left;
   width:900px;
}
#rollsPane {
   /*float:right;*/
   width:280px;
}
#initPane {
   /*float:right;*/
   width:230px;
}
#teamRolesane {
   /*float:right;*/
   width:230px;
}
#main_log {
	float:left;
	width: 500;
}
#chat_log {
	float:right;
	width: 400;
}
.pillEffectStyleRed {
	color: #FFFFFF;
	line-height: 180%;
	border: 1px solid #3B0807;
	background-color: #FCC;
	text-align: center;
	padding-top: 1px;
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 1px;
	margin-top: 10px;
	margin-bottom: 4px;
	border-radius: 40px;
	background-image: linear-gradient(to bottom, #FF5C57 0%, #3B0807 100%);
}
.pillEffectStyleGreen {
	color: #FFFFFF;
	line-height: 180%;
	border: 1px solid #083B07;
	background-color: #CFC;
	text-align: center;
	padding-top: 1px;
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 1px;
	margin-top: 10px;
	margin-bottom: 4px;
	border-radius: 40px;
	background-image: linear-gradient(to bottom, #5CFF57 0%, #083B07 100%);
}
.pillEffectStyle {
	color: #FFFFFF;			
	line-height: 180%;
	padding-top: 1px;
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 1px;
	margin-top: 5px;
	margin-bottom: 5px;
	border-radius: 20px;
}

.dicediv {
	transition: height 0.9s;
	-webkit-transition: height 0.6s; /* For Safari 3.1 to 6.0 */
	overflow: hidden;			
	top: 0; 
	min-width: 230px; 
	width: 280px;
	background-color: rgb(176, 255, 34); 
	border: 1px solid gray; 
	border-style: outset; 
	/*padding-left: 10px; */
	padding-top: 0px; 
	padding-bottom: 3px;
	position:absolute;
	z-index:9999;
	box-shadow: 6px 6px 5px #000000;
	border-radius:6px;
	border:1px solid #4f4f4f;
}
.dicedivsmall {
	height: 24px;
}
.dicedivtall {
	height: 515px;
}

.spellpaneldiv {
	transition: height 0.4s;
	-webkit-transition: height 0.4s; /* For Safari 3.1 to 6.0 */
	overflow: hidden;			
}
.spellpaneldivsmall {
	height: 24px;
}
.spellpaneldivtall {
	height: 125px;
}

.asText {
	background:none;
	border:none;
	margin:0;
	padding:0;
	cursor: pointer;
}


.tabhighlight {
	color: #99EB99 !important;
}
.flash {
    -webkit-animation-name: flash-animation;
    -webkit-animation-duration: 2.0s;

    animation-name: flash-animation;
    animation-duration: 2.0s;
}

@-webkit-keyframes flash-animation {  
    0% { background: default; }
    15%   { background: #99EB99; }
    30%   { background: #BAA699; }
    45%   { background: #99EB99; }
    60%   { background: #BAA699; }
    75%   { background: #99EB99; }
    100%   { background: default; }
}

@keyframes flash-animation {  
    0% { background: default; }
    15%   { background: #99EB99; }
    30%   { background: #BAA699; }
    45%   { background: #99EB99; }
    60%   { background: #BAA699; }
    75%   { background: #99EB99; }
    100%   { background: default; }
}


.initdiv {
	transition: height 0.9s;
	-webkit-transition: height 0.6s; /* For Safari 3.1 to 6.0 */
	overflow: hidden;			
	top: 0px;
	min-width: 230px; 
	width: 230px;
	background-color: rgb(255, 204, 0); 
	border: 1px solid gray; 
	border-style: outset; 
	padding-top: 0px; 
	padding-bottom: 3px;
	position:absolute;
	z-index:9900;
	box-shadow: 6px 6px 5px #000000;
	border-radius:6px;
	border:1px solid #4f4f4f;
}
.initdivsmall {
	height: 24px;
}
.initdivtall {
	height: 515px;
}

.teamRolesdiv {
	transition: height 0.9s;
	-webkit-transition: height 0.6s; /* For Safari 3.1 to 6.0 */
	overflow: hidden;			
	top: 0px;
	min-width:203px; 
	width: 203px;
	background-color: rgb(0, 200, 255); 
	border: 1px solid gray; 
	border-style: outset; 
	padding-top: 0px; 
	padding-bottom: 3px;
	position:absolute;
	z-index:9000;
	box-shadow: 6px 6px 5px #000000;
	border-radius:6px;
	border:1px solid #4f4f4f;
}
.teamRolesdivsmall {
	/*height: 24px;*/
	resize:none;
}
.teamRolesdivtall {
	/*height: 515px;*/
	resize:both;
}


.panediv {
	transition: height 0.9s;
	-webkit-transition: height 0.6s; /* For Safari 3.1 to 6.0 */
	overflow: hidden;			
	top: 0px;
	min-width:203px; 
	width: 203px;
	/*background-color: rgb(0, 200, 255); */
	border: 1px solid gray; 
	border-style: outset; 
	padding-top: 0px; 
	padding-bottom: 3px;
	position:absolute;
	z-index:9000;
	box-shadow: 6px 6px 5px #000000;
	border-radius:6px;
	border:1px solid #4f4f4f;
}
.panedivsmall {
	/*height: 24px;*/
	resize:none;
}
.panedivtall {
	/*height: 515px;*/
	resize:both;
}




.popupbar {
	padding-left: 10px; 
	padding-top: 2px; 
	width:100%; 
	position:relative;
	top:0;
	border-radius:6px 6px 0 0; 
	text-align:left;
	height:24px;
	cursor:move
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently
                                  not supported by any browser */
}

.initDeleteButton {
    background-color: #6C6C6C; 
    border: none;
    color: #FFCC00;
    padding: 2px 2px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 9px;
	border-radius: 4px;
	cursor: pointer;
	border: 1px solid #000000;
}
.announce {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 10000; /* Sit on top */
    padding-top: 15px; /* Location of the box */
	padding-left: 10px;
    left: 15%;
    top: 15%;
    width: 410px;
    height: 200px; 
    overflow: auto; /* Enable scroll if needed */
	color: red;
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* --------------------------------------------------*/
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 10000; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Modal Content (Image) */
.modal-content {
    margin: auto;
    display: block;
    /*width: 80%;*/
    max-width: 700px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)}
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 500px){
    .modal-content {
        width: 100%;
    }
}

.noborder {
	border: none;
}