@charset "utf-8";
/* element like div  is element selector element.element qualified element selector # is id selector and
 . is class selector
    div > p where div is parent */
/* use hdrimg max-width to control size, add bean getter to supply to css using el  */

/* This CSS is for layout only and layout ie width etc will be controlled by jquery using skin as a guide
   Fonts, color etc will be controlled via xxx.skin.properties in resource directory (do not use theme.css anymore)
   Home (visitor ie landing page) can become single page using jquey plugin say smint news-1.xhtml,about etc can be incude in home.xhtml
   jquery will be used rather than jsf render to make the page responsive. jsf h:link may be a quick alternative to use but not smooth
   flat design will be used at least for the landing page, googlw web fonts and jquery scrolltop or stint
   expolre for mobile left and right width 100% using jquery css modify to make it single column, also use truefalse to use xxxless.xhtml
   this is a static css, so cannot apply dynamic changes here but can apply on .xhtml using style
   rtemplate.xhtml overrides left,right and footer using style and based on hide left or not using skinbean
*/ 


html {
	margin: 0px;
	padding: 0% 0%;
        outline: 0px solid white;
}

#page {
padding:10px;background-color:#{a4jSkin.generalBackgroundColor};position: relative; left: 0; top: 0;      

}
#hdrbkdiv {width: 100%;height: 200px; outline: 0px solid blue;"
}

#hdrbkimg {width: 100%;height: 200px; outline: 0px solid blue;
}
#hdrbkimgm {width: 100%;height: 200px; outline: 0px solid blue;
}

.asisbkimg {width: 100%;height: 100%; outline: 0px solid blue;
}

#header {
width: 100%;max-height: 200px; outline: 0px solid yellow;      

}

#hdrimg {
float:left;height:auto; width:auto;max-width: 25%;max-height:180px;outline: 0px solid white;padding-left:.5%;padding-top:.5%;padding-bottom:.5%;padding-right:.5%;position:absolute;left: 0px; top: 10px;margin:auto;
}

#hdrimgm {
float:left;height:auto; width:auto;max-width: 25%;max-height:180px;outline: 0px solid white;padding-left:.5%;padding-top:.5%;padding-bottom:.5%;padding-right:.5%;position:absolute;left: 0px; top: 10px;margin:auto;
}

/* for more flexibity,no text align here, actual html text should have it  */
#hdrtxt2 {
float:right;width: 56%;max-height:200px;outline: 0px solid blue;padding-left:0%;padding-top:5%;padding-bottom:5%;padding-right:0%;position:absolute;left: 0; top: 0;text-align: right; 

}
#left {
float: left; width: 0%;min-height: 510px; outline: 1px solid white;padding:0%;background-color:#{a4jSkin.tableSubHeaderBackgroundColor};
}
#right {
float: left; width: 100%; min-height: 510px; outline: 0px solid green; padding-bottom:0%;background-color:#{a4jSkin.generalBackgroundColor};
}
#footer {
float: left;width: 100%;height: auto; outline: 1px solid white;padding:0%;background-color:#{a4jSkin.tableSubfooterBackgroundColor};  

}

.hdrLink { color:#2F4F4F; }

.buttonMain {
margin:5px; height: 30px;font-weight: bold;color:#{a4jSkin.hoverLinkColor}; border-radius: 0px; !important;font-size: 20px;
}
.buttonMainSq {
margin:5px; height: 30px;font-weight: bold;color:#{a4jSkin.hoverLinkColor}; border-radius: 0px; !important; font-size: 20px;
}
.buttonMainRd {
margin:5px; height: 30px;font-weight: bold;color:#{a4jSkin.hoverLinkColor}; border-radius: 10px; !important; font-size: 20px;
}
.button {
margin:5px; height: 25px;font-weight: bold;color:#{a4jSkin.hoverLinkColor}; border-radius: 5px; !important;font-size: 14px;
}
.fb-like{
margin:5px; height: 30px;color:#{a4jSkin.tableHeaderTextColor}
}
.fb-send{
margin:10px; height: 10px;color:#{a4jSkin.tableHeaderTextColor}
}
.message {
	border: 1px solid #FFCC00;
	padding: 2px;
	margin-top: 2px;
	margin-bottom: 2px;
	background-color: #F0F8FF;
	font-size: 14px;
}
.messageM {
	border: 1px solid #FFCC00;
	padding: 2px;
	margin-top: 2px;
	margin-bottom: 2px;
	background-color: #F0F8FF;
	font-size: 18px;
}
.messageL {
	border: 1px solid #FFCC00;
	padding: 2px;
	margin-top: 2px;
	margin-bottom: 2px;
	background-color: #F0F8FF;
	font-size: 22px;
        word-wrap: break-word;
        overflow: hidden;
}

@media only screen and (min-width:768px) and (max-width: 991px) {
    #left {
        width:0;
    }
}
@media only screen and (min-width:200px) and (max-width: 500px) {
    .r3mobile {
        width:100% ;
    }
}

@media only screen and (min-width:500px) and (max-width: 1500px) {
    .r3mobile {
        width:100%;
    }
}

@media only screen and (min-width:200px) and (max-width: 1920px) {
    .r3mobilet {
        width:30%;
    }
}


@media only screen and (min-width:200px) and (max-width: 500px) {
    .r3mobile130 {
        width:130% ;
    }
}
@media only screen and (min-width:500px) and (max-width: 1500px) {
    .r3mobile130 {
        width:130% ;
    }
}

@media only screen and (min-width:200px) and (max-width: 500px) {
    .r3table30 {
        width:30%;
    }
}

@media only screen and (min-width:200px) and (max-width: 550px) {
    .r3nomobile {
      display: none;  
    }
}
@media only screen and (min-width:500px) and (max-width: 1920px) {
    .r3nodesk {
      display: none; 
    }
}



@media only screen and (min-width:200px) and (max-width: 500px) {
    .r3table, .r3thead, .r3tbody, .r3tfoot, .r3tr, .r3th, .r3td {
      display: block;
    }
}