/* Grid Setup
-------------------------------------------------------------- */

div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, 
div.span-6, div.span-7, div.span-8, div.span-9, div.span-10, 
div.span-11, div.span-12, div.span-13, div.span-14, div.span-15, div.span-nav {
margin-right: 2.4%;
float: left;
min-height: 1px;

	}
	
	
.column {
	float:left;
	
}

/* last column in a row needs this class. */
.last, div.last { margin-right: 0; }

/* setting the widths of the columns. */
.span-1  { width: 4%;    }
.span-2  { width: 10.4%; }
.span-3  { width: 16.8%; }
.span-4  { width: 23.2%; }
.span-5  { width: 29.6%; }
.span-6  { width: 36%;   }
.span-7  { width: 42.4%; }
.span-8  { width: 48.8%; }
.span-9  { width: 55.2%; }
.span-10 { width: 61.6%; }
.span-11 { width: 68%;   }
.span-12 { width: 74.4%; }
.span-13 { width: 80.8%; }
.span-14 { width: 87.2%; }
.span-15 { width: 93.6%; }
.span-16 { width: 100%; margin-right:0px; }
.span-nav { width:81.2%; margin-left:.75%;}


.midcol .span-1 { width:16.8%;}
.midcol .span-2 { width: 23.2%; }
.midcol .span-3  { width: 29.6%; }
.midcol .span-4  { width: 42.4%; }
.midcol .span-5  { width: 48.8%; }
.midcol .span-6  { width: 61.6% }
.midcol .span-7  { width: 74.4%; }
.midcol .span-8  { width: 87.2%; }
.midcol .span-9 { width: 100%; }


#container {
	max-width:962px;
	min-width: 300px;
	width:100%;
}
      
#columns_main  {
	width: 98%;

	}
#columns_nonav {
   width:97.75%;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";
	background:url("../../media/responsive_nn_background.jpg") repeat-y scroll 0 0 #FFFFFF ;
	 background-size:100%;
	 -webkit-background-size: 100%;
	 -o-background-size: 100%;
	 -moz-background-size: 100%;
	 width:99.8%;
	padding: 0;

}

#columns {
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";
	background:url("../../media/responsive_background.jpg") repeat-y scroll 0 0 #FFFFFF ;
	 background-size:100%;
	 -webkit-background-size: 100%;
	 -o-background-size: 100%;
	 -moz-background-size: 100%;
	 width:99.8%;
	padding: 0;
 }
	
/* last column in a row needs this class. */
.last, div.last { margin-right: 0; }


/* Header
-------------------------------------------------------------- */



#header {
	background:#F3F3F3 url("http://www.clemson.edu/ccit/media/header-graybg.jpg") repeat-x scroll center 0;
	border-right:1px solid #E5E5E5;
	border-left: 1px solid #E5E5E5;
	
	}


 
#header,#header_intern {
	width: 99.8%;
	}
	

#header.span-8,#header_intern.span-8 {/*change from static px so it contracts*/
	 width:50%;
 }
 
 	
#home{
	display:none;
}

/* logo */
#wordmark,#wordmark_intern {
	
	max-width:90%;
	}


#wordmark a, #wordmark_intern a {

	width: 100%;

	}

.department_name{
	display:none;
}



#leftmenu{
	display:block;
	width:22%;
	margin-right:1.25%;
	
}
#leftcol{
	 display:block;
	border-right:none;
	width:auto;
	padding-right:5px;
}

#leftcol ul li .activefolder {
  width:92%;
 }
 
#left-feature {
 width:103.5%;
 overflow:hidden;
}

#left-feature img {
   width:100% !important;
 }

.midcol {
	width:59.5%;
	padding-left: .74%;
        padding-right: .75%;
        padding-bottom:5px;
	background-color:#FFF;
		
}
.rightcol {
    margin-left: 1%;
    width: 14.25%;
    background-color:transparent;
}

#big_help_button{
 width:100%;
 margin-left: -5px;
}

#rightcol{
	margin-left:0;
	background-color:#8B8B8B;
	width:100%;
}

#footer {
	width:100%;
}

.copyright{
	width:98%;
}
/*search*/


#search_container {	
	
       
	left:1%;
	width:31%;
	display:block;
	border:none;
	
}

#search_intro{
	font-size:18px;
	font-variant:small-caps;
	font-weight:bold;
	color:#AAAAAA;
	float:left;
	margin-right:5px;
}

#search_content {
	border:none; !important
	
	}

#search_content {
	
	position:static;!important
	
	}
	
#search_content .button {
 height: 22px;
}
#search {
    background: #ffffff;
    height: 18px;
    margin: 0 0 0.5em 0;
    padding: 0;
    border-style:inset;
   border-width:2px;
   border-color:#DDD;
	}


	
/* Navigation Features
-------------------------------------------------------------- */

.breadCrumbHolder {
	padding-left:8px;
}

.breadcrumb {
	width:99.8%;
	margin:0;
	padding:0;
	height:auto;
}

#breadcrumb{
	width:auto;
}

#breadCrumb ul {
	padding-left:8px;
	display:inline;
}
/* tool links */
#tools {

	margin:1em;
}

