Preview - HTML - CSS

@font-face {
    font-family: 'GothamMediumRegular';
    src: url('fonts/ufonts.com_gotham-medium-webfont.eot');
    src: url('fonts/ufonts.com_gotham-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/ufonts.com_gotham-medium-webfont.woff') format('woff'),
         url('fonts/ufonts.com_gotham-medium-webfont.ttf') format('truetype'),
         url('fonts/ufonts.com_gotham-medium-webfont.svg#GothamMediumRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'GothamBookRegular';
    src: url('fonts/ufonts.com_gotham-book-webfont.eot');
    src: url('fonts/ufonts.com_gotham-book-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/ufonts.com_gotham-book-webfont.woff') format('woff'),
         url('fonts/ufonts.com_gotham-book-webfont.ttf') format('truetype'),
         url('fonts/ufonts.com_gotham-book-webfont.svg#GothamBookRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}


*{margin:0;padding:0;outline:none;}
img{border:none;}
#wrapper{ width:640px; height:auto; margin:0 auto;}

/******************************* Header ***************************/

header{ width:640px; height:98px; float:left; background:url(../images/header_bg.png) repeat-x; font-family: 'GothamMediumRegular'; font-weight:normal; behavior: url(PIE.htc); position:relative;}
.header_left{float:left; margin:20px 0 0 40px;}
.header_right{float:right; padding:30px 47px; background:url(../images/header_right_border.png) left no-repeat;}
.header_right a{ color:#d70016; text-decoration:none; font-size:30px;}
.header_bottom{ width:100%; float:left; height:5px; background:url(../images/header_bottom_border.png) repeat-x;}

/******************************** Banner **************************/


.pager{ width:100%; float:left; background:#d70016; padding:8px 0; position:relative; z-index:9;}
.paging{ width: 140px; margin:auto;}
.paging a{ width:19px; height:19px; float:left; margin-right:10px; background:url(../images/slide-inactive.png) no-repeat;}
.paging .activeSlide{ background:url(../images/slide-active.png) no-repeat;}
.paging a:last-child{ margin-right:0;}


#banner {display:table;margin:0 auto;width:100%;text-align:center;position:relative;clear:both}

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }
 .rslides_tabs {background:#d70016;height:28px;line-height:28px;padding:7px 0 0}
 .rslides_tabs li {display:inline}
 .rslides_tabs li a {display:inline-block;width:18px;height:19px;background:url(../images/slide-inactive.png) no-repeat;text-indent:-3000em;padding:0 6px}
 .rslides_tabs .rslides_here a {background:url(../images/slide-active.png) no-repeat;}
#banner .rslides1_nav {display:none}
/******************************* content ***************************/

#content{ width:100%; float:left;}
#accordion{ width:560px; float:left;}
#accordion h1{ width:560px; float:left; padding:23px 40px 26px; font-size:30px; font-weight:normal; font-family: 'GothamMediumRegular'; color:#d70016; background:url(../images/accordion-head-bg.png) repeat-x;}
#accordion a{text-decoration: none;}
#accordion h1 span{ width:20px; height:25px; float:right; margin-top:5px; background:url(../images/accordion-arrow.png) no-repeat;}
#accordion h1:hover{ cursor:pointer;}
#accordion article{ width:auto; height:auto!important; float:left; padding:20px; font-size:13px; font-family: 'GothamBookRegular';}

#accordion_home{ width:100%; float:left;}
#accordion_home a{text-decoration: none;}
#accordion_home h1{ width:560px; float:left; padding:23px 40px 26px; font-size:30px; font-weight:normal; font-family: 'GothamMediumRegular'; color:#d70016; background:url(../images/accordion-head-bg.png) repeat-x;}
#accordion_home h1 span{ width:20px; height:25px; float:right; margin-top:5px; background:url(../images/accordion-arrow.png) no-repeat;}
#accordion_home h1:hover{ cursor:pointer;}

footer{ float:left;}
.footer_top{ width:100%; height:83px; float:left; background:url(../images/accordion-head-bg.png) repeat-x;}
.footer_top h1{ float:left; font-weight:normal; padding:23px 0px 26px 40px; font-size:30px; font-family: 'GothamMediumRegular'; color:#d70016;}
.footer_top_right{ float:right; padding:14px 40px 0 0;}
.footer_top_right a{ margin-right:8px;}
.footer_bottom{ width:560px; float:left; padding:18px 40px 30px; border-top:1px solid #ede6d6; background:#e5e3d7;}
.footer_bottom a{  color:#555454; font-family: 'GothamMediumRegular';  font-weight:normal; text-decoration:none; padding:0 2% 0 0}


/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {

}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 320px) and (max-width:601px) {
#wrapper {width:auto}
header {width:auto;float:none}
.header_left{padding:26px 0 0 5%; margin:0;}
.header_left img{ width:220px;}
.header_right{height:93px;padding:0 0.8em 0 1em;text-align:center;line-height:93px;}
.header_right a{font-size:22px;line-height:93px;}
/* #banner{ float:left; width:100%;}
#banner ul{height:163px !important;}
#banner ul li{width:300px !important; float:left;}
#banner ul li img{display:block; width:100%; height:auto;} */
#accordion{width:100%}
#accordion h1{padding:29px 5% 30px; font-size:24px;float:none;width:90%;clear:both;}
#accordion h1 span{ margin-top:-2px;}
#accordion_home{ width:100%; float:left;}
#accordion_home h1{ width:90%;float:left; padding:28px 5% 21px; font-size:18px; font-weight:normal; font-family: 'GothamMediumRegular'; color:#d70016; background:url(../images/accordion-head-bg.png) repeat-x;}
#accordion_home h1 span{ width:20px; height:25px; float:right; margin-top:0px; background:url(../images/accordion-arrow.png) no-repeat;}
footer{width:100%}
.footer_top h1{ padding: 0 5px 0 5%;line-height:83px; font-size:15px;}
.footer_top_right{ padding:25px 5% 0 0;}
.footer_top_right a{float:left; width:35px; margin-right:4px;}
.footer_top_right a img{width:100%;}
.footer_bottom{ width:90%; padding:18px 5% 30px;}
.footer_bottom a{ margin-right:28px; font-size:18px;}
}
/* Smartphones (portrait) ----------- */
@media only screen
and (min-width : 320px) and (max-width:650px) {

#wrapper {width:auto}
header {width:auto;float:none}
.header_left{padding:32px 0 0 13px; margin:0;}
.header_left img{ width:175px;}
.header_right{height:93px;padding:0 0.8em 0 1em;text-align:center;line-height:93px;}
.header_right a{font-size:22px;}
/* #banner{ float:left; width:100%;}
#banner ul{height:163px !important;}
#banner ul li{width:300px !important; float:left;}
#banner ul li img{display:block; width:100%; height:auto;}
#banner ul li a{display:block} */
#accordion{width:100%}
#accordion h1{padding:29px 5% 30px; font-size:15px;float:none;width:90%;clear:both;}
#accordion h1 span{ margin-top:-2px;}
#accordion_home{ width:100%; float:left;}
#accordion_home h1{ width:90%;float:left; padding:28px 5% 21px; font-size:18px; font-weight:normal; font-family: 'GothamMediumRegular'; color:#d70016; background:url(../images/accordion-head-bg.png) repeat-x;}
#accordion_home h1 span{ width:20px; height:25px; float:right; margin-top:0px; background:url(../images/accordion-arrow.png) no-repeat;}
footer{width:100%}
.footer_top h1{ padding: 0 5px 0 5%;line-height:83px; font-size:15px;}
.footer_top_right{ padding:25px 5% 0 0;}
.footer_top_right a{float:left; width:35px; margin-right:4px;}
.footer_top_right a img{width:100%;}
.footer_bottom{ width:90%; padding:18px 5% 30px;}
.footer_bottom a{ margin-right:13px; font-size:14px;}
}

/* iPhone (portrait) ----------- */
@media only screen
and (max-width : 360px) {
#wrapper {width:auto}
header {width:100%;float:none}
.header_left{padding:32px 0 0 13px; margin:0;}
.header_left img{ width:135px;}
.header_right{height:93px;padding:0 0.8em 0 1em;text-align:center;line-height:93px;}
.header_right a{font-size:22px;}

#accordion{width:100%}
#accordion h1{padding:29px 5% 30px; font-size:15px;float:none;width:90%;clear:both;}
#accordion h1 span{ margin-top:-2px;}
#accordion_home{ width:100%; float:left;}
#accordion_home h1{ width:90%;float:left; padding:28px 5% 21px; font-size:14px; font-weight:normal; font-family: 'GothamMediumRegular'; color:#d70016; background:url(../images/accordion-head-bg.png) repeat-x;}
#accordion_home h1 span{ width:20px; height:25px; float:right; margin-top:0px; background:url(../images/accordion-arrow.png) no-repeat;}
footer{width:100%}
.footer_top h1{ padding: 0 5px 0 5%;line-height:83px; font-size:14px;}
.footer_top_right{ padding:29px 5% 0 0;}
.footer_top_right a{float:left; width:25px; margin-right:4px;}
.footer_top_right a img{width:100%;}
.footer_bottom{ width:90%; padding:18px 5% 30px;}
.footer_bottom a{ margin-right:13px; font-size:14px;}


}
@media only screen
and (max-width : 300px) and (min-width:200px){
.header_left{padding:35px 0 0 13px; margin:0;}
.header_left img{ width:125px;}
.footer_top h1 {font-size:10px}
.footer_top_right{ padding:29px 5% 0 0;}
.footer_top_right a{float:left; width:20px; margin-right:4px;}
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}