@charset "utf-8";
/*****************************************************
* CSS information
* file name：index.css
*****************************************************/

#headline {
	background-image: url(../../img/cmn/marque.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	height: 50px;
	width: 980px;
	margin-top: 0px;
}
#headline marquee {
	padding-top: 7px;
	margin-right: 15px;
	margin-left: 95px;
}
#headline ul {
	margin: 0px;
	padding: 0px;
}
#headline li {
	display: inline;
	padding-right: 20px;
}
#rank_univ h2 {
	margin-bottom: 10px;
}
#rank_univ li {
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #CCCCCC;
	margin-left: 8px;
	_border-bottom-color: #eeeeee;
	_border-bottom-style: solid;
	line-height: 220%;
}
#rank_univ dl {
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #CCCCCC;
	margin-left: 8px;
	_border-bottom-color: #eeeeee;
	_border-bottom-style: solid;
	line-height: 220%;
	clear: both;
}
#rank_univ dt {
	float: left;
}
#rank_univ dd {
	display: block;
	text-align: right;
}
#rank_univ .rank1 {
	background-image: url(../../img/cmn/rank1.jpg);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 30px;
}
#rank_univ .rank2 {
	background-image: url(../../img/cmn/rank2.jpg);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 30px;
}
#rank_univ .rank3 {
	background-image: url(../../img/cmn/rank3.jpg);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 30px;
}
#rank_univ .rank4 {
	background-image: url(../../img/cmn/rank4.jpg);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 30px;
}
#rank_univ .rank5 {
	background-image: url(../../img/cmn/rank5.jpg);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 30px;
}
#rank_univ .rank1 em {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 18px;
	color: #FF3300;
	font-weight: bold;
	padding-left: 10px;
}
#rank_univ .rank2 em,
#rank_univ .rank3 em {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 18px;
	color: #999999;
	font-weight: bold;
	text-align: right;
	padding-left: 10px;
}
#rank_univ .cost {
	background-image: url(../../img/cmn/icon_cost.jpg);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 25px;
}
#rank_univ .cost_num em {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 18px;
	font-weight: bold;
	color: #666666;
	padding-right: 4px;
}
#rank_univ .co {
	background-image: url(../../img/cmn/tiny_co.jpg);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 25px;
}
#rank_univ .boy {
	background-image: url(../../img/cmn/tiny_boy.jpg);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 25px;
}
#rank_univ .girl {
	background-image: url(../../img/cmn/tiny_girl.jpg);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 25px;
}
#rank_univ .icon {
	background-image: url(../../img/cmn/icon.jpg);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 10px;
}
#advicer h3 {
	float: left;
	padding-left: 8px;
	margin-top: 15px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
#advicer ul {
	margin-top: 15px;
	padding-left: 80px;
	_margin-top: 22px;
}
#advicer li {
	font-size: 12px;
}
#advicer .title {
	font-size: 14px;
}
#advicer hr {
	clear: both;
}
#advicer dl {
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #CCCCCC;
	_border-bottom-color: #eeeeee;
	_border-bottom-style: solid;
	line-height: 220%;
	padding-left: 8px;
}
#advicer dt {
	float: left;
	padding-right: 8px;
}
#advicer dd {
	font-size: 11px;
	padding-top: 1px;
}
#advicer .man {
	background-image: url(../../img/cmn/tiny_papa.jpg);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 24px;
}
#advicer .woman {
	background-image: url(../../img/cmn/tiny_mama.jpg);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 24px;
}
#sch_region {
	background-color: #0099CB;
	margin-top: 10px;
	margin-right: 4px;
	margin-bottom: 10px;
	margin-left: 4px;
	position: relative;
	top: 0px;
	bottom: 0px;
	height: 361px;	
}
#info ol,
#information ol{
	margin-top: 15px;
	margin-right: 8px;
	margin-bottom: 8px;
	margin-left: 8px;
}
#info li,
#information li {
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #CCCCCC;
	_border-bottom-color: #eeeeee;
	_border-bottom-style: solid;
	line-height: 200%;
}
#info strong {
	color: #FFFFFF;
	background-color: #E76CAD;
	font-size: 11px;
	font-weight: normal;
	padding-top: 0px;
	padding-right: 4px;
	padding-bottom: 0px;
	padding-left: 4px;
}
#information strong {
	color: #FFFFFF;
	background-color: #006699;
	font-size: 11px;
	font-weight: normal;
	padding-top: 0px;
	padding-right: 4px;
	padding-bottom: 0px;
	padding-left: 4px;
}