#active_navbar {
	height:auto;
	
}

#active_navbar a, #active_navbar a:visited {
	padding: 0px 10.42px 0px 11px;
	display:inline-block;
}

#active_navbar .active {
	border-bottom: thin solid #888;
	background-color:#394958;
}

.siteindex {
  width:99.9%;	
}
.menu_alerts{
 background-color:#3A4958;
}

#help_li {
 display:none;
}
 


@media all and (max-width: 866px){
h1 {font-size: 2em;}

#tools {
	display:block;
   	 text-align: right;
	top:5px;!important
	padding-right:15px;
	
}
#tools li{
	display: block;
	padding:.5em;
}

#search_intro{
	float:none;
}

#search_container {
	top: 6em;
	position:absolute;
    	width: 30%;
	left:55%;
}


#leftmenu {
	display:block;
	width:26%;
	margin-right:1%;
}

#left-feature {
 width:102%;
}
	
#help_li{
	background:none;
	display:block;
	height:24px;
	margin-top:0px;
	
}


.breadCrumbHolder {
	height:auto;
}

.breadcrumb {
	height:auto;
}

#breadcrumb{
	height:24px;
}
	
.breadCrumb a.help, .breadCrumb a.help:visited{
    height: 24px;
   
   
}

.breadCrumb ul li {
  margin-top:4px;
}
.breadCrumb ul li {
  margin-top:4px;
}


.midcol{
	width:71%;
	
}

#columns_nonav {
 background-image:none;
}

.span-nav{

 width:97.5%;
}
	
#rightcol {
	display:none;
	position: absolute;
    	right: 2px;
    	top: 21em;
    	width:30%;
    	border: thin solid #DDD;
}

#rightcol a img {
display:none;
}


#columns {
  width:100%;
  background:url("../../media/responsive_twocol.jpg") repeat-y scroll left top transparent;
  background-size:100% auto;
  -webkit-background-size: 100%;
  -o-background-size: 100%;
  -moz-background-size: 100%;
}




}



@media all and (max-width: 680px) {
	
.column, .span-1, .span-2, .span-3, .span-4,.span-5, 
.span-6, .span-7, .span-8, .span-9, .span-10, 
.span-11, .span-12, .span-13, .span-14, .span-15, .span-16, 
.midcol .span-1,.midcol .span-2,.midcol .midcol .span-3,.midcol .span-4,.midcol .span-5, 
.midcol .span-6, .midcol .span-7, .midcol .span-8{
	float: none;
	width:100%;
}


#header {
	height:3em;
}
	
#home{
	display:block;
	height:3em;
}
#home h1 {
	color:#fff;	
	margin-bottom:0px;
	margin-top:.25em;
	margin-left:2.5em;
}
#home img{
 float:left;
 
}

.ui-bar-a {
	background-color:#ff6b35; /* if the gradient next is not understood, give it a similar color */
	background: -moz-linear-gradient(top, #f26635 0%, #f26635 66%, #E15726 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f26635), color-stop(66%,#f66733), color-stop(90%,#E15726), color-stop(100%,#f99100)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #f26635 0%,#f26635 66%,#E15726 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #f26635 0%,#f26635 66%,#E15726 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #f26635 0%,#f26635 66%,#E15726 100%); /* IE10+ */
	background: linear-gradient(top, #f26635 0%,#f26635 66%,#E15726 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f26635', endColorstr='#E15726',GradientType=0 ); /* IE6-9 */
	height:2.5em;
	padding-top:10px;
	padding-bottom:4px;
	padding-left:10px;
	
}

.ui-title {
	text-shadow: 0 1px 1px #000;

}


#wordmark{	
  display:none;
	}

#alerttext{
 line-height:18px;
}

#active_navbar{
	display:none;
	width:40%;
	left:60%;
	position:absolute;
	z-index:999;
	background:#394958;
	border-top:thin solid #AAA;
}
#active_navbar a, #active_navbar a:visited,#active_navbar a.help, #active_navbar a.help:visited{
	display:block;
	padding:11px;
	line-height:1.5em;
	background: #F66733; /* Old browsers */
	background-image:url("/ccit/media/new_orange_nav.jpg" );
	background-size:contain;
	
}

#active_navbar a.active, #active_navbar a.active:visited  {
	border: thin solid #555;
	filter: progid:DXImageTransform.Microsoft.gradient( Enabled='false'); /* IE6-9 */
	background-color:#394958;
	background-image:url("/ccit/media/blue_nav_slice_active.jpg" );
	background-size:contain;
}
.homePageTextRedAlert {
	padding: 5px 7px;
	font-size:.9em;
	line-height:1.5em;
	
}



#land-feature {
	display:none;
}

#left-feature {
	display:none;
}

#columns, #header, .column {
	border-left: 0px;
	border-right: 0px;
}

#leftmenu, #tools, #search_container{
	top: 19em;
	font-size:1em;
	display:none;
	position:absolute;
	z-index:998;
	border:thin solid #AAA;
	background-color:#394958;	
	
}
#active_navbar {
 	top: 19em;
}

