/*
	名稱： style_1.css
	用途： style framework_1.php

  */


/* 這裡開始 style framework_1 的 code。 */

  #div1_header_1
  {
	  background-color:blue;
	  height:600px;
	  width:1000px;

	  padding: 30px 0 0 0;
  }

  #div3_header_2
  {
	  background-color:lightgreen;
	  height:30px;
	  width:1000px;
	  text-align:center;
	  padding: 10px 0 50px 0;

  }

  #horizontal_menu_3
  {

  }

  #horizontal_menu_3 a:link,
  #horizontal_menu_3 a:visited
  {
	  display:block;
	  text-decoration:none;
	  padding: 5px 7px 5px 7px;
	  text-align:center;
	  background-color:green;
  }
  #horizontal_menu_3 a:hover
  {
	  background-color:lightgrey;
  }
  #horizontal_menu_3 a:active
  {
	  background-color:pink;
  }
  #horizontal_menu_3 li
  {

	  display:inline-block;
  }




    #horizontal_menu_3
  {

  }

  #horizontal_menu_3 a:link,
  #horizontal_menu_3 a:visited
  {
	  display:block;
	  text-decoration:none;
	  padding: 5px 7px 5px 7px;
	  text-align:center;
	  background-color:green;
  }
  #horizontal_menu_3 a:hover
  {
	  background-color:lightgrey;
  }
  #horizontal_menu_3 a:active
  {
	  background-color:pink;
  }
  #horizontal_menu_3 li
  {

	  display:inline-block;
  }





  #div4_left_column_1
  {

	  height:400px;
	  width:200px;
	  background-color:blue;
	  float:left;

  }

  #div6_right_content
  {
	  float:left;
	  height:400px;
	  width:1000px;
	  background-color:lightred;
  }

  #div_7_footer
  {
	  height:30px;
	  width:100%;
	  background-color:orange;
	  clear:left;
  }


/* 這裡完結 style framework_1 的 code。 */

.accordion_toggle{
    background-color: #eee;
    color: #444;

    width: 100%;
    border: none;
    text-align: left;
    outline: none;

}

button.accordion_student_table {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    transition: 0.4s;
    font-size: 14px;
}

button.accordion_student_table.active, button.accordion_student_table:hover {
    background-color: #ddd;
}

.panel {
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.panel textarea, .panel input {
    background: #fff !important;
}

.pagination_1
{
	display: inline-block;
}
.button_3
{
	color: black;
	float: left;
	padding: 8px 16px;
	text-decoration: none;
	transition: background-color .3s;
	border: 1px solid black;
	margin: 0 4px;
}
.button_3:hover:not(.active)
{
	background-color: #ddd;
}
.active_3
{
	display: inline-block;
	background-color: var(--color-slate-300);
	color: white;
	display: inline-block;
	color: black;
	float: left;
	padding: 8px 16px;
	text-decoration: none;
	transition: background-color .3s;
	border: 1px solid black;
}
.neglect_3
{
	display: inline-block;
	color: black;
	float: left;
	padding: 8px 16px;
	text-decoration: none;
	transition: background-color .3s;
	border: 1px ;
	margin: 0 4px;
}

/*body {font-family: "Lato", sans-serif;}*/

/* Style the tab */
div.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1ff;
}

/* Style the buttons inside the tab */
div.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
div.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
div.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

/* For tab_contact =================================================*/

/* For tab_step_1 ========================*/
#tab1_id_defaultOpen
{
	width: 265px;
	height: 82px;
	background: url('find_tutor_1_1.jpg');

}

#tab1_id_defaultOpen:hover
{
	width: 265px;
	height: 82px;
	background: url('find_tutor_1_2.jpg');

}

#tab1_id_defaultOpen.active
{
	width: 265px;
	height: 82px;
	background: url('find_tutor_1_2.jpg');

}
/*=========================================*/

/* For tab_step_2 ========================*/
#tab4_idtest
{
	width: 265px;
	height: 82px;
	background: url('found_tutor_2_1.jpg');

}

#tab4_idtest:hover
{
	width: 265px;
	height: 82px;
	background: url('found_tutor_2_2.jpg');

}

#tab4_idtest.active
{
	width: 265px;
	height: 82px;
	background: url('found_tutor_2_2.jpg');

}
/*=========================================*/

/* For tab_step_3 ========================*/
#tab5_idtest
{
	width: 265px;
	height: 82px;
	background: url('found_tutor_3_1.jpg');

}