#pano {
	height: 250px;
	width: 504px;
	position: absolute;
	left: 4px;
	top: 73px;
}
#sch_region ul {
	position: absolute;
	top: 4px;
	left: 4px;
}
#sch_region li {
	display: inline;
	float: left;
	padding-right: 4px;
	_padding-right: 3px;
}
#sch_region p {
	position: absolute;
	top: 200px;
	right: 10px;
}
#sch_region table {
	width: 503px;
	background-color: #FFFFFF;
	position: absolute;
	left: 4px;
	top: 328px;
}
#sch_region th {
	border-top-color: #0099CB;
	border-right-color: #0099CB;
	background-color: #EAFAFF;
	border-top-width: 1px;
	border-right-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	font-weight: normal;
	padding-top: 2px;
	padding-right: 4px;
	padding-bottom: 2px;
	padding-left: 4px;
	text-align: center;
}
#sch_region td {
	border-top-color: #0099CB;
	border-right-color: #0099CB;
	border-top-width: 1px;
	border-right-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	padding-top: 2px;
	padding-right: 4px;
	padding-bottom: 2px;
	padding-left: 4px;
	font-size: 12px;
	text-align: center;
}
#sch_region .kantou a:link {
	background-image: url(../../img/btn/kantou_r.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	display: block;
	height: 66px;
	width: 165px;
}
#sch_region .kantou a:visited {
	background-image: url(../../img/btn/kantou_r.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	display: block;
	height: 66px;
	width: 165px;
}
#sch_region .kantou a:hover {
	background-image: url(../../img/btn/kantou.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	display: block;
	height: 66px;
	width: 165px;
}
#sch_region .kansai a:link {
	background-image: url(../../img/btn/kansai_r.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	display: block;
	height: 66px;
	width: 165px;
}
#sch_region .kansai a:visited {
	background-image: url(../../img/btn/kansai_r.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	display: block;
	height: 66px;
	width: 165px;
}
#sch_region .kansai a:hover {
	background-image: url(../../img/btn/kansai.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	display: block;
	height: 66px;
	width: 165px;
}
#sch_region .kitakantou a:link {
	background-image: url(../../img/btn/kitakantou_r.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	display: block;
	height: 66px;
	width: 165px;
}
#sch_region .kitakantou a:visited {
	background-image: url(../../img/btn/kitakantou_r.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	display: block;
	height: 66px;
	width: 165px;
}
#sch_region .kitakantou a:hover {
	background-image: url(../../img/btn/kitakantou.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	display: block;
	height: 66px;
	width: 165px;
}
#sch_photo dl {
	float: left;
	width: 160px;
	padding-left: 10px;
	text-align: center;
	font-size: 11px;
	margin-top: 10px;
}
#sch_photo dd {
	font-size: 11px;
	margin-top: -6px;
}
#sch_photo dt {
	padding-bottom: 6px;
	_padding-bottom: 10px;
}
#sch_photo p {
	margin-top: 15px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 20px;
}
#sch_photo dfn {
	display: block;
	text-align: center;
	padding-top: 15px;
	clear: both;
}
#sch_photo hr {
	clear: both;
}
#keyword ul {
	margin-left: 15px;
}
#keyword li {
	display: inline;
	padding-right: 10px;
	line-height: 200%;
}
#keyword p {
	margin-top: 20px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 10px;
}
#keyword .level1 {
	font-size: 11px;
	color: #0099CC;
}
#keyword .level2 {
	font-size: 12px;
	color: #006699;
}
#keyword .level3 {
	font-size: 13px;
	color: #0099CC;
}
#keyword .level4 {
	font-size: 14px;
	font-weight: bold;
	color: #006699;
}
#keyword .level5 {
	font-size: 15px;
	font-weight: bold;
	color: #0099CC;
}
#keyword .level6 {
	font-size: 16px;
	font-weight: bold;
	color: #006699;
}
#contents .entry {
	float: left;
	width: 150px;
	margin-left: 10px;
	margin-right: 10px;
	_margin-right: 0px;
	margin-top: 35px;
	margin-bottom: 20px;
}
#contents .entry .tiny_co {
	background-image: url(../../img/cmn/tiny_co.jpg);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 25px;
	font-size: 11px;
	height: 20px;
	display: block;
}
#contents .entry .tiny_girl {
	background-image: url(../../img/cmn/tiny_girl.jpg);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 25px;
	font-size: 11px;
	height: 20px;
	display: block;
}
#contents .entry .tiny_boy {
	background-image: url(../../img/cmn/tiny_boy.jpg);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 25px;
	font-size: 11px;
	height: 20px;
	display: block;
}
#contents .entry h3 {
	margin: 0px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #CCCCCC;
	_border-bottom-color: #eeeeee;
	_border-bottom-style: solid;
}
#contents .entry p {
	margin-top: 6px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
