/*
	AnythingSlider v1.8+ Minimalist Round theme
	By Rob Garrison
*/
/*****************************
  SET DEFAULT DIMENSIONS HERE
 *****************************/
/* change the ID & dimensions to match your slider */
#slider {
	width: 700px;
	height: 390px;
	list-style: none;
	/* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */
	overflow-y: auto;
	overflow-x: hidden;
}

/******************
  SET STYLING HERE
 ******************
 =================================
 Default state (no keyboard focus)
 ==================================*/
/* Overall Wrapper */
.anythingSlider-minimalist-round {
	margin: 35px auto;
	/* 30px right & left padding for the navigation arrows */
	padding: 0 30px;
	background: #e6e1dd;
}
/* slider window - top & bottom borders, default state */
.anythingSlider-minimalist-round .anythingWindow {
	border-top: 3px solid #333;
	border-bottom: 3px solid #333;
}
/* Navigation buttons + start/stop button, default state */
.anythingSlider-minimalist-round .anythingControls a {
	background-color: #333;
	color: #fff;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
/* Navigation current button, default state */
.anythingSlider-minimalist-round .anythingControls a.cur,
.anythingSlider-minimalist-round .anythingControls a:hover {
	background-color: #777;
	color: #000;
}

/* start-stop button, stopped, default state */
.anythingSlider-minimalist-round .anythingControls a.start-stop {
	background: #040;
	color: #ddd;
	/* top shadow */
	-moz-box-shadow: inset 1px 2px 5px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: inset 1px 2px 5px rgba(0, 0, 0, 0.5);
	box-shadow: inset 1px 2px 5px rgba(0, 0, 0, 0.5);
}
/* start-stop button, playing, default state */
.anythingSlider-minimalist-round .anythingControls a.start-stop.playing {
	background-color: #800;
}

/* start-stop button, default hovered text color (when visible) */
/* hide nav/start-stop background image shadow on hover - makes the button appear to come forward */
.anythingSlider-minimalist-round .anythingControls a.start-stop:hover,
.anythingSlider-minimalist-round .anythingControls a.start-stop.hover,
.anythingSlider-minimalist-round .anythingControls a.start-stop .anythingControls ul a:hover {
	color: #fff;
	/* clear top shadow */
	-moz-box-shadow: inset 0 0 0 #000000;
	-webkit-box-shadow: inset 0 0 0 #000000;
	box-shadow: inset 0 0 0 #000000;
}

/*
 =================================
 Active State (has keyboard focus)
 =================================
*/
/* slider window - top & bottom borders, active state */
.anythingSlider-minimalist-round.activeSlider .anythingWindow {
	border-color: #999999;
	border:none;
}

/* Navigation buttons, active state */
.anythingSlider-minimalist-round.activeSlider .anythingControls a {
	background-color: #555555;
	color: #fff;
	background: url(/about/15-years/grey-circle.png) no-repeat;
}
/* Navigation current button, active state */
.anythingSlider-minimalist-round.activeSlider .anythingControls a.cur,
.anythingSlider-minimalist-round.activeSlider .anythingControls a:hover {
	background: url(/about/15-years/slider-circle.png) no-repeat;
	color: #000;
	width:15px;
	height:15px;
}

/* start-stop button, stopped, active state */
.anythingSlider-minimalist-round.activeSlider .anythingControls a.start-stop {
	background: #080;
	color: #fff;
}
/* start-stop button, playing, active state */
.anythingSlider-minimalist-round.activeSlider .anythingControls a.start-stop.playing {
	color: #fff;
	background: #f00;
}
/* start-stop button, active slider hovered text color (when visible) */
.anythingSlider-minimalist-round.activeSlider .start-stop:hover,
.anythingSlider-minimalist-round.activeSlider .start-stop.hover {
	color: #fff;
}

/************************
  NAVIGATION POSITIONING
 ************************/
/* Navigation Arrows */
.anythingSlider-minimalist-round .arrow {
	top: 50%;
	position: absolute;
	display: block;
}

.anythingSlider-minimalist-round .arrow a {
	display: block;
	width: 27px;
	height: 80px;
	margin: -50px 64px 0 90px; /* half height of image */
	text-align: center;
	outline: 0;
	background: url(/about/15-years/arrows-minimalist.png) no-repeat;
}

/* back arrow */
.anythingSlider-minimalist-round .back { left: 0; }
.anythingSlider-minimalist-round .back a { background-position: left bottom; }
.anythingSlider-minimalist-round .back a:hover,
.anythingSlider-minimalist-round .back a.hover { background-position: left top; }
/* forward arrow */
.anythingSlider-minimalist-round .forward { right: 0; }
.anythingSlider-minimalist-round .forward a { background-position: right bottom; }
.anythingSlider-minimalist-round .forward a:hover,
.anythingSlider-minimalist-round .forward a.hover { background-position: right top; }

/* Navigation Links */
.anythingSlider-minimalist-round .anythingControls {
	height: 30px; /* limit height, needed for IE9 of all things */
	width: 960px;
	background-color:#cccccc;
	outline: 0;
	display: none;
	float: right;
	position: absolute;
	bottom: 5px;
	right: 348px;
	margin: 373px -734px;
	z-index: 100;
	opacity: 0.90;
	filter: alpha(opacity=90);
}

.anythingSlider-minimalist-round .anythingControls ul {
	margin-top: 5px;
	margin-left: 425px;
	padding: 0;
	float: left;
}
.anythingSlider-minimalist-round .anythingControls ul li {
	list-style: none;
	float: left;
	margin-right: 5px;
	padding: 0;
}
.anythingSlider-minimalist-round .anythingControls ul a {
	display: inline-block;
	width: 15px;
	height: 15px;
	margin: 3px;
	padding: 0;
	text-decoration: none;
	text-align: center;
	outline: 0;
}

.anythingSlider-minimalist-round .anythingControls span {
	display: block;
	visibility: hidden;
}

/* navigationSize window */
.anythingSlider-minimalist-round .anythingControls .anythingNavWindow {
	overflow: hidden;
	float: left;
}
/* navigationSize nav arrow positioning */
.anythingSlider-minimalist-round .anythingControls li.prev span,
.anythingSlider-minimalist-round .anythingControls li.next span {
	visibility: visible;
	position: relative;
	top: -6px; /* bring navigationSize text arrows into view */
}

/* Autoplay Start/Stop button */
.anythingSlider-minimalist-round .anythingControls .start-stop {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 3px;
	padding: 0;
	text-align: center;
	text-decoration: none;
	z-index: 100;
	outline: 0;
}

/***********************
 IE8 AND OLDER STYLING
 ***********************/
/* Navigation Arrows */
.as-oldie .anythingSlider-minimalist-round .arrow {
	top: 45%;
}
.as-oldie .anythingSlider-minimalist-round .arrow a {
	margin: 0;
}

/***********************
COMMON SLIDER STYLING
***********************/
/* Overall Wrapper */
.anythingSlider {
	display: block;
	overflow: visible !important;
	position: relative;
}
/* anythingSlider viewport window */
.anythingSlider .anythingWindow {
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 100%;
}
/* anythingSlider base (original element) */
.anythingSlider .anythingBase {
	background: #e6e1dd;
	list-style: none;
	position: absolute;
	overflow: visible !important;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
}

/* Navigation arrow text; indent moved to span inside "a", for IE7;
	apparently, a negative text-indent on an "a" link moves the link as well as the text */
.anythingSlider .arrow span {
	display: block;
	visibility: hidden;
}
/* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */
.anythingSlider .arrow.disabled {
	display: none;
}
/* all panels inside the slider; horizontal mode */
.anythingSlider .panel {
	background: #e6e1dd;
	display: block;
	overflow: hidden;
	float: left;
	padding: 0;
	margin: 0;
}
/* vertical mode */
.anythingSlider .vertical .panel {
	float: none;
}

/* fade mode */
.anythingSlider .fade .panel {
	float: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}
/* fade mode active page - visible & on top */
.anythingSlider .fade .activePage {
	z-index: 1;
}

/***********************
  RTL STYLING
 ***********************/
/* slider autoplay right-to-left, reverse order of nav links to look better */
.anythingSlider.rtl .anythingWindow {
	direction: ltr;
	unicode-bidi: bidi-override;
}
.anythingSlider.rtl .anythingControls ul { float: left; } /* move nav link group to left */
.anythingSlider.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */
.anythingSlider.rtl .start-stop { /* float: right; */ } /* move start/stop button - in case you want to switch sides */

/* probably not necessary, but added just in case */
.anythingSlider .anythingWindow,
.anythingSlider .anythingControls ul a,
.anythingSlider .arrow a,
.anythingSlider .start-stop {
	transition-duration: 0s;
	-o-transition-duration: 0s;
	-moz-transition-duration: 0s;
	-webkit-transition-duration: 0s;
}

.content_div{
	width:400px;
	height:350px;
	float:right;
	background-color:#e6e1dd;
	margin-right:70px;
	margin-top:50px;
	}
	.slide_img{
	width:250px;
	height:250px;
	margin-left:165px;
	margin-top:46px;
	}
	ul#slider1, ul#slider1 li {
    width: 900px;
    height: 368px;
    }
	.read_on{
		height:33px;
	}
	
