/*
@font-face {
    font-family: 'Optima-Bold';
    src: url('optimacebold.eot');
    src: url('optimacebold.ttf') format('truetype'),
         url('optimacebold.svg#OptimaBold') format('svg');
    font-weight: normal;
    font-style: normal;

}*/

@font-face {
    font-family: 'Optima-Bold';
    src: url('optima_regular-webfont.eot');
    src: url('optima_regular-webfont.ttf') format('truetype'),
         url('optima_regular-webfont.svg#optimaregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Optima Regular';
    src: url('optima_regular-webfont.eot');
    src: url('optima_regular-webfont.ttf') format('truetype'),
         url('optima_regular-webfont.svg#optimaregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/*Page related styles for you to view*/
#test1, #test3, #test4,  #test6, #test7{
background-color: trasparent;
color: #3F3833;
font-family:  'Optima Regular', Arial Rounded MT Bold;
font-size: 11px;
width: 260px;
height: 338px;
overflow: auto;
margin: 0.3em;
padding: 0.5em;
border: px solid #3F3833;
/*IE overflow fix, position must be relative or absolute*/
position: absolute;
/*if you do not want the outline when focused on firefox and IE
use outline: none;, though not recommended as this may confuse
people who likes to do keyboard navigation */
outline: none;
}

#test0{
	background-color: trasparent;
	color: #3F3833;
	font-family:  'Optima Regular', Arial Rounded MT Bold;
	font-size: 13px;
	width: 235px;
	height: 95px;
	overflow: auto;
	margin: 0.3em 0.3em 0.3em 115px;
	padding: 0.5em;
	border: px solid #575759;
	/*IE overflow fix, position must be relative or absolute*/
	position: absolute;
	/*if you do not want the outline when focused on firefox and IE
	use outline: none;, though not recommended as this may confuse
	people who likes to do keyboard navigation */
	outline: none;
}

#test2{
	background-color: trasparent;
	color: #3F3833;
	font-family:  'Optima Regular', Arial Rounded MT Bold;
	font-size: 12px;
	width: 235px;
	height:260px;
	overflow: auto;
	margin: 0.3em 0.3em 0.3em 115px;
	padding: 0.5em;
	border: px solid #575759;
	/*IE overflow fix, position must be relative or absolute*/
	position: absolute;
	/*if you do not want the outline when focused on firefox and IE
	use outline: none;, though not recommended as this may confuse
	people who likes to do keyboard navigation */
	outline: none;
}


#test5{
	background-color: trasparent;
	color: #3F3833;
	font-family:  'Optima Regular', Arial Rounded MT Bold;
	font-size: 14px;
	width: 416px;
	height:410px;
	overflow: auto;
	padding:-7px;
	/*margin: 0.3em 0.3em 0.3em 0px;*/
	padding-right: 0.8em;
	border: px solid #575759;
	text-align:justify;
	/*IE overflow fix, position must be relative or absolute*/
	position: absolute;
	/*if you do not want the outline when focused on firefox and IE
	use outline: none;, though not recommended as this may confuse
	people who likes to do keyboard navigation */
	outline: none;
}


#test0 .vscrollerbarbeg, #test1 .vscrollerbarbeg, #test2 .vscrollerbarbeg , #test3 .vscrollerbarbeg, 
#test4 .vscrollerbarbeg, #test5 .vscrollerbarbeg, #test6 .vscrollerbarbeg, #test7 .vscrollerbarbeg  {
width: 5px;
height: auto;
background-color: white;
border: 1px solid #dedede;
}

#test0 .vscrollerbarend, #test1 .vscrollerbarend, #test2 .vscrollerbarend, #test3 .vscrollerbarend, 
#test4 .vscrollerbarend, #test5 .vscrollerbarend, #test6 .vscrollerbarend, #test7 .vscrollerbarend{
width: 7px;
height: 5px;
background-color: #dedede;
border: 1px solid #dedede;
}


#test0 .vscrollerbase, #test1 .vscrollerbase, #test2 .vscrollerbase, #test3 .vscrollerbase, 
#test4 .vscrollerbase, #test5 .vscrollerbase, #test6 .vscrollerbase, #test7 .vscrollerbase {
width: 7px;
background-color: #575759;
}

#test0 .vscrollerbar, #test2 .vscrollerbar, #test1 .vscrollerbar, #test3 .vscrollerbar, 
#test4 .vscrollerbar, #test5 .vscrollerbar, #test6 .vscrollerbar, #test7 .vscrollerbar {
background-color: #dedede;
padding: 0px;
}