#contents td {
	vertical-align: top;
}
#contents address {
	background-color: #E4F5FA;
	margin-right: 8px;
	margin-left: 8px;
	font-size: 12px;
	padding-left: 10px;
	margin-bottom: 10px;
}
#sch_list table {
	width: 100%;
	border: 4px solid #62D8FF;
}
#sch_list th {
	border-top-width: 1px;
	border-right-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-top-color: #62D8FF;
	border-right-color: #62D8FF;
	font-weight: normal;
	padding-top: 2px;
	padding-right: 4px;
	padding-bottom: 2px;
	padding-left: 4px;
	background-color: #EAFAFF;
}
#sch_list td {
	border-top-width: 1px;
	border-right-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-top-color: #62D8FF;
	border-right-color: #62D8FF;
	padding-top: 2px;
	padding-right: 4px;
	padding-bottom: 2px;
	padding-left: 4px;
}
#banner {
	margin-top: 8px;
	margin-bottom: 10px;
}
#sitemap dl {
	float: left;
	width: 180px;
	margin-left: 10px;
	margin-right: 5px;
	height: 100px;
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #CCCCCC;
	_border-bottom-color: #eeeeee;
	_border-bottom-style: solid;
	padding-top: 4px;
	margin-top: 20px;
	line-height: 150%;
}
#sitemap dt {
	font-weight: bold;
}
#sitemap dd {
	font-size: 11px;
}
#sitemap h3 {
	clear: both;
	background-color: #E4F5FA;
	padding: 3px;
}
#special {
	background-image: url(../../img/cmn/special_t.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	width: 520px;
	margin-bottom: 15px;
	position: relative;
	left: 0px;
	top: 0px;
	padding-top: 119px;
}
#special .new {
	padding-left: 20px;
	background-image: url(../../img/cmn/special_m.jpg);
	background-repeat: repeat;
	margin-top: 0px;
}
#special dfn {
	display: block;
	background-image: url(../../img/cmn/special_b.jpg);
	background-repeat: no-repeat;
	background-position: left bottom;
}
#special dl {
	clear: both;
}
#special dt {
	font-size: 11px;
	color: #FFFFFF;
	background-color: #FF6600;
	display: inline;
	margin-right: 10px;
	padding-right: 4px;
	padding-left: 4px;
}
#special dd {
	display: inline;
	padding-right: 6px;
}
#special p {
	position: absolute;
	top: 150px;
	right: 15px;
}
#mentor #blog {
	margin-bottom: 20px;
}
#mentor #blog  h2 {
	margin-bottom: 20px;
}
#mentor #blog dl {
	line-height: 150%;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #CCCCCC;
	margin-bottom: 4px;
	padding: 5px;
	clear: both;
	height: 20px;
}
#mentor #blog dl:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
#mentor #blog dt {
	float: left;
	padding-right: 10px;
}
#mentor #blog dt strong {
	color: #FFFFFF;
	background-color: #E76CAD;
	font-size: 11px;
	font-weight: normal;
	padding-top: 0px;
	padding-right: 4px;
	padding-bottom: 0px;
	padding-left: 4px;
}
#mentor #blog .date {
	font-size: 11px;
	float: left;
}
#mentor #blog .title {
	float: left;
	padding-right: 10px;
}
#mentor #blog .author {
	font-size: 11px;
}


#mentor #quest h2 {
	margin-bottom: 20px;
}
#mentor #quest dl {
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #CCCCCC;
	margin-bottom: 8px;
}
#mentor #quest dl:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
#mentor #quest dt {
	background-image: url(../../scg/img/icon/q.jpg);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 35px;
	padding-top: 3px;
	padding-bottom: 3px;
}
#mentor #quest .answer{
	background-image: url(../../scg/img/icon/a.jpg);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 35px;
	padding-top: 3px;
	padding-bottom: 3px;
}
#mentor #quest .author {
	font-size: 11px;
	padding-left: 35px;
	float: left;
	padding-right: 10px;
}
#mentor #quest .room {
	font-size: 11px;
}
#mentor #pickup .left{
	float: left;
	width: 175px;
	margin-right: 10px;
	margin-left: 10px;
}
#mentor #pickup {
	margin-bottom: 10px;
}
#mentor #pickup h3 {
	margin-left: 10px;
	padding: 0px;
	margin-top: 15px;
	margin-right: 0px;
	margin-bottom: 10px;
	color: #006699;
}
#mentor #pickup p {
	margin: 0px;
	font-size: 11px;
	line-height: 150%;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 6px;
	padding-left: 0px;
	color: #666666;
}
#mentor #pickup ul {
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 195px;
}
#kansai {
	background-image: url(../../img/landing/bg.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	padding: 0px;
	height: 834px;
	width: 740px;
	position: relative;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 20px;
	margin-left: 0px;
	float: right;
}
#kansai p{
	margin: 0px;
	padding: 0px;
}
#kansai .mentor {
	position: absolute;
	left: 549px;
	top: 599px;
}
#kansai .regi {
	position: absolute;
	left: 180px;
	top: 713px;
}
#kansai #block1 {
	position: absolute;
	left: 16px;
	top: 445px;
	width: 325px;
}
#kansai #block1 dl {
	font-size: 12px;
	width: 330px;
	line-height: 260%;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #CCCCCC;
}
#kansai #block1 dt {
	float: left;
	width: 80px;
}
#kansai #block2 {
	position: absolute;
	left: 394px;
	top: 445px;
	width: 328px;
}
#kansai #block2 dl {
	font-size: 12px;
}
#kansai #block2 dl :after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
#kansai #block2 dt {
	float: left;
	width: 50px;
}
#kansai #block2 dt {
}


/*--------------------------------------
Info Module
---------------------------------------*/
 div#frame-info{
	margin: 0;
	width: 220px;
	height: 500px;
	text-align: left;
	overflow: hidden;
	}
	
	div#frame-info div#whatsnew{
	display: inline;
	float: left;
	margin: 0px 0px 0px 0px;
	width: 220px;
	height: 495px;
	overflow: auto;
		}
	div#whatsnew div#mycustomscroll{
	margin: 3px 0px 0 0px;
	width: 215px;
	height: 485px;
	overflow: hidden;
			}

/*-----------------------------------
#mycustomscroll
---------------------------------- */
#mycustomscroll .scrollgeneric {
line-height: 1px;
font-size: 1px;
position: absolute;
top: 0; left: 0;
}

/* For scrollbars, defining a color for background alongside with an image 
is always a good idea, this way the scrollbars are visible until images load */
#mycustomscroll .vscrollerbase {
/* vscrollerbase is the div that holds the scrollbar (parent of vscrollerbar) */
width: 15px;
background-color: white;
}

#mycustomscroll .vscrollerbar {
width: 15px;
background-color: black;
}

#mycustomscroll .hscrollerbase {
/* hscrollerbase is the div that holds the scrollbar (parent of hscrollerbar) */
height: 15px;
}

