*/
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.row:after,
.clearfix:after {
clear: both; }
.row,
.clearfix {
zoom: 1; }
/* You can also use a
to clear columns */
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
/* --------------------------------------------------
Reveal Modals
-------------------------------------------------- */
.reveal-modal-bg {
position: fixed;
height: 100%;
width: 100%;
background: #000;
background: rgba(0,0,0,.5);
z-index: 100;
display: none;
top: 0;
left: 0;
}
.reveal-modal {
visibility: hidden;
top: 100px;
left: 50%;
margin-left: -300px;
width: 520px;
background: #f5f5f5 url('../images/modal-gloss.png') no-repeat -200px -80px;
position: absolute;
z-index: 101;
padding: 30px 40px 34px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
-box-shadow: 0 0 10px rgba(0,0,0,.4);
}
.reveal-modal.small { width: 200px; margin-left: -140px;}
.reveal-modal.medium { width: 400px; margin-left: -240px;}
.reveal-modal.large { width: 600px; margin-left: -340px;}
.reveal-modal.xlarge { width: 800px; margin-left: -440px;}
.reveal-modal .close-reveal-modal {
font-size: 22px;
line-height: .5;
position: absolute;
top: 8px;
right: 11px;
color: #aaa;
text-shadow: 0 -1px 1px rbga(0,0,0,.6);
font-weight: bold;
cursor: pointer;
}
/*
NOTES
Close button entity is ×
Example markup
Awesome. I have it.
Your couch. I it's mine.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices aliquet placerat. Duis pulvinar orci et nisi euismod vitae tempus lorem consectetur. Duis at magna quis turpis mattis venenatis eget id diam.
×
*/
/* ==|== Primary Styles =====================================================
Author: Jimmy Multani
Site: GuildWars2Live.com
Site Owner: Peter Chan;
========================================================================== */
/* === UNIVERSAL & TAG STYLING === */
html {
height: 100%;
background: #fff url('../images/backgrounds/main_bg_medium.jpg') top center no-repeat;
}
body {
height: 100%;
font-family: 'OpenSansRegular', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'LeagueGothicRegular', sans-serif;
font-weight: normal;
text-transform: uppercase;
line-height: 1;
margin: 0 0 10px;
}
h1, article h1 { font-size: 2.5em; }
h2, article h2 { font-size: 2.0em; }
h3, article h3 { font-size: 1.7em; }
h4, article h4 { font-size: 1.3em; }
object, embed { display: block; }
video {
width: 100%;
height: auto;
}
.left { float: left; }
.right { float: right; }
.textright { text-align: right; }
.center { text-align: center; }
.bold { font-weight:bold; }
.italics { font-style: italic; }
.maxwidth { width: 100%; }
.scalarimg {
width: 100%;
height: auto;
}
.columnstyle {
background: #fff;
padding: 10px;
}
.widget {
border-bottom: 1px dotted #999;
margin: 0 0 10px 0;
clear: both;
}
.widget-content {
font-size: 14px;
}
.widget-content p { margin-top: 0; }
/* =====================================================================
HEADER STYLES
===================================================================== */
header { position: relative; }
#topnav {
height: 40px;
background: #333;
font-family: 'LeagueGothicRegular', sans-serif;
text-transform: uppercase;
font-size: 1.5em;
color: #f5f5f5;
position: relative;
}
#topnav a {
float: left;
display: block;
color: #f5f5f5;
line-height: 40px;
padding: 0 10px;
}
#topnav a:visited { color: #f5f5f5; }
#topnav a:hover {
background: #c2272d;
color: #f5f5f5;
}
.statusonline {
background: #27c22d;
}
#rightnav {
float: right;
}
#searchbox {
float: left;
padding: 5px;
position: relative;
}
#searchbox input {
display: block;
width: 218px;
height: 28px;
border: 1px solid #fff;
font-size: 14px;
line-height: 28px;
text-indent: 7px;
padding: 0;
margin: 0;
}
#searchbox #submit {
display: block;
width: 30px;
height: 30px;
background-color: #fff; /*important*/
border: 0px none; /*important*/
padding: 0;
margin: 0;
position: absolute; /*important*/
top: 5px;
left: 195px;
}
#loginlink {
float: left;
display: block;
}
#loginlink #dropdown {
width: 40px;
height: 40px;
padding: 0;
}
#loginlink a img {
display: block;
width: 30px;
height: 30px;
padding: 5px;
}
#usernav {
display: none;
width: 200px;
background: #333;
position: absolute;
top: 40px;
right: 0px;
z-index: 999;
}
#usernav a { float: none; }
#usernav div a { line-height: 35px; }
#usernav #greeting { padding: 0 10px; }
#navloginerror {
height: 40px;
background: #c2272d;
font-family: 'LeagueGothicRegular', sans-serif;
text-transform: uppercase;
font-size: 1.5em;
color: #f5f5f5;
position: relative;
}
#loginerror {
position: absolute;
bottom:195px;
left: 264px;
z-index: 10;
}
#loginmodal {
background: url('../images/backgrounds/login2.jpg') top right no-repeat;
color: #f5f5f5;
}
#loginmodal input[type="text"], #loginmodal input[type="password"] {
width: 150px;
height: 32px;
padding: 5px;
border: 5px solid #333;
}
#loginmodal input[type="text"]:focus, #loginmodal input[type="password"]:focus {
outline: none;
}
#loginmodal label {
font-size: 21px;
font-family: 'LeagueGothicRegular', sans-serif;
text-transform: uppercase;
position: relative;
}
#loginmodal label span {
line-height: 40px;
position: absolute;
bottom: 0px;
left: 50px;
}
#loginpage, #loginredirectpage {
height: 500px;
background: url('../images/backgrounds/login2.jpg') top right no-repeat;
color: #f5f5f5;
position: relative;
}
#loginpage .columnstyle, #loginredirectpage .columnstyle { background: none; }
#loginredirectpage { background: url('../images/backgrounds/login1.jpg') bottom right no-repeat; }
#loginredirectpage p {
width: 360px;
font-size: 1.5em;
font-family: 'LeagueGothicRegular', sans-serif;
text-transform: uppercase;
}
#loginform, #loginredirectpage p {
position: absolute;
left: 30px;
bottom: 100px;
}
#loginform input[type="text"], #loginform input[type="password"] {
width: 150px;
height: 32px;
padding: 5px;
border: 5px solid #333;
}
#loginform input[type="text"]:focus, #loginform input[type="password"]:focus {
outline: none;
}
#loginform label {
font-size: 21px;
font-family: 'LeagueGothicRegular', sans-serif;
text-transform: uppercase;
position: relative;
}
#loginform label span {
line-height: 40px;
position: absolute;
bottom: 0px;
left: 50px;
}
#autologin { display: none; }
#autologinlabel {
display: block;
height: 40px;
}
#logincheckbox {
width: 36px;
height: 34px;
background: url('../images/checkbox.png') 0 0 no-repeat;
margin-top: 2px;
}
#loginbutton {
width: 140px;
line-height: 40px;
background: #333;
border: none;
color: #f5f5f5;
font-size: 1.7em;
font-family: 'LeagueGothicRegular', sans-serif;
text-transform: uppercase;
position: absolute;
bottom: 0px;
right: 0px;
}
#loginbutton:hover {
background: #c2272d;
}
.partnerimg { margin-bottom: 10px; }
#intromodal ul { list-style: square; }
#intromodal p {
margin: 0 0 10px 0;
}
#communitylinks {
position: absolute;
bottom: 0px;
right: 10px;
}
#communitylinks a img {
border-bottom: 5px solid;
}
#communitylinks #twitter img { border-bottom-color: #9AE4E8; }
#communitylinks #facebook img { border-bottom-color: #3B5998; }
#communitylinks #youtube img { border-bottom-color: #f00; }
#communitylinks #steam img { border-bottom-color: #e5e5e5; }
#communitylinks #gplus img { border-bottom-color: #f33; }
#communitylinks #rss img { border-bottom-color: #ff9900; }
/* =====================================================================
VIDEO / STREAM PLAYER BASED STYLES
===================================================================== */
#livestreamcontrols {
width: 100%;
height: 32px;
background: #fff;
color: #333;
position: relative;
}
#livestreamcontrols a {
-webkit-transition: all 0s linear;
-moz-transition: all 0s linear;
-o-transition: all 0s linear;
transition: all 0s linear;
}
#playpause {
display: block;
width: 64px;
height: 32px;
background: url('../images/streamcontrols.png') 0px -64px no-repeat;
text-indent: -9999px;
}
#playpause:hover { background-position: 0px -96px; }
#playpause.active { background-position: 0px 0px; }
#playpause.active:hover { background-position: 0px -32px; }
#mute {
display: block;
width: 32px;
height: 32px;
background: url('../images/streamcontrols.png') 0px -128px no-repeat;
text-indent: -9999px;
}
#mute:hover { background-position: 0px -160px; }
#mute.active { background-position: -32px -128px; }
#mute.active:hover { background-position: -32px -160px; }
#volumeslider {
width: 100px;
position: absolute;
left: 110px;
top: 14px;
}
.ui-widget-content {
background: #666;
color: #333;
}
.ui-slider-horizontal { height: 4px; }
.ui-slider-horizontal .ui-slider-handle {
width: 12px;
height: 24px;
background: #333;
margin-left: -6px;
position: absolute;
top: -10px;
z-index: 2;
}
#livestreamstatus {
display: block;
width: 355px;
height: 24px;
line-height: 24px;
background: #e5e5e5;
color: #333;
font-size: 18px;
font-family: 'LeagueGothicRegular', sans-serif;
text-transform: uppercase;
padding: 0 7px;
position: absolute;
top: 4px;
right: 0px;
overflow: hidden;
}
#livestreamstatus span { color: #c2272d; }
#ownedplayer object, #ownedplayer embed {
width: 100%;
height: 337px; /* 374 */
}
#livestream object { width: 600px; height: 338px; }
#justinplayer object, #justinplayer embed {
width: 100%;
height: 366px;
}
#chatbox object, #chatbox embed {
width: 100%;
z-index: 99;
}
#o3chat, #o3chat embed { height: 337px !important; }
#lschat, #lschat embed { height: 370px !important; }
#jtvchat, #jtvchat iframe { height: 366px !important; width: 280px; display: block; }
.mainwatch iframe, .mainwatch embed {
display: block;
width: 100%;
height: 366px;
}
/* =====================================================================
NEWS / ARTICLE BASED STYLES
===================================================================== */
.newscontent, .articlecontent {
border-bottom: 1px dotted #999;
padding: 0 7px;
margin: 0 0 20px;
position: relative;
}
.newscontent h1, .articlecontent h1 { width: 430px; }
.newscontent span, .articlecontent span, #vodinfo span,
.latestforumtopic span {
font-size: 0.8em;
font-family: Georgia, serif;
color: #999;
font-style: italic;
}
.newscontent p b, .newscontent p strong,
.articlecontent p b, .articlecontent p strong {
font-family: 'OpenSansBold', sans-serif;
font-weight: normal;
}
.quote {
border-left: 6px solid #c2272d;
color: #646464;
font-family: Georgia, serif;
font-style: italic;
padding: 0 10px;
margin: 0 30px;
}
.morenews {
display: block;
width: 160px;
line-height: 40px;
background: #333;
color: #f5f5f5 !important;
font-size: 1.7em;
font-family: 'LeagueGothicRegular', sans-serif;
text-transform: uppercase;
text-align: center;
margin: 0 auto; margin-top: 50px;
}
.morenews:hover {
background: #c2272d;
color: #f5f5f5;
}
/* =====================================================================
PAGE BASED STYLES
===================================================================== */
#verticalnav a { /* Navigation for Feedback/Privacy Policy etc... */
display: block;
font-size: 1.5em;
font-family: 'LeagueGothicRegular', sans-serif;
text-transform: uppercase;
}
.librarymain {
float: left;
width: 33%;
min-height: 180px;
}
.librarymaininner {
margin: 0 5px;
}
.librarymaininner h3 { font-size: 1.2em; }
#librarypagination {
text-align: center;
clear: both;
margin: 10px 0 15px;
}
#librarypagination span {
background: #333;
color: #f5f5f5;
font-size: 16px;
margin: 5px 2px;
}
#librarypagination span.selected {
background: #d35257;
padding: 7px 10px;
}
#librarypagination a {
background: #333;
color: #f5f5f5;
padding: 7px 10px;
}
#librarypagination a:hover { background: #c2272d; border-bottom-color: #333; }
#libraryvideos {
background: #333;
color: #f5f5f5;
padding: 3px 7px;
margin-bottom: 15px;
}
#libraryvideos h2 { margin: 0; }
.videoresults {
min-height: 103px;
position: relative;
border-bottom: 1px dotted #999;
}
.videoresults h2 { margin-bottom: 0; }
.videoresults a { text-decoration: none; }
.videoresults img { margin: 5px 10px 0 0; }
.videoresults span {
color: #999;
font-size: 12px;
font-style: italic;
position: static;
}
.videoresults .disquscount {
font-weight: bold;
margin-bottom: 7px;
position: absolute;
bottom: 0px;
right: 0px;
}
.searchresultthumbnail
{
width: 160px;
height: 90px;
}
.guidthumbnail
{
width: 190px; /* 227 */
height: 104px; /* 127 */
}
#schedule p {
margin: 7px 0 20px;
}
#timezones {
width: 695px;
height: 40px;
margin: 0 auto;
margin-bottom: 25px;
}
#timezones a {
float: left;
display: block;
background: #333;
color: #f5f5f5;
line-height: 40px;
font-size: 1.3em;
font-family: 'LeagueGothicRegular', sans-serif;
text-transform: uppercase;
padding: 0 15px;
margin: 0 5px 0 0;
}
#vodinfo { position: relative; }
#vodtitle { padding: 5px 0 0;}
#sociallinks {
width: 146px;
position: absolute;
top: 5px;
right: 0px;
}
#socialinks a { display: block; }
.plusonefix { display: block; } /* fix for google plus badge being lower than other icons */
.plusonefix img { display: block; }
#sociallinks .addthis_button_compact.addthisfix { padding: 0 0 0 2px; }
.addthis_default_style .at300b:last-child, /* fix for last share icon, remove excess padding */
.addthis_default_style .at300bo:last-child,
.addthis_default_style .at300m:last-child {
padding: 0 0 0 2px;
}
.addthis_default_style .at15t_expanded, .addthis_default_style .at15t_compact { margin-right: 0; }
#at15s a {
-webkit-transition: all 0s linear !important;
-moz-transition: all 0s linear !important;
-o-transition: all 0s linear !important;
transition: all 0s linear !important;
}
#voddescription { margin-bottom: 30px; }
#tags {
background: #f8f8f8;
border: 1px solid #e8e8e8;
color: #727272;
font-size: 12px;
font-family: Georgia, serif;
font-style: italic;
padding: 5px;
}
#tags a, #tags a:visited, #tags a:hover, #tags a:active { color: #727272; }
#feedback form { padding: 10px 0 20px; }
#feedback form label {
display: block;
float: left;
width: 80px;
line-height: 52px;
font-family: 'LeagueGothicRegular', sans-serif;
font-size: 1.8em;
text-transform: uppercase;
padding: 0 10px 0 0;
}
#feedback form input[type="text"], #feedback form textarea {
display: block;
width: 400px;
height: 32px;
border: 5px solid #333;
padding: 5px;
}
#feedback form textarea { height: 200px; }
#feedback form input[type="submit"] {
width: 420px;
height: 50px;
line-height: 50px;
background: #333;
border: none;
color: #f5f5f5;
font-size: 2em;
font-family: 'LeagueGothicRegular', sans-serif;
text-transform: uppercase;
margin: 0 0 0 90px
}
#feedback form input[type="submit"]:hover { background: #c2272d; }
#feedback form p { padding: 0 0 0 90px; }
.staffbook {
width:100%;
height: 500px;
}
.staffmember {
width: 32%;
float: left;
padding-right: 5px;
}
.staffdescription {
margin: 4px 0px 4px 0px;
height: 260px;
overflow: auto;
border-bottom: solid;
}
.stafflinks {
margin-top: 8px;
}
/* =====================================================================
WIDGET BASED STYLES
===================================================================== */
.latesttopics { padding: 0 0 5px; }
.latestforumtopic {
padding: 5px 0;
}
.latestforumtopic h2 { margin: 0; }
.latestondemand {
margin-bottom: 10px;
position: relative;
}
.latestondemand .info {
width: 100%;
background: transparent url('../images/textoverlay.png') repeat;
color: #e5e5e5 !important;
text-indent: 5px;
padding: 5px 0;
position: absolute;
bottom: 0px;
left: 0px;
}
.latestondemand .smallinfo {
width: 100%;
background: transparent url('../images/textoverlay.png') repeat;
color: #e5e5e5 !important;
padding: 5px 0;
text-indent: 5px;
position: absolute;
bottom: 0px;
left: 0px;
}
.info h4, .smallinfo h4, .info small {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 5px 0 0;
margin: 0;
}
.watchmore {
display: block;
background: #333;
color: #f5f5f5 !important;
font-size: 2.5em;
font-family: 'LeagueGothicRegular', sans-serif;
text-transform: uppercase;
margin: 0 0 10px;
}
.watchmore:hover { background-color: #c2272d; }
.friends { margin: 0 0 10px; }
.friends img {
display: block;
float: left;
width: 50%;
height: auto;
}
.adsponsor { text-align: center; } /* for centering all ads */
.adsponsor object, .adsponsor embed, .adsponsor img {
display: block;
width: 100%;
height: auto;
margin: 0 0 10px 0;
}
/* =====================================================================
FOOTER STYLES
===================================================================== */
footer {
background: #333;
color: #f5f5f5;
font-size: 11px;
}
footer a, footer a:visited, footer a:hover, footer a:active { color: #f5f5f5; margin-right: 10px; }
#bottomlogo {
float: left;
display: block;
margin: 20px 10px 0 0;
}
#leftfooter #navlinks {
float: left;
display: block;
width: 330px;
margin: 20px 0;
}
#rightfooter p {
margin: 10px 0;
}
/* === Sticky Footer Styles === */
.stickywrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -117px;
}
footer, .push {
height: 117px;
clear: both;
}
.push { padding-top: 30px; }
/* -------------------------------------------------------------- */
#noticesuccess {
background-color: #27c22d;
padding: 10px;
color: #ffffff;
margin-bottom: 5px;
}
#noticeunsuccessful {
background-color: #c2272d;
padding: 10px;
color: #ffffff;
margin-bottom: 5px;
}
.noticewarning {
background-color: #ffa500;
padding: 10px;
color: #000000;
}
/* ==|== media queries ======================================================
EXAMPLE Media Query for Responsive Design.
This example overrides the primary ('mobile first') styles
Modify as content requires.
========================================================================== */
@media only screen and (min-width: 1200px) {
/* Style adjustments for viewports that meet the condition */
body { font-size: 1em; }
#topnav a, .loginlink span {
padding: 0 12px;
}
#usernav {
width: 250px;
}
#usernav div a { line-height: 40px; }
#ownedplayer object, #ownedplayer embed { height: 405px; } /* 449px */
#justinplayer object, #justinplayer embed { height: 434px; }
#livestream object { width: 720px; height: 405px;}
#livestreamstatus { width: 480px; }
#o3chat, #o3chat embed { height: 405px !important; }
#jtvchat, #jtvchat iframe { height: 464px !important; width: 340px; }
#lschat, #lschat embed { height: 437px !important; }
.newscontent h1, .articlecontent h1 { width: 550px; }
.mainwatch iframe, .mainwatch embed { height: 439px; }
.videoresults span {
position: absolute;
top: 5px;
right: 0px;
}
#leftfooter #navlinks { width: 420px; }
.guidthumbnail { width: 227px; height: 127px; }
}
@media only screen and (min-width: 1px) and (max-width: 959px) {
#topnav a, .loginlink span {
font-size: 0.7em;
padding: 0 8px;
}
#usernav {
width: 150px;
}
#usernav div a { line-height: 30px; }
#logo {
width: 80%;
height: auto;
margin-top: 8px;
}
#communitylinks a img { width: 36px; height: auto; }
#ownedplayer object, #ownedplayer embed { height: 266px; } /* 294px */
#justinplayer object, #justinplayer embed { height: 294px; }
#livestream object { width: 472px; height: 266px;}
#livestreamstatus { width: 225px; }
#o3chat, #o3chat embed { height: 266px !important; }
#jtvchat, #jtvchat iframe { height: 294px !important; width: 216px; }
#lschat, #lschat embed { height: 298px !important; }
.newscontent h1, .articlecontent h1 { width: 300px; }
.mainwatch iframe, .mainwatch embed { height: 288px; }
.videoresults span {
position: static;
}
.friends img {
display: block;
width: 100%;
height: auto;
}
.stickywrapper { margin: 0 auto -136px; }
footer, .push { height: 136px; }
#leftfooter #navlinks { width: 234px; }
.staffdescription {
margin: 4px 0px 4px 0px;
height: 300px;
overflow: auto;
}
.guidthumbnail { width: 150px; height: 84px; }
}
/* ==|== non-semantic helper classes ========================================
Please define your styles before this section.
========================================================================== */
/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }
/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
/* ==|== font faces =======================================================
font faces.
Add font face values here.
========================================================================== */
@font-face {
font-family: 'LeagueGothicRegular';
src: url('fonts/League_Gothic-webfont.eot');
src: url('fonts/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/League_Gothic-webfont.woff') format('woff'),
url('fonts/League_Gothic-webfont.ttf') format('truetype'),
url('fonts/League_Gothic-webfont.svg#LeagueGothicRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'OpenSansLight';
src: url('fonts/OpenSans-Light-webfont.eot');
src: url('fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-Light-webfont.woff') format('woff'),
url('fonts/OpenSans-Light-webfont.ttf') format('truetype'),
url('fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'OpenSansLightItalic';
src: url('fonts/OpenSans-LightItalic-webfont.eot');
src: url('fonts/OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-LightItalic-webfont.woff') format('woff'),
url('fonts/OpenSans-LightItalic-webfont.ttf') format('truetype'),
url('fonts/OpenSans-LightItalic-webfont.svg#OpenSansLightItalic') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'OpenSansRegular';
src: url('fonts/OpenSans-Regular-webfont.eot');
src: url('fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-Regular-webfont.woff') format('woff'),
url('fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
url('fonts/penSans-Regular-webfont.svg#OpenSansRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'OpenSansItalic';
src: url('fonts/OpenSans-Italic-webfont.eot');
src: url('fonts/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-Italic-webfont.woff') format('woff'),
url('fonts/OpenSans-Italic-webfont.ttf') format('truetype'),
url('fonts/OpenSans-Italic-webfont.svg#OpenSansItalic') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'OpenSansSemibold';
src: url('fonts/OpenSans-Semibold-webfont.eot');
src: url('fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-Semibold-webfont.woff') format('woff'),
url('fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
url('fonts/OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'OpenSansSemiboldItalic';
src: url('fonts/OpenSans-SemiboldItalic-webfont.eot');
src: url('fonts/OpenSans-SemiboldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-SemiboldItalic-webfont.woff') format('woff'),
url('fonts/OpenSans-SemiboldItalic-webfont.ttf') format('truetype'),
url('fonts/OpenSans-SemiboldItalic-webfont.svg#OpenSansSemiboldItalic') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'OpenSansBold';
src: url('fonts/OpenSans-Bold-webfont.eot');
src: url('fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-Bold-webfont.woff') format('woff'),
url('fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
url('fonts/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'OpenSansBoldItalic';
src: url('fonts/OpenSans-BoldItalic-webfont.eot');
src: url('fonts/OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-BoldItalic-webfont.woff') format('woff'),
url('fonts/OpenSans-BoldItalic-webfont.ttf') format('truetype'),
url('fonts/OpenSans-BoldItalic-webfont.svg#OpenSansBoldItalic') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'OpenSansExtrabold';
src: url('fonts/OpenSans-ExtraBold-webfont.eot');
src: url('fonts/OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-ExtraBold-webfont.woff') format('woff'),
url('fonts/OpenSans-ExtraBold-webfont.ttf') format('truetype'),
url('fonts/OpenSans-ExtraBold-webfont.svg#OpenSansExtrabold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'OpenSansExtraboldItalic';
src: url('fonts/OpenSans-ExtraBoldItalic-webfont.eot');
src: url('fonts/OpenSans-ExtraBoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-ExtraBoldItalic-webfont.woff') format('woff'),
url('fonts/OpenSans-ExtraBoldItalic-webfont.ttf') format('truetype'),
url('fonts/OpenSans-ExtraBoldItalic-webfont.svg#OpenSansExtraboldItalic') format('svg');
font-weight: normal;
font-style: normal;
}
/* ==|== print styles =======================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@media print {
* { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
}