/**
 * @file
 * Navigation Styling
 */
/*
 * The active item in a Drupal menu
 */
li a.active {
  font-weight: bold;
}

/*
 * Navigation bar
 */
#main-menu {
  /* overflow: hidden; */
  /* Sometimes you want to prevent overlapping with main div. */
  margin: auto;
  font-size: 0.8em;
  letter-spacing: 2px;
}

#main-menu .block {
  margin-bottom: 0;
}

#main-menu .block-menu .block-title,
#main-menu .block-menu-block .block-title {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

#main-menu ul.links,
#main-menu ul.menu {
  /* Menu block links */
  margin: 0;
  padding: 0;
  font-size: 12px;
}

#main-menu ul.links li,
#main-menu ul.menu li {
  /* A simple method to get navigation links to appear in one line. */
  padding: 0;
  /* LTR */
  text-align: center;
  list-style-type: none;
  list-style-image: none;
}

#main-menu ul.links li .last,
#main-menu ul.menu li .last {
  margin-right: 0;
}

#main-menu ul.links li a {
  text-decoration: none;
}

#main-menu ul.links .menu,
#main-menu ul.menu .menu {
  /* Primary Navigation sub-menu */
  letter-spacing: 1px;
}

/*
 * Main menu and Secondary menu links
 */
/*
 * Sub-#main-menu from main menu
 */
#secondary-menu {
  float: right;
  /* LTR */
  display: none;
  /* Temporarily hiding My Account links */
}

/*
 * Menu blocks
 */
/*
 * "Menu block" blocks
 *
 * Drupal core has limited ways in which it can display its menus. To get around
 * these limitations, see http://drupal.org/project/menu_block
 */
/*
 * Footer links
 */
footer {
  font-size: 0.75em;
  position: relative;
}

footer ul {
  list-style: none;
}

footer ul li {
  float: left;
  padding: 10px 10px 0;
}



/*�^�u�؂��ւ��S�̂̃X�^�C��*/
.tabs {
margin-top: 50px;
padding-bottom: 40px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
width: 700px auto;
margin: 0 auto;}
/*�^�u�̃X�^�C��*/
.tab_item {
width: calc(50%);
height: 50px;
border-bottom: 3px solid #000000;
background-color: #d9d9d9;
line-height: 50px;
font-size: 12px;
text-align: center;
color: #818181;
display: block;
float: left;
text-align: center;
font-weight: bold;
transition: all 0.2s ease;
}
.tab_item:hover {
opacity: 0.75;
}
/*���W�I�{�^�����S���*/
input[name="tab_item"] {
display: none;
}
/*�^�u�؂��ւ��̒��g�̃X�^�C��*/
.tab_content {
display: none;
padding: 40px 40px 0;
clear: both;
overflow: hidden;
}
/*�I�������Ă����^�u�̃R���e���c�݂̂��\��*/
#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content {
display: block;
}
/*�I�������Ă����^�u�̃X�^�C�����ς���*/
.tabs input:checked + .tab_item {
background-color: #000000;
color: #fff;
}