@media screen and (max-width: 100000px){

    /* END RESET CODE */
    .layout2 { width: 97%; height: 64%; position: absolute; bottom: 10px; left: 2%; z-index: 3 }
    
    .profit-label { font-size:11px; color:#fff; position:absolute; bottom:32px; width: 120px; text-align: center; }
    .signal-label { font-size:12px; color:#fff; position:absolute; bottom:47px; width: 120px; text-align: center; }

    #placeholder div.big-graphic-date { padding-bottom:10px; font-size: 11px;}
    #placeholder .big-graphic-price { font-size: 11px !important;}
    
    #placeholder-small { padding-left: 1px;}
    #placeholder-small span.small-graphic-date { font-size: 11px; }
    #placeholder-small .y_label{font-size: 11px;}
	#placeholder-small .y_label-fix { margin-top: -3px;}
    
    #placeholder-small .tickLabels { padding-bottom: 10px;}

    div.pointI {
        display: none;
        width: 7px;
        height: 7px;
        position: absolute;
        margin: 0px;
        padding: 0px;
        overflow: hidden;
    }

    .greenBlSector {
        background-image: -webkit-gradient(
            linear, left top, left bottom, from(rgba(0,204,0, 1)),
            to(rgba(0,204,0, 0.1))

            );

        background-image: -moz-linear-gradient(
            rgba(0,204,0, 1) 0%, rgba(0,204,0, 0) 100%

            );

        background: -ms-linear-gradient(rgba(0,204,0, 1), rgba(0,204,0, 0));/*For IE10*/
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00CC00', endColorstr='#113981');/*For IE7-8-9*/

        /* IE8 uses -ms-filter for whatever reason... */
        /* IE8 uses -ms-filter for whatever reason... */

        margin-top:0;

        z-index:1.8px;
    } 

    .redBlSector {
        background-image: -webkit-gradient(
            linear, left top, left bottom, from(rgba(204,0,0, 1)),
            to(rgba(204,0,0, 0))
            );

        background-image: -moz-linear-gradient(
            rgba(204,0,0, 1) 0%, rgba(204,0,0, 0.1) 100%
            );

        margin-top:2px;
        /* IE8 uses -ms-filter for whatever reason... */
        -ms-filter: progid:DXImageTransform.Microsoft.gradient(
            gradientType=1, startColor=green, endColoStr=red
            );
        background: -ms-linear-gradient(rgba(204,0,0, 1), rgba(204,0,0, 0));/*For IE10*/
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00CC00', endColorstr='#160A73');/*For IE7-8-9*/

        z-index:0;
    }

    div#point0 {
        background-image: url('./graphic-images/point-blue.gif');
		position:absolute;
        z-index: 12;
    }

    div#point1 {
        background-image: url('./graphic-images/point-orange.gif');
        z-index: 11;
    }

    div#point2 {
        background-image: url('./graphic-images/point-orange.gif');
        z-index: 50;
        position: absolute;
    }

    div#point3 {
        background-image: url('./graphic-images/point-blue.gif');
        z-index: 50;
    }

    div#point4 {
        background-image: url('./graphic-images/point-red.gif');
        z-index: 15;
    }

    div.pointY {
        display: none;
        width: 46px;
        height: 15px;
        line-height: 14px;
        font-size: 11px;
        padding: 0px 16px 0px 5px;
        position: absolute;
        left: -11px;
        z-index: 1;
        margin: 0px;
        overflow: hidden;
        background-repeat: no-repeat;
        text-align: right;
    }

    div#pointy0 {
        background-image: url('./graphic-images/point-blue-y.gif');
        color: #000000;
		z-index: 20;
    }

    div#pointy1 {
        background-image: url('./graphic-images/point-orange-y.gif');
        color: #FF6600;
		z-index: 20;
    }

    div#pointy2 {
        background-image: url('./graphic-images/point-orange-middle-y.gif');
        color: #FF6600;
        padding-left:0;
        padding-right:10px;
        z-index: 20;
        width:45px; 
        left:-3px;
    }

    div#pointy3 {
        background-image: url('./graphic-images/point-blue-middle-y.gif');
        color: #000;
        padding-left:0;
        padding-right:10px;
		z-index: 20;
        width:45px;
        left:-3px;

    }

    div#pointy4 {
        background-image: url('./graphic-images/point-red-y.gif');
        color: #FF0000;
    }

    div#pointx0-triangle, div#pointx1-triangle {
        display: none;
        position: absolute;
        z-index: 1;
        width: 64px;
		height: 4px;
        background: url('./graphic-images/point-gray-x-triangle.gif') no-repeat;  
    }
	
	div#pointx0, div#pointx1 {
        display: none;
        font-size: 11px;
        text-align: center;
        position: absolute;
        z-index: 1;
        overflow: hidden;
        width: 64px;
		height: 14px;
		line-height: 14px;
		background-color:#fff;
		border: 1px solid #525252;
		border-top: 0;
		border-radius: 0 0 2px 2px;
    }
