* {
	margin: 0;
}
html, body {
	height: 100%;
}

.filterheader 
{
    color: #0099FF;
}

.grid-header-phone .x-column-header-text {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    
    /* transform doesn't work on inline elements */
    display: inline-block;
    
    /* need to hard code a height for this to work */
    /* you could use Ext.util.TextMetrics if you needed to dynamically determine the text size */
    width: 150px;
    height: 150px;
}

.x-column-header-inner .x-column-header-text {
    white-space: normal;
}

.x-column-header-inner {
    line-height: normal;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    text-align: left;
    top: 20%;
} 

.columnwrap .x-grid-cell-inner {
    white-space: normal;
}

.customGridHeader > .x-column-header-inner {
    border-color: green !important;
    border-width: 100px !important;
}

.loader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url('Buttons/page-loader.gif') 50% 50% no-repeat rgb(255,255,255);
}

.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -20px; /* the bottom margin is the negative value of the footer's height */
}
.push {
	height: 20px; /* .push must be the same height as .footer */
	text-align:center;
	bottom:0;
	position:fixed;
}

.grid-header-phone .x-column-header-align-left {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    
    /* transform doesn't work on inline elements */
    display: inline-block;
    
    /* need to hard code a height for this to work */
    /* you could use Ext.util.TextMetrics if you needed to dynamically determine the text size */
    height: 40px;
}

.x-ie8 .grid-header-phone .x-column-header-text {
    /* IE8 doesn't have css transform */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1) !important;
}

/*.footer {
background-color: #FFF;
position:relative;
bottom: 0px;
width: 400px;
text-align: center;
width:100%;
}*/


.footer {
    clear: both;
    position: relative;
    z-index: 10;
    height: 3em;
    margin-top: 3em;
    text-align: center;
    bottom: 0px;
}



.navigationblock 
{
    
    width:900px;
	margin:0px auto;
	text-align:left;
	padding:15px;
	padding-left:100px;
	

}

.grapheader
{
    font-weight:bold;
    font-size:110%;
    text-align:center;
}

.columnheader
{
    font-weight:bold;
    
}



.button {
        appearance: normal;
        -moz-appearance: normal;
        -webkit-appearance: normal;
        text-decoration: none; 
        color:Gray;
        display: inline-block; 
        padding: 2px 8px;
        margin-top:20px;
        margin-left: auto ;
        margin-right: auto ;
        padding-left:0px;
        position:relative;
    }


.home
{
    width: 900px ;
    margin-top:30px;
    margin-left: auto ;
    margin-right: auto ;
    padding-left:0px;
    position:relative;
    color:Gray;
}

a.hover:hover 
{
    color:Blue;
    cursor:pointer;
}

.navigationitem
{
    float: left;
    margin-right: 50px;
    margin-left: auto;
    margin-bottom: 50px;
}

.logoimage
{
    width:100%; 
    height: 100%; 
    margin-top: 30px;
}

.animation
{
    width:100%; 
    margin:0; 
    position:relative;
}

.fadeoutnavigation {
     visibility: collapse;
    opacity: 0;
    transition: visibility 1s 1.0s, opacity 1.0s linear; 
    -webkit-transition: visibility 1s 1.0s, opacity 1.0s linear; /* Safari and Chrome */
    -moz-transition: visibility 1s 1.0s, opacity 1.0s linear; /* Firefox */
    -ms-transition: visibility 1s 1.0s, opacity 1.0s linear; /* Internet Explorer */
    -o-transition: visibility 1s 1.0s, opacity 1.0s linear; /* Opera */
    width: 900px ;
    height: 500;
    margin:0px auto;
    padding:15px;
	padding-left:100px;
    position:relative;

}

.fadeoutapplication {
     visibility: collapse;
    opacity: 0;
    transition: visibility 0s 0.5s, opacity 0.5s linear; 
    -webkit-transition: visibility 0s 0.5s, opacity 0.5s linear; /* Safari and Chrome */
    -moz-transition: visibility 0s 0.5s, opacity 0.5s linear; /* Firefox */
    -ms-transition: visibility 0s 0.5s, opacity 0.5s linear; /* Internet Explorer */
    -o-transition: visibility 0s 0.5s, opacity 0.5s linear; /* Opera */
}

.hidden
{
    display:none;
}

.appcontent
{
   width: 900px ;
    margin-top:10px;
    margin-left: auto ;
    margin-right: auto ;
    position:relative;
}

.fadein
{
    -webkit-animation: fadein 1s; /* Safari and Chrome */
    -moz-animation: fadein 1s; /* Firefox */
    -ms-animation: fadein 1s; /* Internet Explorer */
    -o-animation: fadein 1s; /* Opera */
    animation: fadein 1s;
}

.fadeout
{
    -webkit-animation: fadeout 3s; /* Safari and Chrome */
    -moz-animation: fadeout 3s; /* Firefox */
    -ms-animation: fadeout 3s; /* Internet Explorer */
    -o-animation: fadeout 3s; /* Opera */
    animation: fadeout 3s;
}

.fadeinnavigation
{
    width:900px;
	margin:0px auto;
	text-align:left;
	padding:15px;
	padding-left:100px;
	-webkit-animation: fadein 2s; /* Safari and Chrome */
    -moz-animation: fadein 2s; /* Firefox */
    -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera */
    animation: fadein 2s;
}

.site-binder-area-nodes
{
    background-image: url('Buttons/Area_Nodes.png') !important;
}

.site-binder-area-no-nodes
{
    background-image: url('Buttons/Area_No_Nodes.png') !important;
}

.site-binder-item
{
    background-image: url('Buttons/Site_Binder_Item.png') !important;
}

.site-binder-template-item
{
    background-image: url('Buttons/Site_Binder_Template_Item.png') !important;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari and Chrome */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}​

/* Opera */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}​

@keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Firefox */
@-moz-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Safari and Chrome */
@-webkit-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Internet Explorer */
@-ms-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}​

/* Opera */
@-o-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}​