/************************************************************************************************/
/************************************************************************************************/
/****  CSS Page Setup Definition for small layout ************** 
***************************************************************/

/**(1)****************  background-image: url(../images/png/main/site_bg_body.png); **************/
.container { width: 930px; }



/**(2)************************  Header Setup Definition small for 500px  *******************/
header { 
	height: 64px;
	background: url(../images/png/headingbuttons/respheads/tye_1220_64_hd_plain.png) no-repeat left 0px;
}
header .hdlogo {
	width: 220px;
	height: 44px;
	top: 0px;
	left: 20px;
	background-image: url(../images/png/headingbuttons/respheads/tye_logo_1220.png);
}
header a.logout {
	width: 60px;
	height: 18px;
	top: 6px;
	left: 620px;
	background-image: url(../images/png/headingbuttons/respheads/logout_btn_medium60.png);
}

header .myPic9090 { width: 56px; height: 56px;
					background-size: cover; margin-right: auto; margin-left: auto; position: relative; float:left; z-index: 10;	
					top: 4px; left: 750px; }
header .myPic9090 img { width: auto; height: 100%; object-fit: contain; }

header .myPic100100 { width: 63px; height: 63px;
					background-size: cover; margin-right: auto; margin-left: auto; position: relative; float:left; z-index: 10;	
					top: 0px; left: 750px; }
header .myPic100100 img { width: auto; height: 100%; object-fit: contain; }

header a.search {
	width: 60px;
	height: 18px;
	top: 6px;
	left: 670px;
	background-image: url(../images/png/headingbuttons/respheads/search_btn_medium60.png);
}
header .Search_textfield {  border: 0;
							width:  300px;
						 	height: 18px;
						 	top: 6px;
						 	left: 355px;
						 	font-size: 14px;
						  	text-align:center; }
header .Search_selectList {  border: 0;
							width:  400px;
						 	height: 180px;
						 	top: 6px;
						 	left: 255px;
						 	font-size: 14px;
						  	text-align:left; 
						  	z-index:30;
}
	
						  	
/*************** comments ----------------------------------OLD code for small size units

header a.logout_OLD {
	width: 40px;
	height: 12px;
	top: 7px;
	right: 1470px;
	background-image: url(../images/png/main/respheads/logout_btn_small40.png);
}
header a.search_OLD {
	width: 40px;
	height: 12px;
	top: 7px;
	right: 1520px;
	background-image: url(../images/png/main/respheads/search_btn_small40.png);
}
header .Search_textfield_OLD {  border: 0;
							width:  200px;
						 	height: 12px;
						 	top: 7px;
						 	right: 1565px;
						 	font-size: 10px;
						  	background-color:#DDFFDD; 
						  	color: #664C00; 
						  	text-align:center; }
end of comments */



/**(3)***************** Navigational Menu Definition small sites ******************/
             /*** Nav menu Definition for items on the header board itself ***/
#topnavhd_wrapper  		 { top: 40px; padding: 0px; }

#navmenuhd, .sub1, .sub2 { list-style-type:none; line-height:20px; z-index:10; }

