/* webkit css bugfix: http://css-tricks.com/8439-webkit-sibling-bug/ */
body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }
/* end of bugfix */
/* layout&functionality */
.accordion>.view>input.toggle
{
    position: absolute;
    display: block;
    width: 24px;
    height: 24px;
    opacity: 0;
    z-index: 1;
	margin-top:15px;
	margin-left:15px;
    cursor: pointer;
}
.accordion>.view>input.toggle:not(:checked)~.accorcontent
{
    display: none;
}
    /* special treat for ios */
    .accordion>.view>input.toggle:checked~.accorcontent
    {
        display: block;
    }
.accordion>.view>input.toggle~.header>label
{
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
}
/* look&feel */
.accordion
{
    position: relative;
    display: inline-block;
    width: 591px;
    margin-left: 60px;
    text-align: justify;

    background-color: #EEDDA9;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-box-shadow: inset 0px 1px 0px #ffffff;
    -moz-box-shadow: inset 0px 1px 0px #ffffff;
    box-shadow: inset 0px 1px 0px #ffffff;
}
    .accordion:first-child
    {
        margin-left: 0px;
    }
.accordion:before
{
    accorcontent: "";

    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    width: 591px;
    height: auto;
    z-index: -1;
    border: 1px solid rgba(0,0,0,0.1);
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
}
.accordion>.view>.header{font-family: "Bookman Old Style"; font-size: 28px; color: white; text-transform: initial; text-align: center; width:auto;}

