@import url("ui.css");

@font-face {
    font-family: 'MuseoSans500';
    src: url('fonts/MuseoSans_500-webfont.eot');
    src: url('fonts/MuseoSans_500-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/MuseoSans_500-webfont.woff') format('woff'),
         url('fonts/MuseoSans_500-webfont.ttf') format('truetype'),
         url('fonts/MuseoSans_500-webfont.svg#MuseoSans500') format('svg');
    font-weight: normal;
    font-style: normal;

}

// base presentation styles

@royal-red:#720013;
@orange: #E27601;
@dark-grey: #333;
@peach: #F5DABC;
@ui-grey:#E5E5E5;
@teal:#2AAC98;
@lavender:#AFA9D0;
@elec-blue:#0098D8;
@royal-purp:#6F549F;
@white:#FFF;

.box-shadow (@x: 0, @y: 0, @blur: 12px, @color: #ccc) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}

.border-radius (@radius) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

#about-wrapper h3 {
	margin: 0 auto; 
	width:640px;
	font-size:110%;
}

#about-wrapper .content
{
  margin: 0 !important;
}

#affiliates {
	width:600px;
	border:1px solid #ccc;
	.border-radius(10px);
	padding:20px;
	margin: 20px auto;
	ul {
		li {list-style:none;padding:10px 0;}
	}
}

.fancy {font-family:'Traditional Arabic';}
.ib {display:inline-block;}

a {
  text-decoration:none;
  color:@dark-grey;
    &:hover{color:@royal-red;}
}

img {
	vertical-align:bottom;
	text-align:left;
}

select, input {margin:0; padding:0;}

#subnav {font-size:105%; font-family: MuseoSans500;}

.title {
  .fancy;
  font-weight:normal;
  font-size:110%;
  color:@dark-grey;
}

// layout styles

.ui-group {
  padding-left:5px;
  margin-top:10px;
  line-height:19px;
  label {font-size:75%;}
}

section {
  font-weight:normal;
  padding:10px 20px 10px 10px;
}

#main {
  border-top:1px solid #ccc;
  margin-top:1px;
  margin-bottom:20px;
  .content {
    padding:10px 0;
    height:468px;
    overflow-y:auto;
    .title-page {
      .title;
      font-size:115%;
      text-align:center;
      padding:5px;
      color:@orange;
    }
    .right {
      width:75%;
      padding-right:5%;
    }
    .left {
      width:15%;
    }
  }
}

#left-nav {
  .fancy;
  background-color:@peach;
  margin-top:15px;
  h3 {
    display:inline-block;
    .title;
  }
  ul {
    padding-left:10px;
    margin-left:10px;
    li {
      list-style:none;
      padding:3px 0;
    }
  }
}

.title-bar { 
  background-color:@dark-grey;
  width:100%;
  margin:0;
  padding:0;
    h2 {
      color:#fff;
    }
}

.btm-bar {
  .title-bar;
  height:40px;
    button {
      margin-left:75%;
      margin-right:5%;
	  margin-top:3px;
    }
  }
  
// search functionality