#topnavhd ul li a    { float:left; padding:0px 20px; color:#ffff00; font-size:14px; font-weight:normal; }
#topnavhd ul ul      { display:none; position:absolute; background-color:#95bf39; left:-1px; top:20px; width:262px; }
#topnavhd ul ul li   { display:block; text-align:left; width:262px; }
#topnavhd ul ul li a { width:220px; }
.darrowhd            { font-size:11pt; position:absolute; top:2px; color:#FFF; }


             /*** Nav menu Definition that are not designed for inside the header board ***/
nav ul#navmenu { width:930px; }
nav ul#navmenu, ul.sub1, ul.sub2 { list-style-type:none; line-height:20px; z-index:10; }
nav #topnav ul li a    { float:left; padding:0px 20px; color:#ffff00; font-size:14px; font-weight:normal; }
nav #topnav ul ul      { display:none; position:absolute; background-color:#95bf39; left:-1px; top:20px; width:262px; }
nav #topnav ul ul li   { display:block; text-align:left; width:262px; }
nav #topnav ul ul li a { width:220px; }
nav .darrow            { font-size:11pt; position:absolute; top:2px; color:#FFF; }



/*********** This nav code is not been used for now. to use, it needs to be define on the home page */
/*
nav { 
	position: static;
	padding 10px 0px 10px 0px;
	background-color: #515673;
}

nav a {
	color:#a6abc5;
	display: block;
	margin: 15px;
	padding: 9px;
	border: 1px solid #a6abc5;
	background: url(../images/png/main/respnav/mobile_link_arrow.png) no-repeat right center;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
}
nav a:hover { color: #fff; background-color: rgba(255,255,255,.15); }

footer { border top: 1px solid #a6abc5; }

******* End of not been used codes */

/* body { background-image: none; } */




/**(4)******************  Background decoration Definition for 500px  **********************/
.bg_main_frontPage		{ width: 930px; }
.bg_main 				{ width: 930px; }
.fg_main 				{ width: 930px; }
.bg_container_main 		{ background-image: url(../images/png/main/bg_container_400x123.png); width: 400px; height: 123px; }

.s2 { margin-right: 14px; }
.imgbackground_insideBAR		{ margin-left: 10px; }
.outerimgbackground  			{ height: 13000px; }
.outermusicbackground  			{ height: 6500px; }
.outervideobackground  			{ height: 3250px; }
.outernavbackground_halfApage  	{ height: 900px; }
.outernavbackground_1page		{ height: 1660px; }
.outernavbackground_1page .p2	{ font-size: 13pt; }

.innernavbackground		    { width:90%; }

.bg_container 			{ width: 380px; }
.bg_container_sm 		{ width: 340px; margin-left: 40px; }
.content_framesGroup  	{ width:440px; height: 123px; }
.content_ijebu  		{ width:440px; margin-left: 0px; }

.crawlerMarq1Ads   { width: 410px; top: 209px; }
.crawlerMarq2Ads   { width: 410px; top: 274px; }
/* .crawlerMarq3Ads { width: 410px; top: 339px; } */
.crawlerMarq3Ads   { width: 410px; top: 622px; }
.crawlerMarqTxt    { top: 547px; }
.advGeneratorTxt   { top: 630px; left: 420px; }
.crawlerMarq1 	   { width: 410px; }
.crawlerMarq1 img  { width: 22.2%; }

/*************************  Two columns display div  *************************************************/
.wrapperTwoC { margin-left: 200px; }
.sidebarTwoC { width: 200px; margin-left: -200px; }


/************************** This is the ProductBox Definitions ********************************/
/************************* The .productbox_main is used in conjuction with the footer_main on the main home page. ****************************/
/************************* (930 - 750) / 4 = 45 ;  (930 - 45) = 885;   *******************************/
.productbox_main					{ width: 930px; }
.productboximagescolumnframes 		{ width: 885px; margin-left: 45px; }

.productboximagecolumns				{ margin: 0px 45px 0px 0px; }




/**(5)************************  Slider Two Definition  ************************/
#slider2_wrapper { height:123px; width:400px; }
#prev_slider2 {
	height:123px;
	width:40px;
}
#next_slider2 {
	height:123px;
	width:40px;
}
#slider2 { height:123px; width:400px; }
#slider2 img { min-height:123px; }



/**(5B)***************************  Spinner  Definition  **************************/
.spinner {
    top:          126px;
    left:         42px;
}



/**(6)************************  Decoration Definition Front Page Only **********************/
.lower_bar_10       { width: 930px; top: 569px; }
.lower_bar_viewcode { width:  930px; top: 523px; }
.viewCodeClass      {  top: 522px; left: 50px; }
.lower_bar          { height: 30px; }


.advbar_swallow {
	background-image: url(../images/png/main/tye_advbar_100px_sl.png);
	width: 530px;
	height: 100px;
	top: 594px;
 	left: 400px;
  	}


	
	