p.credit {
    font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	color: #fff;
	text-shadow: none;
	font-weight: normal;
	letter-spacing: normal;
	padding: 5px 10px;
	margin-top:35px;
	margin-bottom:0px;
	margin-left:40px;
	position: relative;
	width: 300px;
	left: 740px;
	top: -51px;
	left: 891px\9;						/* IE-only fix */
	top: 266px\9;						/* IE-only fix */
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
	transform: rotate(270deg);
	writing-mode: lr-bt ;
	-pie-background: rgba(0,0,0,0.5);
	behavior: url("https://ocw.mit.edu/styles/pie/PIE.php");
	
	/* IE8 and IE6-7 rotated credit fix below - DO NOT EDIT, DO NOT CHOP NEXT LINE TO MULTIPLE LINES */
	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=6.123233995736766e-17, M12=1, M21=-1, M22=6.123233995736766e-17, SizingMethod='auto expand')";
	-ms-transform-origin: 50% 0;
	filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=6.123233995736766e-17,
            M12=1,
            M21=-1,
            M22=6.123233995736766e-17,
            SizingMethod='auto expand'); 
/* end fix */
}

.shade2 {
    /*	background-color: transparent; */
	background-color: rgba(0, 0, 0, 0.5);	/* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */
	zoom: 1;
	border-radius: 9px; 					/* Opera 10.5, IE9, Saf5, Chrome, FF4+, iOS 4, Android 2.1+ */
	-webkit-border-radius: 9px; 			/* Saf3-4, iOS 1-3.2, Android ≤1.6 */
	-pie-background: rgba(0,0,0,0.5);
	behavior: url("https://ocw.mit.edu/styles/pie/PIE.php");
}