#leftmenu {
	
	width:60%;
	border-right:none;
	border-left:none;
	
}


.leftcol ul li, #tools {
	text-align:left;
	padding-bottom:.5em;
}
#leftcol ul li a {
  padding-left:6px;
   color:#fc723f;
}

#leftcol ul li a:hover {
  background-image:none;
}

#leftcol ul li .active{
    background:none;
   
}

#leftcol ul li ul li .active {
    background-image: url("/ccit/media/left_nav_blue_dot.jpg");
    background-position: left center;
    background-repeat: no-repeat;
    color:#FFFFFF;
}

.leftcol ul li ul li {
  border-bottom: thin solid #999;

}

#leftcol ul li ul li ul li {
 border:none;
}

.leftcol ul li a{
	font-size: 1em;	
}


.leftcol ul li ul li a{
	
	font-size: 1em;
	padding: .75em 0px .75em 1em;
}

#leftcol ul li ul li a.hover {
  background-image:none;
}


.midcol{
	width:94%;
}
.midcol p, .span-nav p{
	padding-left:10px;
	
}
#rightcol {
	display:none;
    	right: 2px;
  
	width:47%;
	padding:8px;
	z-index:999;
}

h1 {font-size:1.6em; font-weight:bold;}
h2 {font-size:1.4em; }
h3 {font-size:1.2em}
h4 {  
    line-height: 1.75em;
    margin-bottom: 0.5em;
}


.department_name {
	display:block;
	width:auto;
	height:auto;
	border-bottom: 2px solid #666666;
	padding: 10px 8px;
    background-color: #F3F3F3;
    font-size: 1.25em;
    font-weight: bold;
    
}
.department_name a{
	color:#000000;
	line-height: 1.4em;
	
}

#culinks{	
    display: block;
	margin-top:.3em;
	margin-bottom:-12px;
	text-shadow: 0 1px 1px #000;
	height:2em;
}

#culinks div{
	-moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	width:30.75%; /* largest without stacking at smaller browser widths*/
	display:block;
	float:left;
	text-align:center;	
	background-color:#E15726;
	background: -moz-linear-gradient(top, #F99100 0%, #F44100 40%, #F66733 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, top, left bottom, color-stop(0%,#F99100), color-stop(40%,#F44100), color-stop(100%,#F66733)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #F99100 0%,#F44100 40%,  #F66733 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #F99100 0%,#F44100 40%, #F66733 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #F99100 0%,#F44100 40%, #F66733 85%,#000000 100%); /* IE10+ */
	background: linear-gradient(top, #F99100 0%,#F44100 40%, #F66733 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E15726', endColorstr='#F66733',GradientType=0 ); /* IE6-9 */
}

#culinks a{
	line-height: 2em;
}


.cutools {
	background-color: #532D80;
	
}

#link2, #link3 {
	margin-left:.4em;
}

.cutools a{
	font-size:.9em;
	display:block;
	width: 100%;
	color:#FFFFFF;
	font-weight:bold;
}

#columns {
	background-image:none;
	background-color:#FFF;
}

#tools{

	right:20%;
	width:50%;
	padding:1em;
	margin:0;
	
}
#tools ul {
	padding-left:15px;
}

#tools li {
   padding:.5em;	
}

#tools a{
	color:#FFF;
	font-size:1.25em;
}


#search_container {

	float:none;
	margin-top:0;
	width:60%;
	margin-left:20%;
	padding:1.5em;
	left:0px;
}
#search_intro {
	left:0px;
	position:relative;
	float:left;
	color:#FFF;
}
.breadCrumbHolder {
	height:auto;
}

.breadcrumb {
	height:auto;
}

#breadcrumb{
	height:auto;
}

#breadCrumb ul li a {
	height:auto;
	padding:.25em;
}
#breadCrumb ul li {
	height:2em;
	font-size:1.1em;
}

.siteindex {
	display:none;
}

/*.siteindex ul li{
  display:inline-block;
  line-height:1.75em;
  padding-right:1.4em;
}
.siteindex .title{
	display:block;
	
}
*/



}

@media all and (max-width: 320px){
#active_navbar,#search_container,.rightcol,#leftmenu,#tools {
	top:21.5em;
	}
	
#active_navbar a {
padding:7px 10px 7px 5px
}
	

.breadcrumb{
	height:5em;
	width:320px;
	overflow:hidden;
}
#breadcrumb{
	height:4.5em;
}

.homePageTextRedAlert {
	padding: 5px 7px;
	font-size:.7em;
	line-height:1.25em;
	
}
#leftcol ul {
  margin:0;
}

#leftcol ul li ul li {
 font-size:1em;
 padding: 4px 0 4px 0px;
}

#leftcol ul li ul li a {
padding: 2px 0 2px 0px;
font-size:1em;
}

#leftcol ul li ul li a.hover {
background-image:none;
text_decoration:underline;
}

#leftcol ul li ul li .active {
background-image:none;
text_decoration:underline;
}

.menu_alerts {
line-height:1.5em;
padding
}

#help_li{
	
padding-right:40px;
margin-top:6px;
	
}
}
	