#test0 .contentwrapper, #test1 .contentwrapper, #test2 .contentwrapper, #test3 .contentwrapper, 
#test4 .contentwrapper, #test5 .contentwrapper, #test6 .contentwrapper, #test7 .contentwrapper {

padding-right: 5px;
}

/*#test1 .vscrollerbasebeg, #test1 .vscrollerbaseend, 
#test2 .vscrollerbasebeg, #test2 .vscrollerbaseend,
#test3 .vscrollerbasebeg, #test3 .vscrollerbaseend, 
#test4 .vscrollerbasebeg, {
background-image: none;
}*/


.aligntocenter {
margin: 0.5em auto;
border: 2px solid #A22;
width: 90%;
position: relative;
height: 500px;
}

.fixedsize {
width: 400px;
height: auto;
position: relative;
color: black;
padding: 1px;
}

.version {
background: #999;
color: white;
font-size: 75%;
padding: 0 0.4em 0 0.3em;
}


/* general page style ends here */

/* Scroll Bar Master Styling Starts Here */

#test1 .vscrollerrest, #test1 .vscrollerfill , 
#test2 .vscrollerrest, #test2 .vscrollerfill ,
#test3 .vscrollerrest, #test3 .vscrollerfill , 
#test4 .vscrollerrest, #test4 .vscrollerfill ,
#test5 .vscrollerrest, #test5 .vscrollerfill ,
#test6 .vscrollerrest, #test6 .vscrollerfill , 
#test7 .vscrollerrest, #test7 .vscrollerfill  {
background-color: #dedede;

}

.scrollgeneric
{
line-height: 1px;
font-size: 1px;
position: absolute;
background-color: #727272;
}

.vscrollerbase, .vscrollerbar {
width: 5px;
top: 0px;
}

.vscrollerbar {
left: 0px;
}

.hscrollerbase, .hscrollerbar {
height: 6px;
left: 5px;

}


.hscrollerbar {
top: 0px;
background-color: #D9D9D9;
}

.vscrollerbar, .hscrollerbar {
/*padding information of these elements are only used for
padding of the scroll-bar with respect to the scroll base,
the padding will automatically be turned off by the script*/
padding: 5px;
/* z-index for scrollbars no longer has to be given as of version
1.7.5 for correct operation, but it is still recommended, as this
decides the z-index for content.*/
z-index: 2;
width: 5px;
}

.vscrollerbarbeg {
/*top image holder for vertical scroll bar*/
/*background: url(../images/vscroller.png) 0px -10px;*/
width: 5px;
height: auto;
top: 5px;
}

.vscrollerbarend {
/*bottom image holder for vertical scroll bar*/
/*background: url(../images/vscroller.png);*/
width: 5px;
height: 10px;
background-color: #575759;
}

.hscrollerbarbeg {
background: url(../img/hscroller.png) -10px 0px;
height: 10px;
width: auto;
left: 0;
}

.hscrollerbarend {
background: url(../img/hscroller.png);
height: 15px;
width: 5px;
}

/* Following are OPTIONAL */

.vscrollerbase, .hscrollerbase {
/*background-color: #D1DDCB;
background-image: url(/web/images/scrollbaseback.png);*/

}

.hscrollerbasebeg {
left: 0px;
top: 0px;
height: 15px;
/*background: url(/web/images/scrollbases.png) -22px 0px no-repeat;*/
}

.hscrollerbaseend {
top: 0px;
height: 15px;
width: 5px;
/*background: url(/web/images/scrollbases.png) 0% 0% no-repeat;*/
}

.vscrollerbasebeg {
top: 0px;
width: 5px;
/*background: url(/web/images/scrollbases.png) -7px -8px no-repeat;*/
}

.vscrollerbaseend {
height: 7px;
width: 5px;
/*background: url(/web/images/scrollbases.png) -7px 0px no-repeat;*/
}

.scrollerjogbox {
width: 5px;
height: 15px;
bottom: 0px;
right: 0px;
/*background: white url(/web/images/scrolljog.png) 50% 50%;*/
}

#test_horizontal .vscrollerbarbeg{
	display:none;
}
#test_horizontal .vscrollerbarend{
	display:none;
}
#test_horizontal .vscrollerbase{
	display:none;
}
#test_horizontal .vscrollerbar{
	display:none;
}
/* Scroll Bar Master Styling Ends Here */