#mycustomscroll .hscrollerbar {
height: 15px;
}

/* basic style ends here, this was actually all that is required to run fleXcroll,
albeit without images, my advice is to have this basic style and build the rest
on top of this. */


/* styles for scrollbar images start here */

#mycustomscroll .hscrollerbar {
/* Main body of horizontal scrollbar */
}

#mycustomscroll .vscrollerbar {
/* Main body of vertical scrollbar */
background: url(../../img/cmn/scroll.gif) -15px 0px repeat-y;
}

#mycustomscroll .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
The greater the padding, the further away the scrollbar
stops away from both ends. This may be used, for example,
to provide space for our "faux" arrow heads.
*/
padding: 10px;

/* z-index for scrollbars define the z-index for the content, if left at
"auto" or "0", they are set to "2", if defined, content z-index is set the
same as the scrollbars. Version 1.7.5 and higher does not need this setting
to function properly, earlier versions need this for proper operation */
z-index: 2;
}

#mycustomscroll .vscrollerbarbeg {
/* Top image holder for vertical scrollbar*/
background: url(../../img/cmn/scroll.gif) -45px -30px no-repeat;
width: 15px;
/* Height of this class is normally set by the script, to fit the scrollbar, but Webkit (Safari's rendering
engine) currently has a bug on no-repeat for negatively positioned backgrounds, causing the top
image to repeat on certain sizes. In this style, we do not need our script to strech the
vscrollerbarbeg, so we can fix the problem by forcing the size using CSS with an !important decleration: */
height: 15px !important;
}

#mycustomscroll .vscrollerbarend {
/* Bottom image holder for vertical scrollbar*/
background: url(../../img/cmn/scroll.gif) -45px 0px no-repeat;
width: 15px;
height: 15px;
}

#mycustomscroll .hscrollerbarbeg {
/* Left image holder for horizontal scrollbar */
background: url(../../img/cmn/scroll.gif) -60px -15px no-repeat;
height: 15px;
/* Width of this class is normally set by the script, to fit the scrollbar, but Webkit (Safari's rendering
engine) currently has a bug on no-repeat for negatively positioned backgrounds, causing the top
image to repeat on certain sizes. In this style, we do not need our script to strech the
vscrollerbarbeg, so we can fix the problem by forcing the size using CSS with an !important decleration: */
width: 15px !important;
}

#mycustomscroll .hscrollerbarend {
/* Right image holder for horizontal scrollbar */
background: url(../../img/cmn/scroll.gif) -30px -15px no-repeat;
height: 15px;
width: 15px;
}

#mycustomscroll .scrollerjogbox {
/* Scroller jog (scroll-pan) image holder, only visible when both scrollbars are used */
width: 15px;
height: 15px;
top: auto; left: auto;
bottom: 0px; right: 0px;
}


/* Following are for scrollbase images, may not always be required */

#mycustomscroll .vscrollerbase {
/* Vertical scrollbar's base body */ 
background: url(../../img/cmn/scroll.gif) 0px 0px repeat-y;
}

#mycustomscroll .vscrollerbasebeg {
/* Vertical scrollbar's base top-cap */
/* This may be used for holding the up arrow */
background: url(../../img/cmn/scroll.gif) -30px -30px no-repeat;
width: 15px;
/* height of this element is normally auto set by the script to fit the scrollbase, to cover the base... */
height: 15px !important; /*  Safari BG repeat fix */
}

#mycustomscroll .vscrollerbaseend {
/* Vertical scrollbar's base bottom-cap */
/* This may be used for holding the down arrow */
background: url(../../img/cmn/scroll.gif) -60px -30px no-repeat;
height: 15px;
width: 15px;
}

#mycustomscroll .hscrollerbase {
/* Horziontal scrollbar's base body */ 
}

#mycustomscroll .hscrollerbasebeg {
/* Horizontal scrollbar's left-cap */
/* This may be used for holding the left arrow */
background: url(../../img/cmn/scroll.gif) -60px 0px no-repeat;
height: 15px;
/* width of this element is normally auto set by the script to fit the scrollbase, to cover the base... */
width: 15px !important; /* Safari BG repeat fix */
}

#mycustomscroll .hscrollerbaseend {
/* Horizontal scrollbar's right-cap */
/* This may be used for holding the right arrow */
height: 15px;
width: 15px;
background: url(../../img/cmn/scroll.gif) -30px 0px no-repeat;
}

#mycustomscroll .scrollerjogbox:hover {
background: url(../../img/cmn/scroll.gif) -45px -15px;
}


/*-----------------------------------
#mycustomscroll2
---------------------------------- */
#mycustomscroll2 .scrollgeneric {
line-height: 1px;
font-size: 1px;
position: absolute;
top: 0; left: 0;
}

/* For scrollbars, defining a color for background alongside with an image 
is always a good idea, this way the scrollbars are visible until images load */
#mycustomscroll2 .vscrollerbase {
/* vscrollerbase is the div that holds the scrollbar (parent of vscrollerbar) */
width: 15px;
background-color: white;
}

#mycustomscroll2 .vscrollerbar {
width: 15px;
background-color: black;
}

#mycustomscroll2 .hscrollerbase {
/* hscrollerbase is the div that holds the scrollbar (parent of hscrollerbar) */
height: 15px;
background-color: white;
}

#mycustomscroll2 .hscrollerbar {
height: 15px;
background-color: black;
}