input {margin-right:5px;font-size:13px;color:#ccc;}
input[type=submit] {color:#000;}
input[type=text] {height:23px;}
input[type=search] {height:23px;}
label {font-size:90%;}
select {font-size:12px; padding: 0 2px 0 2px;}

mark {font-weight:normal; font-style:normal; font-size:12px; border:1px solid #ccc; margin:0 10px; padding:5px 5px; border-radius:10px; cursor:pointer; }
mark:hover {font-weight:normal; font-style:normal; font-size:12px; border:1px solid #ccc; margin:0 10px; padding:5px 5px; border-radius:10px; cursor:pointer;background-color:#fff; }

mark.first {margin-left:2px;}

#event-search
{
  position:relative;
}

#teacher-search #search-results {height:378px;}
#event-search #search-results {height:391px;}
#media-search #search-results {height: 391px;}
#study-yoga #search-results {height:380px;}

#event-search, #media-search, #teacher-search, #study-yoga {
  background-color:#fff;
  height:543px;
  width:1030px;
  margin:0;
  border-bottom:1px solid #ccc;
  border-top:1px solid #ccc;
	#search-results {
		margin:20px 15px 0 15px;
		border:1px solid #ccc;
		text-align:left;
		min-height:200px;
		width:1004px;
		display:block;
		overflow:hidden;
		font-size:13px;
		h3 {font-size:95%; font-weight:bold;margin:10px 0px;}
		tr {
			height:30px;
			.divider row {
				border-top:1px solid #ccc; 
				margin-top:5px;
			}
		}
		td, th {padding:2px 3px;}
		.title {
			display:inline-block;
			min-width:100px;
		}
		.curriculum {min-width:150px;}	
		 #resultsTitle {min-width: 235px;}
		 #resultsClipTitle {min-width: 255px;}
         #resultsTeacher {min-width: 150px;}
         #resultsMediaType {min-width: 115px;}
         #resultsDate {min-width: 80px;}
         #resultsDetails {min-width:115px;}
	}
}
#search-wrapper {width:1000px;height:100px;margin:0px 15px;padding:0;border:1px solid #ccc; background-color:@ui-grey;overflow: hidden;}

#study-yoga {
  #study-yoga-btn-wrapper {
    margin-left:auto;
    margin-right:auto;
    width:588px;
    color:#fff;
    font-size:22px;
    text-align:center;
    
    #watchYoga, #selfStudyYoga, #eLearnYoga, #listenYoga {
      width:130px;
      height:130px;
      border:1px solid #ccc;
      .border-radius(10px);
      float:left;
      margin-left:20px;
      .box-shadow(0px, 4px);
      a {
          display:block;
          color:@white;
          margin-top:20px;
          padding:2px;
      }
      &:hover{
        .box-shadow(0px, 8px);
      }
    }
    #watchYoga {
      margin-left:0;
      background-color:@teal;
      &:hover{background-color: darken(@teal, 10%);}
    }
    #selfStudyYoga {
      background-color:@lavender;
      &:hover{background-color: darken(@lavender, 10%);}
    }
    #eLearnYoga {
      background-color:@elec-blue;
      &:hover{background-color: darken(@elec-blue, 10%);}
    }
    #listenYoga {
      background-color:@royal-purp;
      &:hover{background-color: lighten(@royal-purp, 10%);}
    }
  }
}

#search-filters {
  height: 85px;
  width: 100%;
  margin:0;
  background-color: lighten(@ui-grey, 5%);
  label {
      display: block;
      float: left;
      font-size: 85%;
  }
  button {
	font-size: 85%;
  }
  filter {width:200px;}
  .ui-group {
    padding:0 5px;
    display:inline-block;
    float:left;
	max-width:200px;
	height:60px;
  }
  #buttonset {
  margin-top: 13px;
  }
  #media-keyword-ui {
    button {margin-top:12px;}
  }
  #media-keyword-ui, #zip-ui {
    margin-top: 29px;
    input[type=text] {
      width:140px;
      margin-left:5px;
      padding-left:2px;
    }
  }
  #event-keyword-ui {
    margin-top: 29px;
    input[type=text] {
      width:100px;
      margin-left:5px;
      padding-left:10px;
    }
  }
}

#ui-panel {
  height: 100px;
  left: 855px;
  margin-right: 10px;
  position: absolute;
  top: 21px;
  width: 160px;
  background-color:#fff;
  border: 1px solid #ccc;
  border-top:0px;
  label {font-size:80%;}
  .ui-row {line-height:11px;padding-left:13px;padding-top:5px;}
  .ui-icon {overflow:hidden;width:20px;height:21px;display:inline-block;line-height:18px;background:url('../images/ui/event-type-icons.png') no-repeat;}
  #in-person-ui .ui-icon {background-position:0px 5px;}
  #streaming-live-ui .ui-icon {background-position:-28px 2px;}
  #correspondence-ui .ui-icon {background-position:-58px 5px;}  
}



  
// curriculum

#curriculum {
  overflow-y:visible !important;
  #left-nav
  {
    padding:0;
    margin:0;
    width:16%;
    background-color:transparent;
    position:relative;
      h3{
        font-family:"Adobe Garamond Pro",Garamond,Georgia,"Adobe Caslon Pro","Hoefler Text",Times,serif;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing:1px;
        line-height:18px;
        background-image:url('../images/courses-nav-arrows.png');
        background-repeat:no-repeat;
        background-color:@peach;
        cursor:pointer;
        box-shadow: 2px 2px 2px #999999;
        width:100%;
        margin: 15px 0 0 -5px;
        padding:10px 20px 10px 10px;
        z-index:200;
        position:absolute;
      }
      h3.action-open{
        background-position:150px -33px;
      }
      h3.action-close{
        background-position:150px 8px;
      }
      ul.closed {
        display:none;
      }
      ul{
        position:absolute;
        margin-left:0px;
        display:block;
        z-index:100;
        top:40px;
        border:1px solid #ccc;
        border-left:0 none;
        padding-top:20px;
        padding-bottom:15px;
        background-color:#ffffff;
        min-width:165px;
      }
  }
}


// layout utilities

.right {float:right;}
.left {float:left;}
.clear {clear:both;}
.open {display:inline;}
.closed {display:none;}