.accordion>.view>.header
{
	position: relative;
	padding: 10px 15px;
	text-shadow: 0px 1px 1px #ffffff;
	background-color: #EEDDA9;
/*	background-image: -webkit-gradient(linear, left top, left bottom, from(#436243), to(#458045));
	background-image: -moz-linear-gradient(top, #436243, #458045);*/
	/* Note: This gradient may render differently in browsers that don't support the unprefixed gradient syntax */

/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top, #31511B 0%, #436243 100%);
	/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #31511B 0%, #436243 100%);
	/* Opera */ 
background-image: -o-linear-gradient(top, #31511B 0%, #436243 100%);
	/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, top, bottom, color-stop(0, #31511B), color-stop(1, #436243));
	/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #31511B 0%, #436243 100%);
/* W3C Markup, IE10 Release Preview */ 

background-image: linear-gradient(to bottom, #31511B 0%, #436243 100%)	
    border: 1px solid #EEDDA9;
	border-bottom: #AA5120 solid 1px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-webkit-background-clip: padding-box;
	-moz-background-clip: padding-box;
	background-clip: padding-box;
	-webkit-box-shadow: inset 0px 1px 0px rgba(255,255,255,0.5);
	-moz-box-shadow: inset 0px 1px 0px rgba(255,255,255,0.5);
	box-shadow: inset 0px 1px 0px rgba(255,255,255,0.5);
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
/*    .accordion>.view>.header>input.toggle:checked~.arrow
    {
        color: #00CC00;
    }
    .accordion>.view>.header>input.toggle:hover~.arrow,
    .accordion>.view>.header>.arrow:hover
    {
        color: #00CC00;
        text-shadow:  0px 1px 1px #ffffff, 0px 0px 1px #00CC00;
    } */
    .accordion>.view>.header>input.toggle:active~.arrow,
    .accordion>.view>.header>.arrow:active
    {
        background-color: #31511B;
        /*background-image: -webkit-gradient(linear, left top, left bottom, from(#c3c3c3), to(#ebebeb));
        background-image: -moz-linear-gradient(top, #c3c3c3, #ebebeb);
        border-color: #a6a6a6;
        border-top-color: #939393;
        border-bottom-color: #bcbcbc;*/
    }
.accordion>.view>.header>label
{
    width: 100%;
}
.accordion>.view>.header>.arrow
{
	position:absolute;
	display:block;
	width:30px;
	height:30px;
	
	background:url(../images/plussign.png) no-repeat 0 4px;
}
    .accordion>.view>input.toggle:checked~.header>.arrow
    {
	position:absolute;
	display:block;
	width:30px;
	height:30px;
	background:url(../images/minussign.png) no-repeat 0 4px ;
    }
    .accordion>.view>input.toggle:hover~.header>.arrow
	    {
	position:absolute;
	display:block;
	width:30px;
	height:30px;
	background:url(../images/plussignhover.png) no-repeat 0 4px ;
    }
/*    .accordion>.view>.header:hover>.arrow
    {
	position:absolute;
	display:block;
	width:30px;
	height:30px;
	background:url(../images/minussignhover.png) no-repeat 0 4px ;
    }*/
        .accordion>.view>input.toggle:checked:hover~.header>.arrow
        {
	position:absolute;
	display:block;
	width:30px;
	height:30px;
	background:url(../images/minussignhover.png) no-repeat 0 4px ;
        }
.accordion>.view>.accorcontent
{
    padding-bottom: 10px;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	font-size:14px;
	color:#436243;
}
.accordion>.view>.accorcontent>p
{
    margin: 0px;
    text-align: justify;
}

/* massage accorcontent */
.accordion:after
{
    accorcontent: "";

    position: absolute;
    top: -30px;
    right: 0px;
    left: 10px;
    width: auto;
    height: 30px;
    line-height: 30px;
    z-index: -1;
}
    .accordion.multi:after
    {
        accorcontent: "Multi select accordion";
    }
    .accordion.single:after
    {
        accorcontent: "Single select accordion";
    }
    .accordion.animated:after
    {
        accorcontent: "Animated accordion (fixed height)";
    }

.accordion>.view>.accorcontent.picture
{
    text-align: center;
}
.accordion img.sample
{
    width: 240px;
    height: 240px;
    border: 1px solid #999999;
    -webkit-box-shadow: 1px 1px 1px #ffffff;
    -moz-box-shadow: 1px 1px 1px #ffffff;
    box-shadow: 1px 1px 1px #ffffff;
}
/*
 * Here goes firefox only stuff
 */
@-moz-document url-prefix()
{
/* add your ff-only stuff below */
    .accordion>.view>.header>.arrow
    {
        top: 12px;
    }
        .accordion>.view>input.toggle:checked~.header>.arrow
        {
            top: 14px;
        }
/* add your ff-only stuff above */
}
/* more nice to have hacks */
@media all and (orientation:landscape)
{
    /* consider it as default */
}
@media all and (orientation: portrait)
{
    .accordion
    {
        display: block;
        margin: 60px auto 30px;
    }
        .accordion:first-child
        {
            margin: auto auto 30px;
        }
}
@media all and (max-width: 1020px)
{
    .accordion
    {
        display: block;
        margin: 60px auto 30px;
    }
        .accordion:first-child
        {
            margin: auto auto 30px;
        }
}
/* couldn't come up with less hacky way, leave like that for now */
/* animation */
.accordion.animated>.view>input.toggle:not(:checked)~.accorcontent
{
    display: block;
    visibility: hidden;
    height: 0px;
    margin-bottom: 0px;
    padding: 0px 10px;
}
    .accordion.animated>.view>input.toggle:checked~.accorcontent
    {
        display: block;
        visibility: visible;
        height: auto;
        margin-bottom: 5px;
        padding: 5px 10px;
    }
/* 100px */
.accordion.animated>.view>input.toggle:not(:checked)~.accorcontent.animated100
{
    overflow: hidden;
    -webkit-animation-name: disappearing100;
    -webkit-animation-duration: 1s;
    -moz-animation-name: disappearing100;
    -moz-animation-duration: 1s;
}
.accordion.animated>.view>input.toggle:checked~.accorcontent.animated100
{
    overflow: hidden;
    -webkit-animation-name: appearing100;
    -webkit-animation-duration: 1s;
    -moz-animation-name: appearing100;
    -moz-animation-duration: 1s;
}
/* 120px */
.accordion.animated>.view>input.toggle:not(:checked)~.accorcontent.animated120
{
    overflow: hidden;
    -webkit-animation-name: disappearing120;
    -webkit-animation-duration: 1s;
    -moz-animation-name: disappearing120;
    -moz-animation-duration: 1s;
}
.accordion.animated>.view>input.toggle:checked~.accorcontent.animated120
{
    overflow: hidden;
    -webkit-animation-name: appearing120;
    -webkit-animation-duration: 1s;
    -moz-animation-name: appearing120;
    -moz-animation-duration: 1s;
}
/* 240px */
.accordion.animated>.view>input.toggle:not(:checked)~.accorcontent.animated240
{
    overflow: hidden;
    -webkit-animation-name: disappearing240;
    -webkit-animation-duration: 1s;
    -moz-animation-name: disappearing240;
    -moz-animation-duration: 1s;
}
.accordion.animated>.view>input.toggle:checked~.accorcontent.animated240
{
    overflow: hidden;
    -webkit-animation-name: appearing240;
    -webkit-animation-duration: 1s;
    -moz-animation-name: appearing240;
    -moz-animation-duration: 1s;
}
/* keyframes */
/* since height: auto doesn't produce good animation, hardcode for now */
/* height 100px */
@-webkit-keyframes disappearing100
{
    0%
    {
        visibility: visible;
        height: 100px;
        padding: 5px 10px;
    }
    100%
    {
        visibility: visible;
        height: 0px;
        padding: 0px 10px;
    }
}
@-moz-keyframes disappearing100
{
    0%
    {
        visibility: visible;
        height: 100px;
    }
    100%
    {
        visibility: visible;
        height: 0px;
    }
}
@-webkit-keyframes appearing100
{
    0%
    {
        visibility: visible;
        height: 0px;
    }
    100%
    {
        visibility: visible;
        height: 100px;
    }
}
@-moz-keyframes appearing100
{
    0%
    {
        visibility: visible;
        height: 0px;
    }
    100%
    {
        visibility: visible;
        height: 100px;
    }
}
/* height 120px */
@-webkit-keyframes disappearing120
{
    0%
    {
        visibility: visible;
        height: 120px;
    }
    100%
    {
        visibility: visible;
        height: 0px;
    }
}
@-moz-keyframes disappearing120
{
    0%
    {
        visibility: visible;
        height: 120px;
    }
    100%
    {
        visibility: visible;
        height: 0px;
    }
}
@-webkit-keyframes appearing120
{
    0%
    {
        visibility: visible;
        height: 0px;
    }
    100%
    {
        visibility: visible;
        height: 120px;
    }
}
@-moz-keyframes appearing120
{
    0%
    {
        visibility: visible;
        height: 0px;
    }
    100%
    {
        visibility: visible;
        height: 120px;
    }
}
/* height 240px */
@-webkit-keyframes disappearing240
{
    0%
    {
        visibility: visible;
        height: 240px;
    }
    100%
    {
        visibility: visible;
        height: 0px;
    }
}
@-moz-keyframes disappearing240
{
    0%
    {
        visibility: visible;
        height: 240px;
    }
    100%
    {
        visibility: visible;
        height: 0px;
    }
}
@-webkit-keyframes appearing240
{
    0%
    {
        visibility: visible;
        height: 0px;
    }
    100%
    {
        visibility: visible;
        height: 240px;
    }
}
@-moz-keyframes appearing240
{
    0%
    {
        visibility: visible;
        height: 0px;
    }
    100%
    {
        visibility: visible;
        height: 240px;
    }
}

.dataGrid_container{
	border:1px solid #bababa;
	border-top:none;
	
}
.dataGrid_container2{
	border:1px solid #bababa;
	border-top:none;
	height:100px;
	overflow:auto;
}
.dataGrid_container3{
	border:1px solid #bababa;
	border-top:none;
	height:100px;
	overflow:auto;
}
.dataGrid_container4{
	border:1px solid #bababa;
	border-top:none;
	height:640px;
	overflow:auto;
}
.dataGrid {
	background:#dffbdf;
	font-weight:normal;
}
.dataAlterRw1{
	background:#f3f8ee;
	border-bottom:1px solid #8dae8d;
}
.dataAlterRw2{
	background:#e5f3e5;
	border-bottom:1px solid #8dae8d;
}
.dataGridHdr, .dataGrid {
	color:#436243 !important;
	/*line-height:20px;*/
	font-size:12px;
}
.dataGridHdr td:hover {
	background:url(../images/gridHdrhovr_img.gif) bottom repeat-x #fafafb;
	}
.dataGridHdr_boder {
	border:1px solid #cfcece; 
	padding:5px;
}
.dataGridHdr_boder2 {
	border-right:1px solid #cfcece; 
	padding:0 7px 0 7px;
}
.dataGridHdr_boder3 {
	padding:0 7px 0 7px;
}
.dataGrid_container{
	border:1px solid #bababa;
	border-top:none;
	
}
.dataGrid_container2{
	border:1px solid #bababa;
	border-top:none;
	height:100px;
	overflow:auto;
}
.dataGrid_container3{
	border:1px solid #bababa;
	border-top:none;
	height:100px;
	overflow:auto;
}
.dataGrid_container4{
	border:1px solid #bababa;
	border-top:none;
	height:640px;
	overflow:auto;
}