/*page.css styles */
/********************
  Overall Demo pages
  body, p                { font: 14px Georgia, Serif; background: #fff; color: #000; }
  a, a img               { border: 0; text-decoration: none; }
  
  h1                     { font: bold 60px Helvetica, Sans-Serif; letter-spacing: -2px; margin: 20px 0; text-align: center; }
h2                     { font: bold 30px Helvetica, Sans-Serif; letter-spacing: -1px; margin: 0 0 10px 0; color: #002266; }
h2.title               { text-align: center; }
h3                     { font: bold 20px Georgia, Serif; margin: 0 0 10px 0; color: #003388; }
h5, .header            { font: bold 15px Georgia, Serif; text-align: center; }
pre, code              { font: 13px/1.8 Monaco, MonoSpace; margin: 0 0 15px 0; padding: 5px; background: #f5f5f5; block: inline; width: 100%; overflow-x: auto; }
blockquote             { margin-left: 30px; }

ul                     { margin: 0; padding-left: 35px; }
ul li                  { font: 15px Georgia, Serif; margin: 0 0 8px 0; }
 ********************/



#page-wrap, #demo2     { width: 90%; padding: 0 15px; margin: 0 auto 50px; position: relative; }

#nav                   { display: block; width: 90%; margin: 10px auto; text-align: center; line-height: 3em; }
#nav a                 { text-align: center; background: black; color: white; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 10px; white-space: nowrap; }
#nav a.git             { background: #006; }
#nav a.play            { background: #060; }
#nav a.issue           { background: #600; }
#nav a:hover, #nav a.current { background: #666; }

.themeselector, .ani   { margin: 0 auto; text-align: center; }