/*
    div#pointx1 {
        display: none;
        width: 64px;
        height: 20px;
        font-size: 11px;
        text-align: center;
        padding: 9px 0px 0px 0px;
        background: url('./graphic-images/point-gray-x-center.gif') no-repeat;
        position: absolute;
        z-index: 1;
        margin: 0px;
        overflow: hidden;
        margin-left: -17px;
        margin-top: -2px;
        line-height: 13px;
    }
*/
    div.typeOneIndexTableContainer {
        background:  url('./graphic-images/table-background.gif');
        background-repeat: no-repeat;
        width: 612px;
        height: 176px;
        margin-left: 4px;
        overflow: hidden;
        position: relative;
        z-index: 1;
        border-top: 1px #728EDC solid;
        border-bottom: 1px #728EDC solid;
        padding: 1px 0px;
    }

    span.t1_label {
        text-align: center;
        font-size: 10px;
        position: absolute;
        width: 65px;
        height: 20px;
        color: #FFFFFF;
    }

    span.leftRuler {

        width: 1px;
        padding-bottom: 7px;
        background-color: #fff;
        overflow: hidden;
        position: absolute;
        display: none;
        z-index: 2;
    }

    span.bottomRuler {
        height: 1px;
        width: 529px;
        background-color: #fff;
        overflow: hidden;
        position: absolute;
        z-index: 2;
        margin-top: 2px;
        display: none;
    }

    span.t1_bottomRuler {
        width: 529px;
    }

    span.t2_bottomRuler {
        width: 529px;
    }

    span.highMiniLine {
        height: 4px;
        width: 1px;
        background-color: #fff;
        overflow: hidden;
        position: absolute;
    }

    span.t2_highMiniLine {
        height: 4px;
        width: 1px;
        background-color: #fff;
        overflow: hidden;
        position: absolute;
    }

    span.t3_highMiniLine {
        height: 4px;
        width: 1px;
        background-color: #fff;
        overflow: hidden;
        position: absolute;
    }

    span.wideMiniLine {
        height: 1px;
        width: 3px;
        background-color: #fff;
        overflow: hidden;
        position: absolute;
    }

    span.t2_wideMiniLine {
        height: 1px;
        width: 3px;
        background-color: #fff;
        overflow: hidden;
        position: absolute;
    }

    span.t3_wideMiniLine {
        height: 1px;
        width: 3px;
        background-color: #fff;
        overflow: hidden;
        position: absolute;
    }

    span.red {
        color: #cc0000;
    }

    span.green {
        color: #00cc00;
    }

    div.strategy {
        float: left;
        font-size: 11px;
        font-weight: bold;
    }

    div.strategyWide a {
        color: #808080;
        float: left;
    }

    div.strategy a {
        color: #808080;
        float: left;
    }

    a.conservative {
        background:  url('./graphic-images/conservative-empty.gif');
        background-repeat: no-repeat;
        padding-left: 16px;
        width: 88px;
        text-decoration: underline;
    }

    a.balanced {
        background:  url('./graphic-images/balanced-empty.gif');
        background-repeat: no-repeat;
        padding-left: 16px;
        width: 65px;
        text-decoration: underline;
    }

    a.progressive {
        background:  url('./graphic-images/progressive-empty.gif');
        background-repeat: no-repeat;
        padding-left: 16px;
        width: 90px;
        text-decoration: underline;
    }

    div.strategy a.conservativeChecked {
        background:  url('./graphic-images/conservative-checked.gif');
        background-repeat: no-repeat;
        padding-left: 16px;
        width: 88px;
        color: #FFFFFF;
    }

    div.strategy a.balancedChecked {
        background:  url('./graphic-images/balanced-checked.gif');
        background-repeat: no-repeat;
        padding-left: 16px;
        width: 65px;
        color: #FFFFFF;
    }

    div.strategy a.progressiveChecked {
        background:  url('./graphic-images/progressive-checked.gif');
        background-repeat: no-repeat;
        padding-left: 16px;
        width: 90px;
        color: #FFFFFF;
    }

    div.strategyWide a.conservativeChecked {
        background:  url('./graphic-images/conservative-checked.gif');
        background-repeat: no-repeat;
        padding-left: 16px;
        width: 88px;
        color: #FFFFFF;
    }

    div.strategyWide a.balancedChecked {
        background:  url('./graphic-images/balanced-checked.gif');
        background-repeat: no-repeat;
        padding-left: 16px;
        width: 65px;
        color: #FFFFFF;
    }

    div.strategyWide a.progressiveChecked {
        background:  url('./graphic-images/progressive-checked.gif');
        background-repeat: no-repeat;
        padding-left: 16px;
        width: 90px;
        color: #FFFFFF;
    }

    span.highMiniLine {
        height: 4px;
        width: 1px;
        background-color: #fff;
        overflow: hidden;
        position: absolute;
        margin-top: 7px;
    }

    span.t2_highMiniLine {
        height: 4px;
        width: 1px;
        background-color: #fff;
        overflow: hidden;
        position: absolute;
    }

    span.t3_highMiniLine {
        height: 4px;
        width: 1px;
        background-color: #fff;
        overflow: hidden;
        position: absolute;
    }

    span.wideMiniLine {
        height: 1px;
        width: 3px;
		margin-left:1px;
        background-color: #fff;
        overflow: hidden;
        position: absolute;
    }

    span.t2_wideMiniLine {
        height: 1px;
        width: 3px;
        background-color: #fff;
        overflow: hidden;
        position: absolute;
    }

    span.t3_wideMiniLine {
        height: 1px;
        width: 3px;
        background-color: #fff;
        overflow: hidden;
        position: absolute;
    }

    span.h-MiniLine {
        height: 1px;
        width: 3px;
        background-color: #fff;
        margin: 6px 0 0 0;
        position: absolute;
    }

    span.v-MiniLine {
        height: 4px;
        width: 1px;
        background-color: #fff;
        margin: -4px 0 0 -28px;
        position: absolute;
    }

    span.bottom-ruler {
        position:absolute;
        bottom: 0;
        width: 86%;
        height: 1px;
        background-color: #fff;
    }
    span.left-ruler {
        position: absolute;
        height: 90%;
        width: 1px;
        margin-left: 0px;
        margin-top: 1px;
        background-color: #fff;
    }

    span.red {
        color: #FF0000;
    }

    span.green {
        color: #00FF00;
    }

    div.tickLabel {
        line-height: 13px;
        color: white;
        font-family: tahoma;
        font-size: 10px;
    }

    a.dateSelect {
        background:  url('./graphic-images/date-button.gif');
        background-repeat: no-repeat;
        width: 59px;
        height: 17px;
        float: left;
        font-size: 10px;
        color: #FFFFFF;
        padding-left: 4px;
    }

    a.largeDate {
        background:  url('./graphic-images/date-button-large.gif');
        background-repeat: no-repeat;
        width: 120px;
    }

    div.selectContainer {
        position: absolute;
        height: 85px;
        width: 56px;
        display: none;
        background-color: #000080;
        z-index: 9999;
    }

    *+html div.selectContainer {
        top: 85px;
    }

    div.selectContainer a {
        display: block;
        width: 51px;
        padding-left: 5px;
        height: 16px;
        font-size: 10px;
        color: #FFFFFF;
        border-bottom: 1px #4768B3 solid;
    }

    #type4options a {
        width: 115px;
    }

    div.selectContainer a:hover {
        color: #000080;
        background-color: #FFC000;
    }


	#layout1 {
		width: 96.8%;
        height: 71.1%;
		position:absolute;
		left: 19px;
		bottom: 6px;
	}
    #placeholder {
        width: 100%;
        height: 100%;
        position: absolute;
    }


    div.pilotTableHolder {
        position: absolute;
        left: 1px;
        top: 384px;
    }
    div.pilotTableHolder2 {
        position: absolute;
        left: 0px;
        top: 381px;
    }
    div.graphicsMainHolder {
        position: relative;
    }
    div.registerBanner {
        background:  url('./graphic-images/register-back.png');
        background-repeat: no-repeat;
        height: 24px;
        float: right;
        width: 612px;
        text-align: center;
        font-weight: bold;
        font-size: 15px;
        padding: 6px 0px 0px 0px;
    }
    a.registerBannerLink {
        color: #FFFFFF;
        padding-left: 8px;

    }
    div#infoLeft {
        position: absolute;
        left: 460px;
        top: 159px;
        width: 155px;
        height: 50px;
        color: white;
        font-size: 10px;
    }
    div#infoLeft span {
        font-weight: bold;
    }
    div.pilotInfo {
        font-weight: bold;
        font-size: 18px;
        text-align: right;	
        line-height: 35px;
        padding: 20px 111px 0px 0px;
    }
    div.indicatorTopRightPilot {
        width: 120px;
        height: 148px;
        padding: 10px 5px 5px 10px;
        margin: 15px 0px 0px 6px;
        background:  url('./graphic-images/selected-perf-small-block.png');
        background-repeat: no-repeat;
        float: left;
        font-size: 10px;
        color: #FFFFFF;
        display: none;
    }
    div.forecastPerformance {
        position: absolute;
        font-weight: bold;
        color: white;
        font-size: 17px;
        top: 120px;
    }
    div.investmentPerformance {
        position: absolute;
        font-weight: bold;
        color: white;
        font-size: 16px;
        top: 130px;
        left: 628px;
    }
    div.accumulated {
        color: white;	
    }
    div.accumulated span {
        float: left;
        font-size: 10px;
        font-weight: bold;	
    }
    div.accumulated span.conservative {
        margin: 0px 0px 0px 110px;

    }
    div.accumulated span.balanced {
        margin: 0px 0px 0px 55px;
    }
    div.accumulated span.progressive {
        margin: 0px 0px 0px 50px;
    }
    table.performanceRightInfo {
        width: 330px;
        margin: 10px 0px 0px 20px;
    }
    div.performanceTopRight {
        color: #FFFFFF;
        height: 264px; 
        padding: 10px;
        background:  url('./graphic-images/selected-perf-top-right-block.png');
        background-repeat: no-repeat;
    }

    div.performanceBottomRight {
        color: #FFFFFF;
        height: 205px;
        margin-top: 1px;
        padding: 10px;
        background:  url('./graphic-images/selected-perf-bottom-right-block.png');
        background-repeat: no-repeat;
    }
}