/* basic style ends here, this was actually all that is required to run fleXcroll,
albeit without images, my advice is to have this basic style and build the rest
on top of this. */


/* styles for scrollbar images start here */

#mycustomscroll2 .hscrollerbar {
/* Main body of horizontal scrollbar */
background: #99CBCB url(horizontalbarbody_cornerjog.png) 0px -30px repeat-x;
}

#mycustomscroll2 .vscrollerbar {
/* Main body of vertical scrollbar */
background: url(../topimages/scroll2.gif) -15px 0px repeat-y;
}

#mycustomscroll2 .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
The greater the padding, the further away the scrollbar
stops away from both ends. This may be used, for example,
to provide space for our "faux" arrow heads.
*/
padding: 10px;

/* z-index for scrollbars define the z-index for the content, if left at
"auto" or "0", they are set to "2", if defined, content z-index is set the
same as the scrollbars. Version 1.7.5 and higher does not need this setting
to function properly, earlier versions need this for proper operation */
z-index: 2;
}

#mycustomscroll2 .vscrollerbarbeg {
/* Top image holder for vertical scrollbar*/
background: url(../topimages/scroll2.gif) -45px -30px no-repeat;
width: 15px;
/* Height of this class is normally set by the script, to fit the scrollbar, but Webkit (Safari's rendering
engine) currently has a bug on no-repeat for negatively positioned backgrounds, causing the top
image to repeat on certain sizes. In this style, we do not need our script to strech the
vscrollerbarbeg, so we can fix the problem by forcing the size using CSS with an !important decleration: */
height: 15px !important;
}

#mycustomscroll2 .vscrollerbarend {
/* Bottom image holder for vertical scrollbar*/
background: url(../topimages/scroll2.gif) -45px 0px no-repeat;
width: 15px;
height: 15px;
}

#mycustomscroll2 .hscrollerbarbeg {
/* Left image holder for horizontal scrollbar */
background: url(../topimages/scroll2.gif) -60px -15px no-repeat;
height: 15px;
/* Width of this class is normally set by the script, to fit the scrollbar, but Webkit (Safari's rendering
engine) currently has a bug on no-repeat for negatively positioned backgrounds, causing the top
image to repeat on certain sizes. In this style, we do not need our script to strech the
vscrollerbarbeg, so we can fix the problem by forcing the size using CSS with an !important decleration: */
width: 15px !important;
}

#mycustomscroll2 .hscrollerbarend {
/* Right image holder for horizontal scrollbar */
background: url(../topimages/scroll2.gif) -30px -15px no-repeat;
height: 15px;
width: 15px;
}

#mycustomscroll2 .scrollerjogbox {
/* Scroller jog (scroll-pan) image holder, only visible when both scrollbars are used */
background: #4E727C url(horizontalbarbody_cornerjog.png) 0px 0px;
width: 15px;
height: 15px;
top: auto; left: auto;
bottom: 0px; right: 0px;
}


/* Following are for scrollbase images, may not always be required */

#mycustomscroll2 .vscrollerbase {
/* Vertical scrollbar's base body */ 
background: url(../topimages/scroll2.gif) 0px 0px repeat-y;
}

#mycustomscroll2 .vscrollerbasebeg {
/* Vertical scrollbar's base top-cap */
/* This may be used for holding the up arrow */
background: url(../topimages/scroll2.gif) -30px -30px no-repeat;
width: 15px;
/* height of this element is normally auto set by the script to fit the scrollbase, to cover the base... */
height: 15px !important; /*  Safari BG repeat fix */
}

#mycustomscroll2 .vscrollerbaseend {
/* Vertical scrollbar's base bottom-cap */
/* This may be used for holding the down arrow */
background: url(../topimages/scroll2.gif) -60px -30px no-repeat;
height: 15px;
width: 15px;
}

#mycustomscroll2 .hscrollerbase {
/* Horziontal scrollbar's base body */ 
background: #D7EBDF url(horizontalbarbody_cornerjog.png) 0px -15px repeat-x;
}

#mycustomscroll2 .hscrollerbasebeg {
/* Horizontal scrollbar's left-cap */
/* This may be used for holding the left arrow */
background: url(../topimages/scroll2.gif) -60px 0px no-repeat;
height: 15px;
/* width of this element is normally auto set by the script to fit the scrollbase, to cover the base... */
width: 15px !important; /* Safari BG repeat fix */
}

#mycustomscroll2 .hscrollerbaseend {
/* Horizontal scrollbar's right-cap */
/* This may be used for holding the right arrow */
height: 15px;
width: 15px;
background: url(../topimages/scroll2.gif) -30px 0px no-repeat;
}

#mycustomscroll2 .scrollerjogbox:hover {
background: url(../topimages/scroll2.gif) -45px -15px;
}





/*-----------------------------------
#mycustomscroll3
---------------------------------- */
#mycustomscroll3 .scrollgeneric {
line-height: 1px;
font-size: 1px;
position: absolute;
top: 0; left: 0;
}

/* For scrollbars, defining a color for background alongside with an image 
is always a good idea, this way the scrollbars are visible until images load */
#mycustomscroll3 .vscrollerbase {
/* vscrollerbase is the div that holds the scrollbar (parent of vscrollerbar) */
width: 15px;
background-color: white;
}

#mycustomscroll3 .vscrollerbar {
width: 15px;
background-color: black;
}

