Template:Team:Penn/CSS

@font-face {

 font-family: News Cycle; 
   src: url('../fonts/NewsCycle-Regular.eot'); 
   src: local("News Cycle"), url('../fonts/NewsCycle-Regular.ttf'); 

}

html { height: 100%;}

{ margin: 0;

 padding: 0;}

body { font: normal 80% Arial, Helvetica, sans-serif;

 color: #FFF;
 background: #323232 url(../images/pattern.png) repeat;

}

/* tell the browser to render HTML 5 elements as block */ article, aside, figure, footer, header, hgroup, nav, section {

 display:block;

}

p { padding: 0 0 10px 0;

 line-height: 1.7em;
 font-size: 100% }

img { border: 0;}

h1, h2, h3, h4, h5, h6 { font: bold 175% 'News Cycle', Arial, sans-serif;

 color: #fff;
 text-shadow: 0px 1px 0px #000;
 margin: 0 0 10px 0;}

h2 { font: bold 165% 'News Cycle', Arial, sans-serif;}

h3 { font: bold 130% 'News Cycle', Arial, sans-serif;

 color: #FFF;}

h4, h5, h6 { margin: 0;

 padding: 0 0 0px 0;
 font: normal 150% 'News Cycle', Arial, sans-serif;
 color: #FFF;
 line-height: 1.5em;}

h5, h6 { font: normal 95% 'News Cycle', Arial, sans-serif;

 color: #888;
 padding-bottom: 15px;}
 

span { color: #FFF;}

a, a:hover { color: #FFF;

 background: transparent;
 outline: none;
 text-decoration: underline;}

a:hover { text-decoration: none;}

ul { margin: 2px 0 22px 30px;

 line-height: 1.7em;
 font-style: normal;
 font-size: 100%;}

ol { margin: 8px 0 22px 20px;}

ol li { margin: 0 0 11px 0;}

1. main, header, #banner, #menubar, #site_content, footer, #content_grey, nav

{ margin-left: auto;

 margin-right: auto;}
 

header { width: 940px;

 position: relative;
 background: transparent;}

nav { width: 940px;

 height: 50px;}  
 

1. menubar

{ width: 940px;

 height: 50px;
 float: left;
 text-align: center; 
 background: #1D1D1D;
 background: -moz-linear-gradient(#676767, #000);
 background: -o-linear-gradient(#676767, #000);
 background: -webkit-linear-gradient(#676767, #000);
 border-radius: 7px 7px 0px 0px;
 -moz-border-radius: 7px 7px 0px 0px;
 -webkit-border: 7px 7px 0px 0px;} 
 

1. welcome

{ width: 920px;

 float: left;
 margin: 0 auto;
 text-align: center;
 padding: 0 0 10px 20px;
 background: transparent;} 
  

1. welcome h2

{ font: normal 400% 'News Cycle', Arial, sans-serif;

 text-shadow: 1px 1px #000;
 color: #FFF;}
 

ul#nav { margin:0;}

ul#nav li { padding: 0 0 0 0px;

 list-style: none;
 margin: 2px 0 0 0;
 display: inline;
 background: transparent;}

ul#nav li a { float: left;

 font: bold 120% Arial, Helvetica, sans-serif;
 height: 24px;
 margin: 10px 0 0 20px;
 text-shadow: 1px 1px #000;
 padding: 6px 20px 0 20px;
 background: transparent; 
 border-radius: 7px 7px 7px 7px;
 -moz-border-radius: 7px 7px 7px 7px;
 -webkit-border: 7px 7px 7px 7px;
 text-align: center;
 color: #FFF;
 text-decoration: none;} 
 

ul#nav li.current a, ul#nav li:hover a { color: #000;

 text-shadow: 0px 1px 0px #535353;}

1. site_content

{ width: 940px;

 overflow: hidden;
 margin-bottom: 30px;} 

.sidebar_container { float: right;

 width: 240px;
 padding-left: 20px;
 background: transparent url(../images/transparent.png) repeat;}

.sidebar { float: left;

 width: 240px;
 margin-top: 20px;
 margin-bottom: 10px;}

.sidebar_item { width: 240px;}

.sidebar h2 { padding: 5px 0 0 0;

 font: bold 150% 'News Cycle', Arial, sans-serif;
 height: 30px;}

.sidebar h3 { color: #FFF;}

1. content

{ width: 680px;

 margin-bottom: 20px;
 float: left;}

.content_item { width: 660px;

 margin-top: 5px;
 margin-bottom: 20px;}

.content_imagetext { width: 660px;

 padding: 5px;
 margin: 20px 0 0 0;
 float: left;}

.content_image { float: left;

 width: 150px;
 height: 150px;
 margin: 0 20px 10px 0;}
 

.content_container { width: 320px;

 margin: 20px 10px 0 0;
 float: left;}  
 

footer { height: 50px;

 padding-bottom: 30px;
 font-weight: bold;
 text-align: center; 
 color: #fff;
 text-shadow: 0px 1px 0px #000;}

footer a { color: #FFF;

 text-decoration: none;
 padding-bottom: 20px;}

footer a:hover { text-decoration: underline;

 color: #FFF;}

.button_small

{ font: normal 110% Arial, Helvetica, sans-serif;

 height: 15px;
 width: 80px;
 padding: 5px 2px 7px 2px;
 border: 1px solid #FFF; 
 background: #1D1D1D;
 background: -moz-linear-gradient(#676767, #000);
 background: -o-linear-gradient(#676767, #000);
 background: -webkit-linear-gradient(#676767, #000);
 border-radius: 7px 7px 7px 7px;
 -moz-border-radius: 7px 7px 7px 7px;
 -webkit-border: 7px 7px 7px 7px;
 -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
 -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
 box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;}
 

.button_small a { color: #FFF;

 padding-left: 5px;
 text-shadow: 1px 1px #000;}

.form_settings { margin: 15px 0 0 0;}

.form_settings p { padding: 0 0 4px 0;}

.form_settings span { float: left;

 width: 280px; 
 text-align: left;
 text-shadow: none;}
 

.form_settings input, .form_settings textarea { padding: 2px;

 width: 299px; 
 font: 100% arial; 
 border: 1px solid #E5E5DB; 
 background: #FFF; 
 color: #47433F;}
 

.form_settings input[type="checkbox"] { padding: 2px 0;

 width: 15px; 
 font: 100% arial; 
 border: 0; 
 background: #FFF; 
 color: #47433F;
 margin: 28px 0;}

.form_settings .submit { font: 100% arial;

 border: 1px solid; 
 width: 99px; 
 margin: 0 0 0 206px; 
 height: 26px;
 padding: 2px 0 3px 0;
 cursor: pointer; 
 background: #1D1D1D;
 background: -moz-linear-gradient(#676767, #000);
 background: -o-linear-gradient(#676767, #000);
 background: -webkit-linear-gradient(#676767, #000);
 border-radius: 7px 7px 7px 7px;
 -moz-border-radius: 7px 7px 7px 7px;
 -webkit-border: 7px 7px 7px 7px;
 -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
 -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
 box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
 color: #FFF;}

.slideshow { width: 680px;

 height: 300px;
 float: left;}  
 

/* styling for the slideshow on the homepage */ ul.slideshow {

 list-style: none;
 width: 680px;
 height: 300px;
 overflow: hidden;
 position: relative;
 margin: 0;}
 

ul.slideshow li {

 position: absolute;
 margin: 0;
 padding: 0;
 left: 0;
 right: 0;}

ul.slideshow li.show {

 z-index: 500;}

ul img {

 border: none;}

1. slideshow-caption {

 width: 680px;
 height: 38px;
 position: absolute;
 bottom: 0;
 left: 0; 
 z-index: 500;}

1. slideshow-caption .slideshow-caption-container {

 padding: 10px 25px 10px 25px; 
 background: transparent url(../images/transparent.png) repeat;  
 z-index: 1000;}

1. slideshow-caption p {

 padding: 0;
 font: normal 130% arial, sans-serif;
 color: #FFF;
 text-shadow: 1px 1px #000;}