@media screen and (max-width: 990px) {

    .layout2 { left:25px; width: 90%; }
    span.bottom-ruler {
        width:83%;
    }
    span.left-ruler {

        margin: 2px 0 0 -1px;

    }

    span.h-MiniLine {

        margin-left: 1px;

    }
}

@media screen and (max-width: 900px) { 
    span.bottom-ruler {
        width:80%;
    }
	span.leftRuler { padding-bottom: 6px;}
}
@media screen and (max-width: 801px){


    div#pointy3 {
        background-image: url('./graphic-images/point-blue-middle-y.gif');
        color: #000;
        margin-left: 3px;
    }

    div#pointy2 {
        background-image: url('./graphic-images/point-orange-middle-y.gif');
        color: #FA7900;
        z-index: 20;
        position: absolute;
    }
}

@media screen and (max-width: 800px){

  
    .profit-label {  font-size:8px;  color:#fff;  position:absolute; bottom:35px; }

    .signal-label { font-size:9px;  color:#fff; position:absolute; bottom:45px;  }



  
    .layout2 { width: 95%; height: 68%; position: absolute; bottom: 5px; left: 5px; z-index: 3 }

    span.bottom-ruler {
        width:85%;
    }

    #point0, #point1, #pointy0, #pointy1 { margin-top: 0; } 
	div#pointy2, div#pointy3 { margin-left: 0px; } */


   


}
@media screen and (max-width: 620px) {

	 #placeholder-small .y_label{font-size: 7px; margin-top:-3px;}
	/*div#pointx0 {
		margin-left:-13px;
	}
	
	div#pointx1 {
		margin-left:-16px;
	} */

    .greenBlSector {
        margin-top:1px;

    } 

    .redBlSector {
        margin-top:1px;

    }

    span.left-ruler {
        position: absolute;
        height: 75.5%;
        width: 1px;
        margin: 5px 0 0 -2px;
        background-color: #fff;
    }

    div.tickLabel {
        line-height: 7px;
        color: white;
        font-family: neo-sans;
        font-size: 6px;
        padding-bottom: 9px; 
        padding-top: 3px;
    }

    .layout2 div.tickLabel {
        line-height: 7px;
        color: white;
        font-family: neo-sans;
        font-size: 5px;
        padding-bottom: 9px;
        padding-top: 3px;
    }

    span.leftRuler{
        margin-top:0;
        padding-bottom: 5px;
    }
    .bottomRuler{
        margin-top: 5px;
    }
    .highMiniLine{
        margin-top: 5px;
    }

    span.h-MiniLine {
        height: 1px;
        width: 2px;
        background-color: #fff;
        margin: 3px 0 0 2px;
        position: absolute;
    }

    span.v-MiniLine {

        background-color: #fff;
        margin: -9px 0 0 -15px;
        position: absolute;
    }

    span.bottom-ruler {
        background-color: #fff;
        margin: 3px 0 0 -1px;
        width:82%;

    }

    span.left-ruler {
        position: absolute;
        height: 76%;
        width: 1px;
        margin: 5px 0 0 -2px;
        background-color: #fff;
    }

}

@media screen and (max-width: 480px) {


    span.highMiniLine {
        height:2px;	

    }

    span.v-MiniLine {
        height:2px;
        margin: -5px 0 0 -15px;
    }

    span.bottom-ruler {
        background-color: #fff;
        margin: 3px 0 0 -1px;
        width:78%;

    }

    span.left-ruler {
        position: absolute;
        height: 77%;
        width: 1px;
        margin: 5px 0 0 -2px;
        background-color: #fff;
    }
	
	#layout1 {
		bottom: 0px;
		width: 93%;
	}
	 
}

@media screen and (max-width: 360px) {

    #placeholder div.big-graphic-date {font-size: 7px;}
    #placeholder .big-graphic-price { font-size: 7px !important;}
    #placeholder-small span.small-graphic-date { font-size: 6px; }

    
    #layout1 {
        height: 68%;
        width: 90%;
    }
	
	#layout1 {
		width: 93%;
        height: 68%;
		position:absolute;
		left: 19px;
		bottom: 0px;
	}

	#placeholder { width:100%; height:100%;}

    span.bottom-ruler {
        background-color: #fff;
        margin: 3px 0 0 -1px;
        width:71%;
    }
	span.left-ruler { margin-top:0; padding-bottom:4px; }
	span.leftRuler { padding-bottom: 2px;}

    .layout2 { margin-left: 5px; height: 60%; }

    .profit-label {  font-size:6px;  color:#fff;  position:absolute; bottom:28px; width: 120px; text-align: center }
    .signal-label { font-size:7px;  color:#fff; position:absolute; bottom:35px; width: 120px; text-align: center }
}