#mycustomscroll3 .hscrollerbase {
/* hscrollerbase is the div that holds the scrollbar (parent of hscrollerbar) */
height: 15px;
background-color: white;
}

#mycustomscroll3 .hscrollerbar {
height: 15px;
background-color: black;
}

/* basic style ends here, this was actually all that is required to run fleXcroll,
albeit without images, my advice is to have this basic style and build the rest
on top of this. */


/* styles for scrollbar images start here */

#mycustomscroll3 .hscrollerbar {
/* Main body of horizontal scrollbar */
background: #99CBCB url(horizontalbarbody_cornerjog.png) 0px -30px repeat-x;
}

#mycustomscroll3 .vscrollerbar {
/* Main body of vertical scrollbar */
background: url(../topimages/scroll3.gif) -15px 0px repeat-y;
}

#mycustomscroll3 .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
The greater the padding, the further away the scrollbar
stops away from both ends. This may be used, for example,
to provide space for our "faux" arrow heads.
*/
padding: 10px;

/* z-index for scrollbars define the z-index for the content, if left at
"auto" or "0", they are set to "2", if defined, content z-index is set the
same as the scrollbars. Version 1.7.5 and higher does not need this setting
to function properly, earlier versions need this for proper operation */
z-index: 2;
}

#mycustomscroll3 .vscrollerbarbeg {
/* Top image holder for vertical scrollbar*/
background: url(../topimages/scroll3.gif) -45px -30px no-repeat;
width: 15px;
/* Height of this class is normally set by the script, to fit the scrollbar, but Webkit (Safari's rendering
engine) currently has a bug on no-repeat for negatively positioned backgrounds, causing the top
image to repeat on certain sizes. In this style, we do not need our script to strech the
vscrollerbarbeg, so we can fix the problem by forcing the size using CSS with an !important decleration: */
height: 15px !important;
}

#mycustomscroll3 .vscrollerbarend {
/* Bottom image holder for vertical scrollbar*/
background: url(../topimages/scroll3.gif) -45px 0px no-repeat;
width: 15px;
height: 15px;
}

#mycustomscroll3 .hscrollerbarbeg {
/* Left image holder for horizontal scrollbar */
background: url(../topimages/scroll3.gif) -60px -15px no-repeat;
height: 15px;
/* Width of this class is normally set by the script, to fit the scrollbar, but Webkit (Safari's rendering
engine) currently has a bug on no-repeat for negatively positioned backgrounds, causing the top
image to repeat on certain sizes. In this style, we do not need our script to strech the
vscrollerbarbeg, so we can fix the problem by forcing the size using CSS with an !important decleration: */
width: 15px !important;
}

#mycustomscroll3 .hscrollerbarend {
/* Right image holder for horizontal scrollbar */
background: url(../topimages/scroll3.gif) -30px -15px no-repeat;
height: 15px;
width: 15px;
}

#mycustomscroll3 .scrollerjogbox {
/* Scroller jog (scroll-pan) image holder, only visible when both scrollbars are used */
background: #4E727C url(horizontalbarbody_cornerjog.png) 0px 0px;
width: 15px;
height: 15px;
top: auto; left: auto;
bottom: 0px; right: 0px;
}


/* Following are for scrollbase images, may not always be required */

#mycustomscroll3 .vscrollerbase {
/* Vertical scrollbar's base body */ 
background: url(../topimages/scroll3.gif) 0px 0px repeat-y;
}

#mycustomscroll3 .vscrollerbasebeg {
/* Vertical scrollbar's base top-cap */
/* This may be used for holding the up arrow */
background: url(../topimages/scroll3.gif) -30px -30px no-repeat;
width: 15px;
/* height of this element is normally auto set by the script to fit the scrollbase, to cover the base... */
height: 15px !important; /*  Safari BG repeat fix */
}

#mycustomscroll3 .vscrollerbaseend {
/* Vertical scrollbar's base bottom-cap */
/* This may be used for holding the down arrow */
background: url(../topimages/scroll3.gif) -60px -30px no-repeat;
height: 15px;
width: 15px;
}

#mycustomscroll3 .hscrollerbase {
/* Horziontal scrollbar's base body */ 
background: #D7EBDF url(horizontalbarbody_cornerjog.png) 0px -15px repeat-x;
}

#mycustomscroll3 .hscrollerbasebeg {
/* Horizontal scrollbar's left-cap */
/* This may be used for holding the left arrow */
background: url(../topimages/scroll3.gif) -60px 0px no-repeat;
height: 15px;
/* width of this element is normally auto set by the script to fit the scrollbase, to cover the base... */
width: 15px !important; /* Safari BG repeat fix */
}

#mycustomscroll3 .hscrollerbaseend {
/* Horizontal scrollbar's right-cap */

/* This may be used for holding the right arrow */
height: 15px;
width: 15px;
background: url(../topimages/scroll3.gif) -30px 0px no-repeat;
}

#mycustomscroll3 .scrollerjogbox:hover {
background: url(../topimages/scroll3.gif) -45px -15px;
}




/*-----------------------------------
#mycustomscroll4
---------------------------------- */
#mycustomscroll4 .scrollgeneric {
line-height: 1px;
font-size: 1px;
position: absolute;
top: 0; left: 0;
}

/* For scrollbars, defining a color for background alongside with an image 
is always a good idea, this way the scrollbars are visible until images load */
#mycustomscroll4 .vscrollerbase {
/* vscrollerbase is the div that holds the scrollbar (parent of vscrollerbar) */
width: 15px;
background-color: white;
}

