/* OSU Institute of Technology: The Next Generation
 * Main CSS file
 *
 * (C) 2009 OSU Institute of Technology
 *
 * Design by Sywan Shih <sywan.shih@okstate.edu>
 * Coding by Keith Gable <keith.gable@okstate.edu>
 */

/**************** Base Styles ****************/
html {
	background-color: #001111;
	background-image: url("/images/background.jpg");
	background-position: top center;
	background-repeat: no-repeat;
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
}
body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	color: #fff;
}

/* Sensible defaults */
a			{ color: #ff6600; }
a:hover			{ color: #ff9900; }
body>h1			{ display: none; } /* This is used to outline the menus. */

/* Default font - td and th are here because IE is stupid */
html, body, td, th	{ font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Luxi Sans", Arial, Helvetica, sans-serif; }

/**************** Header ****************/
body>header {
	margin: 0;
	padding: 0 10% 0 10%;
	border-top: 10px solid #ff6600;
	background-image: url("/images/header.png");
	background-repeat: repeat-x;
	height: 100px;
}
body>header h1		{ padding-top: 7px; margin: 0; }
body>header h1 a	{ display: block; width: 502px; height: 66px; background-image: url("/images/osuitlogo-trans.png"); background-repeat: no-repeat; }
body>header h1 a span	{ display: none; }

/**************** Main content area ****************/
/* body>section is not used on the homepage. */
body>section {
	min-width: 680px;

	margin: 15px 10% 0 10%;
	padding: 40px;
	color: #e4e4e4;

	font-size: 0.75em;

	background-image: url("/images/content-background.png");
	background-repeat: repeat-x;
	background-color: #000;
	
	border: 10px solid #3d4444;

	/* <http://www.quirksmode.org/css/clearing.html> */
	overflow: auto;
}

/* Headings */
body>section h1,
body>section h2			{ margin: 5px 0 5px 0; font-weight: 900; color: #ffffff; padding: 0; text-transform: uppercase; letter-spacing: -1px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; }
body>section h1			{ font-size: 1.8em; }
body>section>h1 span {
	color: #ff6600;
	font-weight: normal;
	display: block;
	text-transform: none;
	font-style: italic;
	letter-spacing: 1px; /* FIXME: 1px for Garamond, -1px for Palatino Linotype */
	font-size: 1.0em;
	font-family: Garamond, "Palatino Linotype", Palatino, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L",
				 "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; /* The Garamond Font Stack */
}
body>section>h1 span.amp	{ display: inline; color: #fff; }
body>section>h1 span.caps	{ display: inline; color: #fff; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-style: normal; font-weight: bold; }

body>section h2			{ font-size: 1.5em; }
body>section h2 span		{ color: #ff6600; }

body>section h3			{ color: #ff6600; font-size: 1.1em; }
body>section h4			{ margin: 0; font-weight: bold; color: #fff; font-size: 1.0em; }
body>section h5			{ margin: 0; font-weight: bold; color: #ff6600; font-size: 0.9em; }

/* This sits on top of the page, typically on top of the splash. */
body>section>header		{ margin: 0 -40px; }
body>section>header h1		{ margin: 0; padding: 10px 40px; background-image: url("/images/black75.png"); }
body>section>header h1 span	{ color: #ff6600; }
body>section>header.splash	{ margin-top: -40px; padding-top: 260px; background-repeat: repeat-x; z-index: 0; }
body>section>header.splash h1	{ border-top: 5px solid #ff6600; } /* Only put the border if there is a splash involved */

body>section h1 .subtitle,
body>section h2 .subtitle,
body>section h3 .subtitle {
	font-size: 75%;
	font-weight: normal;
	display: block;
	color: #999;
}

/* lists */
body>section ul li		{ list-style-image: url("/images/bullet2.gif"); min-height: 7px; }

/**************** footer ****************/
footer {
    background: url("/images/footer-div.png") no-repeat top center;
    text-align: center;
    color: #657474;
    font-size: 0.6em;

    clear: both;
    padding: 1em 0;
    margin: 1.5em 10% 0 10%;
    min-width: 680px;
}
footer p			{ margin: 0.25em 0; padding: 0; }
footer a			{ color: #8a6146; text-decoration: none; border-bottom: 1px dotted #8a6146; }
footer a:hover			{ color: #ff6600; text-decoration: none; border-bottom: 1px dotted #ff6600; }
footer nav ul li.last:after	{ content: " "; }
footer nav li:after		{ content: "\00a0|"; }

/**************** Typography ****************/
/* pullquote */
blockquote.pullquote {
	width: 20%;
	min-width: 98px;
	min-height: 79px;
	background-image: url("/images/pullquote-trans.png");
	background-repeat: no-repeat;
	background-position: top left;
	padding: 40px 0 0 25px;
	margin: 1em;
	font-style: italic;
	font-family: Constantia, "Lucida Bright", LucidaBright, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; /* The Georgia Font Stack */
	font-size: 1.2em;
	display: block;
	float: right;
	clear: both;
	border: 0;
} 
blockquote.pullquote span	{ color: #ff6600; }
blockquote.pullquote .byline	{ text-align: right; }

/* normal blockquote - to indicate quoting/citing */
blockquote			{ border-left: 3px solid #ff6600; margin: 0.5em 0; padding: 0 0 0 1em; font-family: Constantia, "Lucida Bright", LucidaBright, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; /* The Georgia Font Stack */ }
blockquote p			{ margin: 0 0 3px 0; padding: 0; }

/* aside quotes */
body>section>aside.quote	{ font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-style: italic; letter-spacing: 0; }
body>section>aside.quote span	{ color: #ff6600; }

/* links */
body>section a			{ color: #ff6600; text-decoration: none; border-bottom: 1px dotted #ff6600; }
body>section a:hover		{ color: #ff9900; text-decoration: none; border-bottom: 1px dotted #ff9900; }

/* The optional bigger text part on top of pages */
body>section section		{ font-size: 1.2em; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: bold; }
body>section section li		{ font-size: 80%; list-style-image: url("/images/bullet1-trans.png"); min-height: 12px; margin-bottom: 1em; }

/* Code */
code				{ font-size: 1.0em; font-family: Monaco, Consolas, "Lucida Console", "Bitstream Vera Sans Mono", Terminal, monospace; }
code var			{ font-style: italic; }


/**************** Sidebar ****************/
body>section>aside,
aside.photos {
	clear: both;
	float: right;
	width: 20%;
	
	margin: 1em 0 0 1em;
	padding: 1em;

	background-color: #182429;
}
body>section>aside h1,
aside.photos h1			    { font-size: 1.5em; padding: 0.5em; margin: 0.5em -0.5em 0 -0.5em; font-weight: 100; letter-spacing: 0; border-top: 1px solid #2e3e44; }
body>section>aside>h1:first-child,
aside.photos>h1:first-child	    { margin: 0 -0.5em; border: none; }
body>section>aside h1 span,
aside.photos h1 span		    { color: #ff6600; display: inline; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-style: normal; text-transform: uppercase; letter-spacing: 0; }
body>section>aside h1 label	    { font-weight: 100; }
body>section>aside nav		    { background: none; border: 0; }
body>section>aside nav ul	    { list-style-type: none; margin: 0; padding: 0; }
body>section>aside nav ul li	    { list-style-type: none; margin: 3px 0 3px 0; padding: 0; display: block; }
body>section>aside nav ul li:after  { content: ""; }

aside.photos			    { padding: 0; width: 40%; }
body>section>figure,
#news-photos-page figure {
    display: block;
    width: 20%;
    float: right;
    overflow: hidden;
    font-size: 75%;
    
    margin: 1em 0 0 1em;
    padding: 1em;

    background-color: #182429;
}
#news-photos-page figure	    { min-height: 250px; float: left; }
aside.photos figure		    { padding: 1em; border-top: 1px solid #2e3e44; overflow: hidden; font-size: 75%; }
aside.photos figure:first-child	    { border: none; }
aside.photos figure img,
body>section figure img {
    float: left;
    width: 50%;
    border: 3px solid #999;
    margin: 0 1em 1em 0;
}
aside.photos figure .informational,
body>section figure .informational { color: #2e3e44; }

/************************ Forms and Status Information ************************/
.fieldWithErrors input,
.fieldWithErrors select		{ background-color: #F7E5E4; border: 1px solid #610B23; }
.fieldWithErrors label		{ color: #610B23; }
label				{ font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: bold; }
legend				{ font-size: 125%; }
input[type="submit"],
input[type="reset"],
button				{ font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; background-color: #647077; border: 1px solid #a8a8a8; color: #e6e6e6; }
input.placeholder		{ color: #a9a9a9 !important; }

/* dictionary lists */
dt {
    float: left;
    clear: left;
    width: 100px;
    text-align: left;
    font-weight: bold;
    margin: 0;
    padding: 0;
}
dt:after			{ content: ":"; }
dd				{ margin: 0 0 0 110px; padding: 0 0 0.5em 0; }
dd.fullwidth			{ margin: 0; padding: 0 0 0.5em 0; clear: left; }


/* this is for the FlashHash - the thing that displays confirmation/status information when you do stuff */
div.flash {
	margin: 15px 10% 0 10%;
	padding: 5px;
	color: #e4e4e4;

	font-size: 0.75em;

	border: 10px solid #3d4444;

	/* <http://www.quirksmode.org/css/clearing.html> */
	overflow: auto;
}
div.flash.success,
div.flash.success a:link	{ color: #264409; }
div.flash.success		{ background-color: #e6efc2; border: 10px solid #c6d880; }
div.flash.notice,
div.flash.notice a:link		{ color: #514721; }
div.flash.notice		{ background-color: #fff6bf; border: 10px solid #ffd324; }
div.flash.warning,
div.flash.warning a:link	{ color: #8a1f11; }
div.flash.warning		{ background-color: #fbe3e4; border: 10px solid #fbc2c4; }

/* Progress indicator */
progress.indeterminate {
	background-image: url("/images/loading.gif");
	background-repeat: no-repeat;
	background-position: center left;
	padding-left: 20px;
	min-height: 16px;
}

/******************************* Layout Helpers *******************************/
/* Two column layout */
.twocolumn			{ width: 100%; clear: both; overflow: hidden; }
.twocolumn>div			{ width: 50%; float: left; }


/* HTML5 style definitions 
 * ***********************
 *
 * When browsers encounter tags they don't recognize, they may not style them correctly.
 * This explicitly says block/inline.
 *
 * (C) 2009 Keith Gable, OSU Institute of Technology. <keith.gable@okstate.edu>
 *
 * Notes:
 * I couldn't find a definitive block/inline list, so some of this is my interpretation.
 */

article, aside, dialog, figure, footer, header, hgroup, nav, section	{ display: block; }
audio, video, canvas													{ display: block; }
mark, meter, progress, time												{ display: inline; }
details																	{ display: inline; } /* I think */


/* OSU Institute of Technology: The Next Generation
 * Navigation CSS file.
 *
 * (C) 2009 OSU Institute of Technology
 *
 * Design by Sywan Shih <sywan.shih@okstate.edu>
 * Coding by Keith Gable <keith.gable@okstate.edu>
 */

/***************************** General navigation *****************************/
nav ul				{ margin: 0; padding: 0; list-style-type: none; }
nav li				{ display: inline; }
#skipnavigation			{ color: #fff; display: none; }

/***************************** Global Navigation ******************************/
/* Ref: <http://www.alistapart.com/articles/horizdropdowns/> */
#navigation			{ margin: 0; padding: 0; position: absolute; top: 66px; right: 10%; width: 90%; }
#navigation h2			{ margin: 0; padding: 0; color: #fff; font-weight: normal; }
#navigation>ul			{ display: block; margin: 0; padding: 0; width: 100%; text-align: right;  list-style-type: none; overflow: hidden; height: 40px; }
#navigation>ul>li {
    display: block;
    position: relative;
    z-index: 1002;
    
    float: right;
    height: 0.95em;

    background: url("/images/globalnav-normal.png") repeat-x bottom left;
    
    margin: 8px 0.25em 8px 0;
    border: 1px solid #3b474a;
    color: #fff;
}
#navigation>ul>li>h2>a {
    display: block;
    border: 0;
    
    margin: 0 5px 0 0;
    padding: 1px 17px 0 10px;

    background: url("/images/dropdown_indicator-trans.png") no-repeat right center;
    
    font-size: 0.4em;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
}
#navigation>ul>li>h2>a.nosubmenu	{ background: none; margin: 0; padding: 1px 10px 0 10px; }
#navigation>ul>li a:hover		{ border: 0; color: #ff6600; }

/* Dropdown menus */
#navigation>ul>li:hover>h2>a		{ position: relative; z-index: 1004; color: #ff6600; }
#navigation>ul>li>div			{ display: none; position: absolute; top: -1px; right: -2px; height: 600px; z-index: 1001; }
#navigation>ul>li>div>.submenu {
    position: relative;
    top: 41px;
    right: 0;
    padding: 1em;
    z-index: 1001;
    
    background-color: #121e25;
    text-align: left;
    font-size: 0.7em;

    border: 1px solid #000;

    /* Drop Shadow */
    box-shadow: -1px 1px 1px black;
    -moz-box-shadow: -1px 1px 1px black;
    -webkit-box-shadow: -1px 1px 1px black;
}
#navigation>ul>li>div>.tab {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 100px; /* This will be populated with JavaScript */
    height: 41px;
    
    z-index: 1003;

    background-color: #121e25;
    background-image: url("/images/globalnav-tab-trans.png");
    background-repeat: repeat-x;

    border-top: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: none;

    /* Drop Shadow */
    box-shadow: -1px -1px 1px black;
    -moz-box-shadow: -1px -1px 1px black;
    -webkit-box-shadow: -1px -1px 1px black;
}
#navigation>ul>li:hover>div		{ display: block; }
#navigation>ul>li>div ul		{ margin: 0; padding: 0; width: 325px; list-style-type: none; color: #fff; }
#navigation>ul>li>div ul li		{ margin: 0; padding: 0 0 0 1em; display: block; }
#navigation>ul>li>div ul li a		{ color: #fff; text-decoration: none; border: 0; }

/* multicolumn layout */
#navigation>ul>li>div .twocolumn		    { width: 650px;}
#navigation>ul>li>div .twocolumn div		    { float: left; width: 314px; padding: 0; margin: 0; }
#navigation>ul>li>div .twocolumn div:first-child    { float: left; width: 314px; padding: 0 10px 0 0; margin: 0 10px 0 0; border-right: 1px solid #4a5259; }

/* headings */
#navigation>ul>li>div h3 {
    color: #ff6600;
    text-transform: uppercase;
    font-weight: bold;
    margin: 1em 0 0 0;
    padding: 1em 0;
    font-size: 1.0em;
    border-top: 1px solid #4a5259;
}
#navigation>ul>li>div h3:first-child	{ padding: 0 0 1em 0; border: 0; }

/***************************** local navigation *******************************/

/* Style the navbar itself */
body>section>header>nav,
body>section>nav {
	min-height: 37px;
	max-height: 74px;
	background-image: url("/images/localnav-bg.png");
	background-repeat: repeat-x;
	padding: 0;
	overflow: hidden;
}

/* The only things different about showing in a <header /> */
body>section>header>nav		{ margin: 0; }
body>section>nav		{ margin: 0 -40px; }  /* The section area has 40px padding, negative margin makes this stretch to fit that area */

/* Style items */
body>section>header>nav ul,
body>section>nav ul		{ display: block; list-style-type: none; overflow: hidden; margin: 0; padding: 0 40px; }

body>section>header>nav ul li,
body>section>nav ul li {
	display: block;
	position: relative;
	z-index: 1002; /* put it above the navigation container */
	
	float: left;
	height: 15px;
	background-image: url("/images/localnav-normal-trans.png");
	background-repeat: repeat-x;
	border: 1px solid #8f5641; /* fallback color - orangey so looks bad on the blue */
	border: 1px solid rgba(85,85,85,0.5); /* unsupported by MSIE */
	margin: 8px 0.5em 8px 0;
}

/* Active item */
body>section>header>nav ul li.active,
body>section>nav ul li.active {
	background-image: url("/images/localnav-active-trans.png");
	background-repeat: repeat-x;
}

/* The link inside the item */
body>section>header>nav ul li a,
body>section>nav ul li a	{ display: block; height: 16px; color: #fff; text-transform: uppercase; text-decoration: none; margin: 0; padding: 1px 10px; font-size: 10px; border: 0; }

body>section>header>nav ul li a:hover,
body>section>nav ul li a:hover	{ border: 0; }

/******************************* edit controls ********************************/

.edit-controls {
	display: block;
	text-align: right;
	color: #9fa8a8;
	margin: -40px -40px 0 -40px;
	padding: 12px 40px;

	/* put on top of the breadcrumbs/page */
	position: relative;
	z-index: 2;
}

/************************ Toolbars, Option Lists, etc. ************************/

ul.optionlist	    { margin: 0; padding: 0; font-size: 125%; min-width: 300px; }
ul.optionlist li {
    margin: 1em;
    padding: 1em;
    list-style: none;
    width: 300px;
    background-color: #182429;
}
ul.optionlist img   { vertical-align: middle; padding-right: 1em; margin-right: 1em; border-right: 1px solid #2e3e44; }
ul.optionlist a:hover,
ul.optionlist a	    { border: none; }

/* OSU Institute of Technology: The Next Generation
 * Table style sheet
 *
 * (C) 2009 OSU Institute of Technology / Keith Gable
 */

table.datatable					{ padding: 0; margin: 0; border-collapse: collapse; }
table.datatable td, th			{ padding: 1em; margin: 0; }

table.datatable td				{ background-color: #111c20; border-left: 1px solid #2e3e44; }
table.datatable td:first-child	{ border-left: 0; }
table.datatable tr.stripe td	{ background-color: #182429; }

table.datatable th				{ background-color: #001111; color: #ff6600; text-align: left; border-left: 1px solid #2e3e44; }
table.datatable th:first-child	{ border-left: 0; }
table.datatable tr.stripe th	{ background-color: #091a1b; }

/* rounded corners */
table.datatable tr:first-child td:first-child,
table.datatable tr:first-child th:first-child { 
	border-top-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-webkit-border-top-left-radius: 5px;
	-o-border-top-left-radius: 5px;
}
table.datatable tr:first-child td:last-child,
table.datatable tr:first-child th:last-child { 
	border-top-right-radius: 5px;
	-moz-border-radius-topright: 5px;
	-webkit-border-top-right-radius: 5px;
	-o-border-top-right-radius: 5px;
}
table.datatable tr:last-child td:first-child {
	border-bottom-left-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-o-border-bottom-left-radius: 5px;
}
table.datatable tr:last-child td:last-child {
	border-bottom-right-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-o-border-bottom-right-radius: 5px;
}


/* OSU Institute of Technology: The Next Generation
 * Breadcrumbs CSS file.
 *
 * (C) 2009 OSU Institute of Technology
 *
 * Design by Sywan Shih <sywan.shih@okstate.edu>
 * Coding by Keith Gable <keith.gable@okstate.edu>
 */

/* The breadcrumb box goes at the top, has a 75% translucent background, and is 36px tall. */
ul.breadcrumbs {
	display: block;
	background-image: url("/images/black75.png");
	background-repeat: repeat;
	color: #898989;
	margin: -40px -40px 0 -40px; /* The section area has 40px padding, negative margin makes this stretch to fit that area */
	padding: 12px 40px; /* Center the breadcrumbs and line them up with the baseline. */
	position: relative; /* Attempt to work around the missing background */
	z-index: 1;
}

/* Tweak the subordinate list items so they display inline and whatnot. */
ul.breadcrumbs ul { padding: 0; margin: 0; display: inline; }
ul.breadcrumbs li { padding: 0; margin: 0; display: inline; list-style-type: none; }

/* Link styles */
ul.breadcrumbs a {
	display: block;
	float: left;
	color: #9fa8a8;
	text-decoration: none;
	border: 0;
	padding: 0 15px 0 0; /* Leave 10px between the end of the text and the image, and 5px for the image */
	margin: 0 10px 0 0; /* Leave 10px after the image */
	font-size: 12px;
	background-image: url("/images/breadcrumb_separator-trans.png");
	background-repeat: no-repeat;
	background-position: right center;
}
ul.breadcrumbs a:hover		{ color: #9fa8a8; text-decoration: underline; border: 0; }

/* The last item is white. */
ul.breadcrumbs li.last		{ color: #fff; }


/* OSU Institute of Technology: The Next Generation
 * Carousel CSS file
 *
 * (C) 2009 OSU Institute of Technology
 *
 * Design by Sywan Shih <sywan.shih@okstate.edu>
 * Coding by Keith Gable <keith.gable@okstate.edu>
 */

 body>section>.carousel			{ margin-left: -40px; margin-right: -40px; } /* Remove the margin if the carousel is in a page */
.carousel				{ float: left; width: 1075px; height: 236px; margin: 1em 0; position: relative; } /* total of items + left + right */
.carousel a,
.carousel img				{ border: 0; }
.carousel .container			{ float: left; width: 1035px; height: 236px; position: relative; overflow: hidden; } /* width = total # of items */
.carousel ul				{ margin: 0; padding: 0; width: 100000px; position: relative; top: 0; left: 0; height: 236px; }
.carousel ul li				{ float: left; width: 345px; height: 236px; text-align: center; list-style: none; }
.carousel .previous_button		{ float: left; width: 20px; height: 236px; background: url("/images/carousel_previous.png") no-repeat center center; z-index: 100; cursor: pointer; }
.carousel .next_button			{ float: left; width: 20px; height: 236px; background: url("/images/carousel_next.png") no-repeat center center; z-index: 100; cursor: pointer; }
.carousel .previous_button_disabled	{ background: none; cursor: default; }
.carousel .next_button_disabled		{ background: none; cursor: default; }


/* From Prototype-UI */
 #horizontal_carousel {
  float: left;
  width: 610px;
  height: 240px;
  margin-bottom: 10px;
  position: relative;
}

#horizontal_carousel .container {
  float: left;
  width: 500px;
  height: 240px;
  position: relative;
  overflow: hidden;
}

#horizontal_carousel ul {
  margin: 0;
  padding:0;
  width: 100000px;
  position: relative;
  top: 0;
  left: 0;
  height: 240px;
}

#horizontal_carousel ul li {
  width: 250px;
  height: 240px;
  text-align: center;
  list-style:none;
  float:left;
}

#horizontal_carousel .previous_button {
  float:left;
  width: 44px;
  height: 175px;
  background: url("/images/carousel_previous.png");
  z-index: 100;
  cursor: pointer;
}

#horizontal_carousel .previous_button_over {
  background: url(prototype-ui/horizontal/left_over.png);
}

#horizontal_carousel .previous_button_disabled {
  background: url(prototype-ui/horizontal/left_disabled.png);
  cursor: default;
}

#horizontal_carousel .next_button {
  float:left;
  width: 44px;
  height: 175px;
  background: url(/images/carousel_next.png);
  z-index: 100;
  cursor: pointer;
}

#horizontal_carousel .next_button_over {
  background: url(prototype-ui/horizontal/right_over.png);
}

#horizontal_carousel .next_button_disabled {
  background: url(prototype-ui/horizontal/right_disabled.png);
  cursor: default;
}

/* OSU Institute of Technology: The Next Generation
 * Top of page links
 *
 * (C) 2009 OSU Institute of Technology
 *
 * Design by Sywan Shih <sywan.shih@okstate.edu>
 * Coding by Keith Gable <keith.gable@okstate.edu>
 */

/* min-width is calculated 680+80 because the padding in body>section doesn't add to the width */
#toplinks		    { position: absolute; left: 0; right:0; top: 20px; text-align: right; min-width: 760px; width: 80%; margin: 0 10%; padding: 0; }
#toplinks a span,
#toplinks h2		    { display: none; }
#toplinks ul,
#toplinks ul li		    { margin: 0; padding: 0; list-style: none; }
#toplinks ul		    { float: right; }
#toplinks ul li		    { display: inline; }
#toplinks ul li a	    { float: left; display: block; width: 15px; height: 15px; vertical-align: middle; margin: 7px 10px 0 0; color: #fff; }
#toplinks form		    { float: right; width: 10%; }

/* Styles for each link */
#toplink-myosuit	    { width: 87px !important; height: 31px !important; background: url("/images/icons/osuit/my_osuit.png") no-repeat top left; padding: 0 14px 0 0 !important; margin: 0 14px 0 0 !important; border-right: 1px solid #303e3e; }
#toplink-facebook	    { background: url("/images/icons/osuit/facebook.png") no-repeat center center; }
#toplink-twitter	    { background: url("/images/icons/osuit/twitter.png") no-repeat center center; }
#toplink-youtube	    { background: url("/images/icons/osuit/youtube.png") no-repeat center center; }

/* Search box */
#searchbox		    { background: #fff url("/images/searchbox_icon.png") no-repeat 5px center; padding-left: 20px; margin-left: 10px; width: 80%; }