#status                { color: #00a; font-weight: bold; }
.alert                 { color: #f00; font-weight: bold; }
.alert a, .attention   { color: #a00; }
.data                  { width: 100%; border: #555 1px solid; border-collapse: collapse; }
.data td, .data th     { border: #555 1px solid; padding: 0 5px; }
.data th               { background: #eee; }
.data .col             { width: 200px; }
.spacer                { height: 50px; }

/*****************
  Main demo page
 *****************/
#main #slider1         { width: 800px; height: 390px; list-style: none; }
#main #slider2         { width: 800px; height: 390px; list-style: none; }

/* Set slider1 panel 5 stuff - adding padding directly to the panel will
   shift panels after it, so we need a wrapper */
#main #slider1 .panel5 ul { width: 200px; margin: 0 5px; }

/* Set slider2 panel sizes, Main & FX demo pages */
#slider2 .panel1 { width: 500px; height: 350px; }
#slider2 .panel2 { width: 450px; height: 420px; }
#slider2 .panel3 { width: 680px; height: 317px; }
#slider2 .panel4 { width: 100%; } /* With no specific size, it defaults to wrapper size; except in IE7, it needs a width defined, so set to 100% */
#slider2 .panel5 { width: 680px; height: 317px; }
#slider2 .panel6 { width: 450px; height: 300px; }

/* For Specific Slides, these also apply to FX demo pages */
.textSlide             { padding: 10px 30px; }
.textSlide h3          { font: 20px Georgia, Serif; }
.textSlide h4          { text-transform: uppercase; font: 15px Georgia, Serif; margin: 10px 0; }
.textSlide ul          { list-style: disc; margin: 0; padding-left: 20px; }
.textSlide ul li       { display: list-item; }
.rightside             { float: right; margin: 0 0 2px 10px; }

.quoteSlide            { padding: 20px; }
.quoteSlide blockquote { font: italic 24px/1.5 Georgia, Serif; text-align: center; color: #444; margin: 0 0 10px 0; }
.quoteSlide p          { text-align: center; }

/***************************
  FX Demo Page
 ***************************/
/* Demo page accordions */
.accordion             { width: 70%; margin: 0 auto; }
.accordion .ui-widget-content a { color: #004499; }

/** Demo 1 **/
/* colorbox images to full size */
#demo2 #slider1        { width: 400px; height: 300px; list-style: none; }
.cboxPhoto             { width: 100%; height: 100%; margin: 0 !important; }
#cboxTitle             { color: #000 !important; }

/* Change metallic slider defaults to show thumbnails -
  using #demo2 (page wrapper) to increase this CSS priority */
#demo2 div.anythingControls { bottom: 25px; }
#demo2 div.anythingSlider-metallic .thumbNav a { background-image: url(); height: 30px; width: 30px; border: #000 1px solid; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }
#demo2 div.anythingSlider-metallic .thumbNav a span { visibility: visible; }

/* border around image to show current page */
#demo2 div.anythingSlider-metallic .thumbNav a:hover,
#demo2 div.anythingSlider-metallic .thumbNav a.cur { border-color: #fff; }
/* reposition the start/stop button */
#demo2 div.anythingSlider-metallic .start-stop { margin-top: 15px; }

/** Demo 2 **/
#demo2 #slider2        { width: 600px; height: 350px; list-style: none; }

/** Demo 3 **/
#demo2 #slider3        { width: 500px; height: 400px; list-style: none; }

/* expand image */
#slider3 img           { width: 100%; height: 100%; position: relative; }
#slider3 .panel        { position: relative; }

/* position caption close button */
.caption-top .close,
.caption-right .close,
.caption-bottom .close,
.caption-left .close   { font-size: 80%; cursor: pointer; float: right; display: inline-block; }

/* captions */
/* set to position: relative here in case javascript is disabled, script sets captions to position: absolute */
#slider3 .caption-top,
#slider3 .caption-right,
#slider3 .caption-bottom,
#slider3 .caption-left { background: #000; color: #fff; padding: 10px; margin: 0; position: absolute; z-index: 10; opacity: .8; filter: alpha(opacity=80); }

/* Top caption - padding is included in the width (480px here, 500px in the script), same for height */
#slider3 .caption-top  { left: 0; top: 0; width: 480px; height: 30px; }

/* Right caption - padding is included in the width (130px here, 150px in the script), same for height */
#slider3 .caption-right  { right: 0; bottom: 0; width: 130px; height: 180px;  }

/* Bottom caption  - padding is included in the width (480px here, 500px in the script), same for height */
#slider3 .caption-bottom { left: 0; bottom: 0; width: 480px; height: 30px; }

/* Left caption - padding is included in the width (130px here, 150px in the script), same for height */
#slider3 .caption-left   { left: 0; bottom: 0; width: 130px; height: 180px;  }

/******************
  Expand demo page
 ******************/
#wrapper1              { width: 100%; height: 300px; margin: 0 auto; }
#wrapper2              { width: 50%; height: 300px; margin: 0 auto; }

/* div-wrappers for aspect ratio demos: */
#wrapper3              { width: 75%; height: 500px; margin: 0 auto; border: solid red;    }
#wrapper4              { width: 75%; height: 500px; margin: 0 auto; border: solid green;  }
#wrapper5              { width: 75%; height: 500px; margin: 0 auto; border: solid green;  }
#wrapper6              { width: 75%; height: 500px; margin: 0 auto; border: solid green;  }
#wrapper7              { width: 75%; height: 200px; margin: 0 auto; border: solid green;  }
#wrapper8              { width: 75%; height: 200px; margin: 0 auto; border: solid green;  }


#expand #slider1,
#expand #slider2       { width: 100%; height: 300px; list-style: none; }
#expand p              { width: 75%; margin: 0 auto; }

/* The next one is really vital since it is used to calculate the aspect ratio from. */
#expand #slider4       { width: 680px; height: 317px; }

body#expand h2,
body#expand h3         { text-align: center; }

/***************************
  Video Compatibility table
 ***************************/
.video-info            { width: 700px; margin: 0 auto; margin-top: 50px; font-size: 18px; }
.video-info h2         { text-align: center; }
.video-info ul,
.video-info li         { margin: 0; }
.video-info sup        { font-size: 12px; }
.video-info th.header  { width: 25px; }
.good, .bad, .prob     { color: #ddd; text-align: center; }
.good                  { background: #080; }
.bad                   { background: #800; }
.prob                  { background: #880; }
.group                 { border: #000 1px solid; }

/**************************
Updating Video
**************************/

#updatingVideoDemo div#slider1, ul#slider1 div {
    width: 365px;
    height: 250px;
    list-style: none;
}

#updatingVideoDemo div#slider2, div#slider2 div {
    width: 300px;
    height: 200px;
    list-style: none;
}

#updatingVideoDemo .updatingVideoDemoInputs {
  clear: both;
  left: 50%;
  margin-left: -200px;
  position: relative;
  width: 400px;
}

/******************
  css3 demo page
 ******************/
.animations            { margin: 20px 20px 20px 5px; }
.ani                   { margin-top: 10px; }

/******************
  tooltips (Jatt)
 ******************/
.tooltip { cursor: pointer; }
#tooltip {
 min-width: 100px;
 color: #dddddd;
 background: #444;
 border: 1px solid #777;
 padding: 8px;
 display: none;
 opacity: 0.9;
 filter: alpha(opacity=90);
 text-align: left;
 border-radius: .5em;
 -moz-border-radius: .5em;
 -webkit-border-radius: .5em;
 z-index: 1000;
}
#tooltip .body {
 display: block;
 text-align: center;
}
/*page.css styles end*/

/*Top HTML area styles*/
#freeform-top p.headline {
	margin-bottom: 10px;
	margin-left: 40px;
	font-family: TitilliumText22LLight,Arial,Helvetica,sans-serif;
    font-size: 2em;
    margin-top: -30px;
    padding: 10px 0 10px 20px;
    text-shadow: 0 2px 3px #000;
    width: 500px;
	color: rgb(255, 255, 255);
    font-size: 2em;
}

#center_global { background-color: #eee; background-image: none; }
div.scsplash_top { margin: 0 6px 0 2px; padding: 175px 0 0 0; height: 160px; overflow-y: hidden; }
div.scsplash_bot { background-color: #fff; opacity: 0.5; padding: 23px 30px 30px 30px; height: 167px; }
div.scsplash_soc { float: right;position: relative; top: 6em; margin-right: 692px; z-index: 1; margin-top: -44px;}
div.scsplash_text { position: relative; top: -16.5em; text-align: center; margin-left: 63px; }
.scsplash_text p { font-size: 1.6em;  font-color: #000; font-weight: bold; padding: 6px 0; }
div.scsplash_about { background-color: #fff; text-align: center; padding: 15px 0 5px 0; margin-right: 6px; }
.scsplash_about p a { font-size: 1.6em; text-decoration: underline; }
div.scsplash_tag { background-color: #eee; text-align: center; padding: 18px 0 2px 0; }
.scsplash_tag p { font-size: 1.7em; font-weight: bold; }
#freeform-bottom { width: 100%; background-color: #eee; }
#freeform-right { background-color: #e5e0db; float: right; padding: 0 18px 0 20px; margin-right: 6px; width: 180px; }

/*Bottom HTML area styles*/

.history_tree img{ margin-top:-28px;
}
.break_line{  background-repeat: repeat-y;
    background-image: url("/about/15-years/LINE-NEW-1.png");
    
background-position: center;
text-align: center;
vertical-align: top;
width:60px;
}
.col_left{ 
text-align: left;
vertical-align: top; 
padding-left:10px;
}
.col_right{
text-align:right; 
vertical-align: top; }

.ul_right{text-align: right;  list-style-position: inside;}

.ul_left{text-align: left;  list-style-position: inside; margin-left:0px;}

.anni_logo{
  margin-left: -51px;
    margin-top: -3px;
    text-align: center;

}
/*Body text styles*/