#mycustomscroll4 .vscrollerbar {
width: 15px;
background-color: black;
}

#mycustomscroll4 .hscrollerbase {
/* hscrollerbase is the div that holds the scrollbar (parent of hscrollerbar) */
height: 15px;
background-color: white;
}

#mycustomscroll4 .hscrollerbar {
height: 15px;
background-color: black;
}

/* basic style ends here, this was actually all that is required to run fleXcroll,
albeit without images, my advice is to have this basic style and build the rest
on top of this. */


/* styles for scrollbar images start here */

#mycustomscroll4 .hscrollerbar {
/* Main body of horizontal scrollbar */
background: #99CBCB url(horizontalbarbody_cornerjog.png) 0px -30px repeat-x;
}

#mycustomscroll4 .vscrollerbar {
/* Main body of vertical scrollbar */
background: url(../topimages/scroll4.gif) -15px 0px repeat-y;
}

#mycustomscroll4 .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
The greater the padding, the further away the scrollbar
stops away from both ends. This may be used, for example,
to provide space for our "faux" arrow heads.
*/
padding: 10px;

/* z-index for scrollbars define the z-index for the content, if left at
"auto" or "0", they are set to "2", if defined, content z-index is set the
same as the scrollbars. Version 1.7.5 and higher does not need this setting
to function properly, earlier versions need this for proper operation */
z-index: 2;
}

#mycustomscroll4 .vscrollerbarbeg {
/* Top image holder for vertical scrollbar*/
background: url(../topimages/scroll4.gif) -45px -30px no-repeat;
width: 15px;
/* Height of this class is normally set by the script, to fit the scrollbar, but Webkit (Safari's rendering
engine) currently has a bug on no-repeat for negatively positioned backgrounds, causing the top
image to repeat on certain sizes. In this style, we do not need our script to strech the
vscrollerbarbeg, so we can fix the problem by forcing the size using CSS with an !important decleration: */
height: 15px !important;
}

#mycustomscroll4 .vscrollerbarend {
/* Bottom image holder for vertical scrollbar*/
background: url(../topimages/scroll4.gif) -45px 0px no-repeat;
width: 15px;
height: 15px;
}

#mycustomscroll4 .hscrollerbarbeg {
/* Left image holder for horizontal scrollbar */
background: url(../topimages/scroll4.gif) -60px -15px no-repeat;
height: 15px;
/* Width of this class is normally set by the script, to fit the scrollbar, but Webkit (Safari's rendering
engine) currently has a bug on no-repeat for negatively positioned backgrounds, causing the top
image to repeat on certain sizes. In this style, we do not need our script to strech the
vscrollerbarbeg, so we can fix the problem by forcing the size using CSS with an !important decleration: */
width: 15px !important;
}

#mycustomscroll4 .hscrollerbarend {
/* Right image holder for horizontal scrollbar */
background: url(../topimages/scroll4.gif) -30px -15px no-repeat;
height: 15px;
width: 15px;
}

#mycustomscroll4 .scrollerjogbox {
/* Scroller jog (scroll-pan) image holder, only visible when both scrollbars are used */
background: #4E727C url(horizontalbarbody_cornerjog.png) 0px 0px;
width: 15px;
height: 15px;
top: auto; left: auto;
bottom: 0px; right: 0px;
}


/* Following are for scrollbase images, may not always be required */

#mycustomscroll4 .vscrollerbase {
/* Vertical scrollbar's base body */ 
background: url(../topimages/scroll4.gif) 0px 0px repeat-y;
}

#mycustomscroll4 .vscrollerbasebeg {
/* Vertical scrollbar's base top-cap */
/* This may be used for holding the up arrow */
background: url(../topimages/scroll4.gif) -30px -30px no-repeat;
width: 15px;
/* height of this element is normally auto set by the script to fit the scrollbase, to cover the base... */
height: 15px !important; /*  Safari BG repeat fix */
}

#mycustomscroll4 .vscrollerbaseend {
/* Vertical scrollbar's base bottom-cap */
/* This may be used for holding the down arrow */
background: url(../topimages/scroll4.gif) -60px -30px no-repeat;
height: 15px;
width: 15px;
}

#mycustomscroll4 .hscrollerbase {
/* Horziontal scrollbar's base body */ 
background: #D7EBDF url(horizontalbarbody_cornerjog.png) 0px -15px repeat-x;
}

#mycustomscroll4 .hscrollerbasebeg {
/* Horizontal scrollbar's left-cap */
/* This may be used for holding the left arrow */
background: url(../topimages/scroll4.gif) -60px 0px no-repeat;
height: 15px;
/* width of this element is normally auto set by the script to fit the scrollbase, to cover the base... */
width: 15px !important; /* Safari BG repeat fix */
}

#mycustomscroll4 .hscrollerbaseend {
/* Horizontal scrollbar's right-cap */
/* This may be used for holding the right arrow */
height: 15px;
width: 15px;
background: url(../topimages/scroll4.gif) -30px 0px no-repeat;
}

#mycustomscroll4 .scrollerjogbox:hover {
background: url(../topimages/scroll4.gif) -45px -15px;
}












/*-----------------------------------
#mycustomscroll5
---------------------------------- */
#mycustomscroll5 .scrollgeneric {
line-height: 1px;
font-size: 1px;
position: absolute;
top: 0; left: 0;
}

