/* CSS Document - Screen
---------------------------------------------------------- */

/* Global Reset
---------------------------------------------------------- */

* {margin: 0; padding: 0; border: 0;}


/* Overall Body
---------------------------------------------------------- */

body {
	font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Verdana, Geneva, sans-serif;
	font-size:62.5%;
	text-align: center;
	background: #FFFFFF url(../images/nanotech_bg_full.jpg) top center no-repeat;
	color: #3A4754;
	}

#content {
	width: 960px;
	margin: 0 auto;
	}



/* Header
---------------------------------------------------------- */

#header {
width: 960px;
height: 84px;
margin-bottom: 10px;
}

#psu {
position: relative;
float: left;
top: 10px;
width: 118px;
height: 59px;
}

#pa_nmt {
position: relative;
float: left;
top: 10px;
left: 10px;
width: 295px;
height: 75px;
}

#shortcuts {
position: relative;
float: right;
text-align: right;
background: #EBEBEB;
border-left: 1px solid #CBC9CA;
border-right: 1px solid #CBC9CA;
border-bottom: 1px solid #CBC9CA;
width: auto;
}

#shortcuts ul {
margin-right: 10px;
}

#shortcuts li {
font-size: 1.2em;
list-style: none;
display: inline;
line-height:2.8;
font-weight:bold;
padding: 7px 5px 5px 30px;
margin-left: 10px;
}

#shortcuts ul li.search {
background: url(../images/icon_search.png) no-repeat .2em .2em;
}

#shortcuts ul li.apply {
background: url(../images/icon_apply.png) no-repeat .2em .2em;
}

#shortcuts ul li.info {
background: url(../images/icon_info.png) no-repeat .2em .2em;
}


/* Navigation
---------------------------------------------------------- */
	
#navigation{width: 960px; margin:0;padding:0;}
#navigation li{list-style:none;display:inline;line-height:2.8;font-weight:bold;padding:0; margin: 0;  text-transform: uppercase; letter-spacing: -.05em;}
#navigation li a{text-decoration:none;font-size:1.3em;float:left;padding:0 12px;color:#1172C3;}
#navigation .first{background:none;}
#navigation .first a{background:none ;}
#navigation li.hover a,
#navigation li:hover a{padding-bottom:0px;margin-bottom:0px; position:relative;}


#home li#nav_home a, li#nav_home a:hover {background-color: #82B93F; color: #FFFFFF;}
#programs li#nav_programs a, li#nav_programs a:hover {background-color: #AA0B37; color: #FFFFFF;}
#capstone li#nav_capstone a, li#nav_capstone a:hover {background-color: #F48F23; color: #FFFFFF;}
#careers li#nav_careers a, li#nav_careers a:hover {background-color: #A7268D; color: #FFFFFF ;}
#faq li#nav_faq a, li#nav_faq a:hover {background-color: #00ADDA; color: #FFFFFF ;}
#events li#nav_events a, li#nav_events a:hover {background-color: #1172C3; color: #FFFFFF;}
#apply li#nav_apply a, li#nav_apply a:hover {background-color: #506173; color: #FFFFFF;}

/* Highlight and Slider Zone
---------------------------------------------------------- */

#highlight {
height: 308px;
width: 960px;
background: #82B93F url(../images/bg_highlight_green.jpg) no-repeat;
text-align: left;
}

#highlight_search {
height: 508px;
width: 960px;
background: #82B93F url(../images/bg_highlight_green.jpg) no-repeat;
text-align: left;
}


#highlight_nmt {
height: 528px;
width: 960px;
background: url(../images/bg_highlight_red.jpg) no-repeat;
text-align: left;
background-color: #AA0B37;
}

#highlight_capstone {
height: 308px;
width: 960px;
background: url(../images/bg_highlight_orange.jpg) no-repeat;
text-align: left;
}

#highlight_careers {
height: 308px;
width: 960px;
background: url(../images/bg_highlight_purple.jpg) no-repeat;
text-align: left;
}

#highlight_faq {
height: 308px;
width: 960px;
background: url(../images/bg_highlight_ltblue.jpg) no-repeat;
text-align: left;
}

#highlight_apply {
height: 308px;
width: 960px;
background: url(../images/bg_highlight_gray.jpg) no-repeat;
text-align: left;
}

#callout {
position: relative;
float: left;
height: 308px;
width: 230px;
}

.mainimage {
position: relative; 
top: 11px; 
left: 28px;
}

#mygallery {
position: relative;
float: left;
height: 288px;
width: 680px;
}

/* 5 Reasons Slider
---------------------------------------------------------- */
.stepcarousel{
position: relative; /*leave this value alone*/
top: 10px;
left: 29px;
border: 1px solid white;
overflow: scroll; /*leave this value alone*/
width: 680px; /*Width of Carousel Viewer itself*/
height: 288px; /*Height should enough to fit largest content's height*/
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 0px; /*margin around each panel*/
width: 680px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

/* Flash Videos & Profile Slider
---------------------------------------------------------- */
#grayslider {
width: 960px;
height: 135px;
background: url(../images/bg_graypanel2.png) no-repeat;
text-align: left;
}