#tab5_idtest:hover
{
	width: 265px;
	height: 82px;
	background: url('found_tutor_3_2.jpg');

}

#tab5_idtest.active
{
	width: 265px;
	height: 82px;
	background: url('found_tutor_3_2.jpg');

}
/*=========================================*/

/* For tab_step_4 ========================*/
#tab6_idtest
{
	width: 265px;
	height: 82px;
	background: url('found_tutor_4_1.jpg');

}

#tab6_idtest:hover
{
	width: 265px;
	height: 82px;
	background: url('found_tutor_4_2.jpg');

}

#tab6_idtest.active
{
	width: 265px;
	height: 82px;
	background: url('found_tutor_4_2.jpg');

}
/*=========================================*/


/* For go_to_database , haven't modified the picture yet========================*/
#go_to_database
{
	width: 200px;
	height: 74px;
	background: url('student_register_1_1.jpg');

}

#go_to_database:hover
{
	width: 200px;
	height: 74px;
	background: url('student_register_1_2.jpg');

}

#go_to_database.active
{
	width: 200px;
	height: 74px;
	background: url('student_register_1_2.jpg');

}
/*=========================================*/


/* For tab1_button , haven't modified the picture yet========================*/
#tab1_button
{
	width: 200px;
	height: 74px;
	background: url('student_next_1_1.jpg');

}

#tab1_button:hover
{
	width: 200px;
	height: 74px;
	background: url('student_next_1_2.jpg');

}

#tab1_button.active
{
	width: 200px;
	height: 74px;
	background: url('student_next_1_2.jpg');

}
/*=========================================*/


/* For tab2_button , haven't modified the picture yet========================*/
#tab2_button
{
	width: 200px;
	height: 74px;
	background: url('student_next_1_1.jpg');

}

#tab2_button:hover
{
	width: 200px;
	height: 74px;
	background: url('student_next_1_2.jpg');

}

#tab2_button.active
{
	width: 200px;
	height: 74px;
	background: url('student_next_1_2.jpg');

}
/*=========================================*/


/* For tab5_button , haven't modified the picture yet========================*/
#tab5_button
{
	width: 200px;
	height: 74px;
	background: url('student_next_1_1.jpg');

}

#tab5_button:hover
{
	width: 200px;
	height: 74px;
	background: url('student_next_1_2.jpg');

}

#tab5_button.active
{
	width: 200px;
	height: 74px;
	background: url('student_next_1_2.jpg');

}
/*=========================================*/












/*================================================================*/



/* =============================================================== */
/* VVVery important here ---- Re-Style all the stylesheet content*/

  #div1_header_1
  {
	  background-color:green;
	  height:200px;
	  width:1000px;
	  text-align:center;
	  padding: 30px 0 0 0;
  }

  #div3_header_2
  {
	  background-color:blue;
	  height:20x;
	  width:1000px;
	  text-align:center;
	  padding: 10px 0 50px 0;
	  margin:0px;
  }

  #horizontal_menu_1
  {
	  margin-right:40px;
  }

  #horizontal_menu_1 a:link,
  #horizontal_menu_1 a:visited
  {
	  display:block;
	  text-decoration:none;
	  padding: 12.5px 10px 12.5px 10px;
	  text-align:center;
	  background-color:green;
  }
  #horizontal_menu_1 a:hover
  {
	  background-color:lightgrey;
  }
  #horizontal_menu_1 a:active
  {
	  background-color:pink;
  }
  #horizontal_menu_1 li
  {

	  display:inline-block;
  }

  #div4_left_column_1
  {

	  height:400px;
	  width:200px;
	  background-color:blue;
	  float:left;

  }

/* Style the div6_right_content*/
  #div6_right_content
  {
	  float:left;
	  margin: auto;
	  height:400px;
	  width:1125px;
	  background-color:lightred;
  }

  #div_7_footer
  {
	  height:30px;
	  width:100%;
	  background-color:orange;
	  clear:left;
  }