/* For scrollbars, defining a color for background alongside with an image 
is always a good idea, this way the scrollbars are visible until images load */
#mycustomscroll5 .vscrollerbase {
/* vscrollerbase is the div that holds the scrollbar (parent of vscrollerbar) */
width: 15px;
background-color: white;
}

#mycustomscroll5 .vscrollerbar {
width: 15px;
background-color: black;
}

#mycustomscroll5 .hscrollerbase {
/* hscrollerbase is the div that holds the scrollbar (parent of hscrollerbar) */
height: 15px;
background-color: white;
}

#mycustomscroll5 .hscrollerbar {
height: 15px;
background-color: black;
}

/* basic style ends here, this was actually all that is required to run fleXcroll,
albeit without images, my advice is to have this basic style and build the rest
on top of this. */


/* styles for scrollbar images start here */

#mycustomscroll5 .hscrollerbar {
/* Main body of horizontal scrollbar */
background: #99CBCB url(horizontalbarbody_cornerjog.png) 0px -30px repeat-x;
}

#mycustomscroll5 .vscrollerbar {
/* Main body of vertical scrollbar */
background: url(../topimages/scroll5.gif) -15px 0px repeat-y;
}

#mycustomscroll5 .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
The greater the padding, the further away the scrollbar
stops away from both ends. This may be used, for example,
to provide space for our "faux" arrow heads.
*/
padding: 10px;

/* z-index for scrollbars define the z-index for the content, if left at
"auto" or "0", they are set to "2", if defined, content z-index is set the
same as the scrollbars. Version 1.7.5 and higher does not need this setting
to function properly, earlier versions need this for proper operation */
z-index: 2;
}

#mycustomscroll5 .vscrollerbarbeg {
/* Top image holder for vertical scrollbar*/
background: url(../topimages/scroll5.gif) -45px -30px no-repeat;
width: 15px;
/* Height of this class is normally set by the script, to fit the scrollbar, but Webkit (Safari's rendering
engine) currently has a bug on no-repeat for negatively positioned backgrounds, causing the top
image to repeat on certain sizes. In this style, we do not need our script to strech the
vscrollerbarbeg, so we can fix the problem by forcing the size using CSS with an !important decleration: */
height: 15px !important;
}

#mycustomscroll5 .vscrollerbarend {
/* Bottom image holder for vertical scrollbar*/
background: url(../topimages/scroll5.gif) -45px 0px no-repeat;
width: 15px;
height: 15px;
}

#mycustomscroll5 .hscrollerbarbeg {
/* Left image holder for horizontal scrollbar */
background: url(../topimages/scroll5.gif) -60px -15px no-repeat;
height: 15px;
/* Width of this class is normally set by the script, to fit the scrollbar, but Webkit (Safari's rendering
engine) currently has a bug on no-repeat for negatively positioned backgrounds, causing the top
image to repeat on certain sizes. In this style, we do not need our script to strech the
vscrollerbarbeg, so we can fix the problem by forcing the size using CSS with an !important decleration: */
width: 15px !important;
}

#mycustomscroll5 .hscrollerbarend {
/* Right image holder for horizontal scrollbar */
background: url(../topimages/scroll5.gif) -30px -15px no-repeat;
height: 15px;
width: 15px;
}

#mycustomscroll5 .scrollerjogbox {
/* Scroller jog (scroll-pan) image holder, only visible when both scrollbars are used */
background: #4E727C url(horizontalbarbody_cornerjog.png) 0px 0px;
width: 15px;
height: 15px;
top: auto; left: auto;
bottom: 0px; right: 0px;
}


/* Following are for scrollbase images, may not always be required */

#mycustomscroll5 .vscrollerbase {
/* Vertical scrollbar's base body */ 
background: url(../topimages/scroll5.gif) 0px 0px repeat-y;
}

#mycustomscroll5 .vscrollerbasebeg {
/* Vertical scrollbar's base top-cap */
/* This may be used for holding the up arrow */
background: url(../topimages/scroll5.gif) -30px -30px no-repeat;
width: 15px;
/* height of this element is normally auto set by the script to fit the scrollbase, to cover the base... */
height: 15px !important; /*  Safari BG repeat fix */
}

#mycustomscroll5 .vscrollerbaseend {
/* Vertical scrollbar's base bottom-cap */
/* This may be used for holding the down arrow */
background: url(../topimages/scroll5.gif) -60px -30px no-repeat;
height: 15px;
width: 15px;
}

#mycustomscroll5 .hscrollerbase {
/* Horziontal scrollbar's base body */ 
background: #D7EBDF url(horizontalbarbody_cornerjog.png) 0px -15px repeat-x;
}

#mycustomscroll5 .hscrollerbasebeg {
/* Horizontal scrollbar's left-cap */
/* This may be used for holding the left arrow */
background: url(../topimages/scroll5.gif) -60px 0px no-repeat;
height: 15px;
/* width of this element is normally auto set by the script to fit the scrollbase, to cover the base... */
width: 15px !important; /* Safari BG repeat fix */
}

#mycustomscroll5 .hscrollerbaseend {
/* Horizontal scrollbar's right-cap */
/* This may be used for holding the right arrow */
height: 15px;
width: 15px;
background: url(../topimages/scroll5.gif) -30px 0px no-repeat;
}

#mycustomscroll5 .scrollerjogbox:hover {
background: url(../topimages/scroll5.gif) -45px -15px;
}