#mygallery2 {
width: 846px;
height: 135px;
}

.stepcarousel2{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 846px; /*Width of Carousel Viewer itself*/
height: 135px; /*Height should enough to fit largest content's height*/
left: 57px;
}

.stepcarousel2 .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel2 .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 0px; /*margin around each panel*/
margin-top: 10px;
width: 846px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

.stepcarousel2 .panel div {
position: relative; float: left; margin-right: 10px;
}

.stepcarousel2 .panel div.last {
margin-right: 0px;
}

.stepcarousel2 .panel img:hover {
border-top: 30px solid #82B93F;
}

.stepcarousel2 .panel .first img:hover, .stepcarousel2 .panel img.icon:hover {
border-top: none;
}

.panel .icon {
margin-right: 5px;
}

.panel img {
margin-bottom: 5px;
}

.panel div {
font-size: 1.2em;
line-height: 1.2;
color: #CCCCCC;
width: 161px;
}


/* CONTENT ZONE
---------------------------------------------------------- */

#sub_content {
background: url(../images/bg_content.gif) repeat-y;
text-align: left;
width: 960px;
}

#primary {
position: relative;
float: left;
width: 730px;
background-color: #EBEBEB;
padding-top: 10px;
padding-bottom: 15px;
border-top: 10px solid #D3D3D3;
border-bottom: 10px solid #D3D3D3;
}

#secondary {
position: relative;
float: left;
width: 230px;
background: url(../images/whatsnext.gif) no-repeat #D3D3D3;
border-top: 10px solid #EBEBEB;
}

#secondary ul.whatsnext {
margin-top: 60px;
margin-left: 25px;
font-size: 1.3em;
list-style-type: none;
}

#secondary ul.whatsnext li {
padding: 5px 0 15px 30px;
}

#secondary ul.whatsnext li.call {
background: url(../images/icon_phone.png) no-repeat 0em .15em;
}

#secondary ul.whatsnext li.info {
background: url(../images/icon_info.png) no-repeat 0em .15em;
}

#secondary ul.whatsnext li.meeting {
background: url(../images/icon_meeting.png) no-repeat 0em .15em;
}

#secondary ul.whatsnext li.apply {
background: url(../images/icon_apply.png) no-repeat 0em .15em;
}




/* BLOG LISTINGS AND FURTHER TASKS
---------------------------------------------------------- */
#blog_tasks {
width: 960px;
margin-top: 0px;
text-align: left;
}

#blog {
top: 20px;
width: 330px;
position: relative;
float: left;
}

#tasks {
width: 620px;
position: relative;
float: left;
}

#tasks p {
font-size: 1.1em;
color: #7C8996;
text-align: right;
}

#blog ul {
list-style-type: none;
font-size: 1.3em;
margin: 5px 0px 10px 10px; 
}

#blog li {
line-height: 1.2;
margin-bottom: 8px;
color: #506173;
}

#social_links img {
margin: 5px 0px 15px 15px;
display: block;
position: relative;
float: left;
}

a.sticky_print {
position: relative;
float:left;
display: block;
width: 182px;
height: 121px;
background: url(../images/sticky_print2_off.png) no-repeat;

}

a.sticky_print:hover {
background: url(../images/sticky_print2_on.png) no-repeat;
}

a.sticky_learn {
position: relative;
float:left;
display: block;
width: 172px;
height: 121px;
background: url(../images/sticky_apply2_off.png) no-repeat;
}

a.sticky_learn:hover {
background: url(../images/sticky_apply2_on.png) no-repeat;
}

a.sticky_contact {
position: relative;
float:left;
display: block;
width: 266px;
height: 121px;
background: url(../images/sticky_contact2_off.png) no-repeat;
outline: none;
}

a.sticky_contact:hover {
background: url(../images/sticky_contact2_on.png) no-repeat;
}

/* FOOTER
---------------------------------------------------------- */
#footerbg {
background-color: #EBEBEB;
border-top: 1px solid #CBC9CA;
padding: 10px 0 20px 0;
margin-top: 20px;
}

#footer_wrap {
width: 960px;
margin: 0 auto;
text-align: left;
}

img.nack_logo {
margin-left: 10px;
margin-right: 15px;
}

img.nano4me_logo {
margin-right: 15px;
}

#footer_logos img {
display: block;
}

#footer p {
font-size: 1.2em;
}


	
/* Standard Font Formatting
---------------------------------------------------------- */

h1 {
font-size: 2.2em;
color: #506173;
line-height: 1.1;
margin: 15px 35px 5px 35px;
}