#horizontal_menu_1 li
{
    padding: 0px;
    border: 0px solid blue;
	background-color:red;
	margin-top:0px;
	margin-down:0px;
	margin-left:0px;
	margin-right:0px;
	margin:0px;
}



  #horizontal_menu_1 a:link,
  #horizontal_menu_1 a:visited
  {
	  display:block;
	  text-decoration:none;
	  padding: 12.5px 10px 12.5px 10px;
	  text-align:center;
	  background-color:lightgrey;
	  border: 1px solid grey;
	  margin-top:0px;
	  margin-down:0px;
	  margin-left:0px;
	  margin-right:0px;
  }
  #horizontal_menu_1 a:hover
  {
	  background-color:orange;
  }
  #horizontal_menu_1 a:active
  {
	  background-color:pink;
  }


  #horizontal_menu_1
  {
	  margin-top:10px;
	  margin-right:72px;
	  padding:0px;
  }


  #div3_header_2
  {
	  background-color:blue;
	  height:20x;
	  width:1000px;
	  text-align:center;
	  padding: 10px 0 50px 0;
	  margin:0px;
  }

  #horizontal_menu_1
  {
	  right:193px;
  }
  #horizontal_menu_0
  {
	  right:193px;
  }

  /*FROMER CSS*/
  #div3_header_2
  {
	height:160px;
	width:1500px;
	text-align:center;
	padding: 10px 0 50px 0;

  }


  #horizontal_menu_1 li
  {
      padding: 0px;
      border: 0px solid blue;
	background-color:red;
	margin-top:0px;
	margin-down:0px;
	margin-left:0px;
	margin-right:0px;
	margin:0px;
	color:black;
	 display:inline-block;

  }



    #horizontal_menu_1 a:link,
    #horizontal_menu_1 a:visited
    {
	  display:block;
	  text-decoration:none;
	  padding: 12.5px 10px 12.5px 10px;
	  text-align:center;
	  background-color:lightgrey;
	  background-image: linear-gradient(white, white, lightblue);
	  border: 1px solid grey;
	  margin-top:0px;
	  margin-down:0px;
	  margin-left:0px;
	  margin-right:0px;
	  color:black;

    }
    #horizontal_menu_1 a:hover
    {
	  background-color:blue;
	  background-image: linear-gradient(white, 	#ffff4d, white);
	  color:blue;
    }
    #horizontal_menu_1 a:active{
      background-color:pink;
	background-image: linear-gradient(white, lightgrey, white);
	font-size: 7px;
	color="yellow";
	  color:red;
    }





  #horizontal_menu_0 li
  {
      padding: 0px;
      border: 0px solid blue;
	background-color:red;
	margin-top:0px;
	margin-down:0px;
	margin-left:0px;
	margin-right:0px;
	margin:0px;

  }

  #horizontal_menu_0 a:link,
  #horizontal_menu_0 a:visited
  {

	  display:block;
	  text-decoration:none;
	  padding: 12.5px 10px 12.5px 10px;
	  text-align:center;
	  background-color:lightgrey;
	  background-image: linear-gradient(white, 	#ffff4d);
	  border: 1px solid grey;
	  margin-top:0px;
	  margin-down:0px;
	  margin-left:0px;
	  margin-right:0px;
	  color="black";
	  font: 15px arial, sans-serif;
	  font-weight: bold;
	  color:black;
    }
    #horizontal_menu_0 a:hover
    {
	  background-color:blue;
	  background-image: linear-gradient(white, lightgrey, white);
	  color:blue;
	  font-weight: bold;
    }
    #horizontal_menu_0 a:active
    {
	  background-color:pink;
	  background-image: linear-gradient(white, lightgrey, white);
	  color:black;
	  font-weight: bold;
	  color:red;
    }


    #horizontal_menu_0 li
    {

	  display:inline-block;
    }
  * {box-sizing: border-box;}
  body {font-family: Verdana, sans-serif;}
  .mySlides {display: none;}
  img {vertical-align: middle;}

  /* Slideshow container */
  .slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
  }

  /* Caption text */
  .text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    bottom: 8px;
    width: 100%;
    text-align: center;
  }

  /* Number text (1/3 etc) */
  .numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;

    top: 0;
  }

  /* The dots/bullets/indicators */
  .dot {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }

  .active {
    background-color: #717171;
  }

  /* Fading animation */
  .fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
  }

  @-webkit-keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
  }

  @keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
  }

  /* On smaller screens, decrease text size */
  @media only screen and (max-width: 300px) {
    .text {font-size: 11px}
  }
    #div1_header_1
    {
	  background-color:blue;
	  height:600px;
	  width:1000px;
	  right:0px;
	  align:right;
	  padding: 30px 0 0 0;
    }

    #slideshow_container_id
    {
	right:0px;
    }

    #header_banner_table, #header_banner_table_th
    {
      border: opx solid black;
      border-collapse: collapse;
    }

  #company_logo_table, #company_logo_table_th
	{
      	border: 0px solid black;
      	border-collapse: collapse;
	}

  #login_notice_words_centered
  {

  }