/*(7)**********************  Page Content Frame Head Setup Definition for site from 1024px down  **********************/
.pagecontentframeAcolor { width:100%; background-color:#DDFFDD; border:1px solid #444C00; }
#pagecontentframeAtop 	{ width:100%; height: 60px; background-color:#444C00; border:1px solid #444C00; text-align: center; padding:5px 0px 0px 0px; color:#ffffcc; }

.pagecontentframebcolor  { width:1000px; background-color:#DDFFDD; border:1px solid #444C00; }
#pagecontentframetop 	 { width:970px; height: 30px; background-color:#444C00; border:1px solid #444C00; text-align: center; padding:5px 0px 0px 30px; color:#ffffcc; }
#pagecontentframetopR 	 { width:970px; height: 30px; background-color:red; border:1px solid red; text-align: center; padding:5px 0px 0px 30px; color:#fffffc; }
#pagecontentframetopO 	 { width:970px; height: 30px; background-color:orange; border:1px solid orange; text-align: center; padding:5px 0px 0px 30px; color:#ffffcc; }
#pagecontentframetopY 	 { width:970px; height: 30px; background-color:yellow; border:1px solid yellow; text-align: center; padding:5px 0px 0px 30px; color:#ffffcc; }
#pagecontentframetopGold { width:970px; height: 30px; background-color:#664C00; border:1px solid #664C00; text-align: center; padding:5px 0px 0px 30px; color:#ffffcc; }
#pagecontentframetopB 	 { width:970px; height: 30px; background-color:blue; border:1px solid #664C00; text-align: center; padding:5px 0px 0px 30px; color:#ffffcc; }

#pagecontentframetopPLAN_A  { width:970px; height: 30px; background-color:#fffffa; border:1px solid #664C00; text-align: center; padding:5px 0px 0px 30px; color:#202340; }
#pagecontentframetopPLAN_B  { width:970px; height: 30px; background-color:#ffefff; border:1px solid #664C00; text-align: center; padding:5px 0px 0px 30px; color:#202340; }
#pagecontentframetopPLAN_C  { width:970px; height: 30px; background-color:#eeffff; border:1px solid #664C00; text-align: center; padding:5px 0px 0px 30px; color:#202340; }
#pagecontentframetopPLAN_D  { width:970px; height: 30px; background-color:#eeffee; border:1px solid #664C00; text-align: center; padding:5px 0px 0px 30px; color:#202340; }
#pagecontentframetopPLAN_E  { width:970px; height: 30px; background-color:#eeeeee; border:1px solid #664C00; text-align: center; padding:5px 0px 0px 30px; color:#202340; }
#pagecontentframetopPLAN_F  { width:970px; height: 30px; background-color:#ffeeee; border:1px solid #664C00; text-align: center; padding:5px 0px 0px 30px; color:#202340; }
#pagecontentframetopPLAN_PP { width:970px; height: 30px; background-color:#ffffcc; border:1px solid #664C00; text-align: center; padding:5px 0px 0px 30px; color:#202340; }

*************/


/*(8)************************  Text Decoration Over Images all sites  *******************************/
.site_types_s {	width: 500px; }
.left_pic     { margin-left: 25px; padding: 0px 0px 20px 0px; }
.middle_pic   { margin-left: 25px; padding: 0px 0px 20px 0px; }
.right_pic    { margin-left: 25px; }
.outer_middle { margin-left: 25px; padding: 0px 0px 20px 0px; }
.outer_right  { margin-left: 25px; }



/*(9)****************  Products/Types Headings Text Code Definition  *********************/ 
/** NOTE: The width used here is set for the whole width of the small size width of 500px  **/
.productTypes h1 { width:500px; }
.productTypes p  { text-align: left; font-size:36px; padding: 0.5em 0px; width:500px; margin-left: 20px; margin-right: 0px;  }



/*(10)**************  Gallery Frames Headings Text Code Definition  *************/ 
/** NOTE: The width used here is set for the whole width of the small size width of 500px  **/
.framesTypes h1	{ width:500px; margin-left: 0px; margin-right: 0px; }




/*(11)*********************  Background Page Video Media Setup Definition  **********************/
.videoClass {
  width: 340px; height: 226px;
}



/**(Last)*****************  Footers Setup Definition  Small  ******************/
.footerMain 	{ top: 609px; }
.tyeSloganMain  { top: 589px; }


/*
 **********  END of Definitions  ********** 
 ******************************************
*/