h2 {
font-size: 1.8em;
color: #506173;
line-height: 1.1;
margin: 20px 35px 5px 35px;
font-weight: bold;
}

h3 {
font-size: 2.0em;
margin: 0 30px 0 10px;
padding: 3px 0;
border-top: 2px solid #82B93F;
border-bottom: 2px solid #82B93F;
text-transform: uppercase;
color: #506173;
}

h3.noborder {
border: none;
padding: 8px 0 0 0;
margin-bottom: -2px;
}

h4 {
font-size: 1.5em;
color: #506173;
line-height: 1.1;
margin: 25px 35px 5px 35px;
}

p {
margin-left: 35px;
margin-right: 35px;
font-size: 1.4em;
line-height: 1.5;
margin-bottom: 10px;
color: #3A4754;
}

.address {
line-height: 1.2;
font-size: 1.3em;
margin-left: 50px;
}

a:link {
color: #1172C3;
text-decoration: none;
font-weight: bold;
}

a:hover {
background-color: #D7E9C1;
}

a:visited {
color: #0C287D;
text-decoration: none;
font-weight: bold;
}

/* GOOGLE MAP - Decrease Font Sizes & Adjust Margins in Map
---------------------------------------------------------- */

#map {
font-size: .9em;
}

p.map {
line-height: 1.2;
margin: 5px 0 0 0;
padding: 0;
}

h1.map {
font-size: 1.6em;
color: #506173;
line-height: 1.1;
margin: 0px 0 5px 0;
padding: 0;
}


/* Standard List Formatting
---------------------------------------------------------- */

.TabbedPanelsContent ul, #primary ul, #primary ol {
font-size: 1.4em;
margin-left: 30px;
margin-top: 10px;
}

.column ul {
list-style-type: none;
font-size: 1.4em;
margin-left: 30px;
margin-top: 10px;
position: relative;
float: left;
width: 300px;
}

.column li {
border-bottom: 1px solid #B1C3C9;
	padding: 0 10px 0.3em 5px;
	margin-left: 40px;
	margin-right: 10px;
	margin-bottom: 15px;
	list-style-type: square;
}

.listing ul li, ul.listing_wide li {
	border-bottom: 1px solid #B1C3C9;
	padding: 0 10px 0.3em 0px;
	margin-left: 55px;
	margin-right: 35px;
	margin-bottom: 15px;
	list-style-type: square;
	}
	
.listing ul {
margin-top: 10px;
width: 300px;
float: left;
list-style-type: none;
}

ul.listing_wide  {
margin-top: 15px;
width: 620px;
list-style-type: none;
}

.listing_wide ol {
margin-top: 10px;
width: 620px;
}


.listing_wide ol li {
border-bottom: 1px solid #B1C3C9;
	padding: 0 10px 0.3em 0px;
	margin-left: 40px;
	margin-right: 10px;
	margin-bottom: 15px;
}


/* SEARCH BOX
---------------------------------------------------------- */
#search_box {
background-color: #ffffff;
width: 940px;
height: 487px;
position: relative;
top: 10px;
left: 10px;
}

.input_search {
position: relative;
float: left;
margin: 5px 10px 0 50px;
}

/*  contact form
---------------------------------------------------------- */
form {
margin-top: 15px;
}

fieldset {
margin-bottom: 15px;
margin-left: 25px;
}

label {
position: relative;
float: left;
width: 280px;
text-align: right;
font-size: 1.3em;
margin-right: 10px;
padding-top: 0.25em;
display: block;
}

.field {
width: 400px;
}

.input-text, .input-option {
padding: 0.25em;
	background-color: #DCEAF6;
border: 1px solid #3A4754;
color: #3A4754;
font-size: 1.2em;
margin-bottom: 15px;
}

.input-checkbox {
padding: 0.25em;
margin-top: .30em;
margin-bottom: 0.35em;
position: relative;
top: 0.1em;
}


input:hover, textarea:hover, checkbox:hover {
	background-color: #D7E9C1;
}
input:focus, textarea:focus, checkbox:focus {
	background-color: #D7E9C1;
}

.two_col {
position: relative;
float: left;
width: 320px;
padding-left: 25px;
}

.two_col label {
width: 320px;
display: block;
}

.form_buttons {
position: relative;
float: right;
right: 50px;
}

.form_buttons input, .button {
background-color: #DCEAF6;
border-top: solid 2px #E5F0F8;
border-left: solid 2px #E5F0F8;
border-right: solid 2px #8F98A0;
border-bottom: solid 2px #8E979F;
margin: 0px 10px 0 0;
padding: 5px;
font-weight: bold;
text-decoration: none;
display: block;
color: #3A4754;
}

.form_buttons input:hover, .button input:hover {
	background-color: #D7E9C1;
	}


/*  clear floats
---------------------------------------------------------- */
.clear {
content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}