2022-10-26 17:38:53 +00:00
/ *
Simple Responsive Template v 1 . 2 test
primary styles
Author : www . prowebdesign . ro
Add your own styles to customize the project .
BASE ( MOBILE ) SIZE
These are the mobile styles . It ' s what people see on their phones .
Remember , keep it light : Speed is Important .
* /
/* typography */
body {
color : # 666 ;
font-family : 'Ubuntu' , Arial , Helvetica , sans-serif ;
font-size : 1em ;
line-height : 1 . 4em ;
font-weight : normal ;
}
h1 , h2 , h3 , h4 , h5 , h6 {
font-weight : normal ;
font-family : 'Droid Serif' , Arial , Helvetica , sans-serif ;
line-height : 1 . 5em ;
margin : . 45em 0 ;
padding : 0 ;
}
/* links */
a ,
a : visited ,
a : active ,
a : hover { color : #0099ff ; }
a : hover { text-decoration : none ; }
/* Box sizing. Awesome thing. Read about it here: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp */
* { box-sizing : border-box ;
-moz-box-sizing : border-box ; }
/* structure */
. wrapper {
width : 92 % ;
margin : 0 auto ;
}
header {
padding : 15px 0 ;
}
# banner {
text-align : center ;
}
# hero ,
# page-header {
background : # f3f3f3 ;
border-top : 1px solid # e2e2e2 ;
border-bottom : 1px solid # e2e2e2 ;
padding : 20px 0 ;
}
# hero h1 {
line-height : 1 . 2em ;
margin-top : 0px ;
margin-bottom : 10px ; }
. flexslider {
display : none ;
}
# content {
margin : 40px 0 ;
}
aside {
margin : 40px 0 ;
}
p { margin : 0 0 1.5 em ; }
/* RESPONSIVE IMAGES */
img { max-width : 100 % ; height : auto ; }
/*MAIN MENU*/
. menu-toggle {
display : block ;
padding : 10px ;
margin : 20px 0 0 ;
background : # 666 ;
color : # fff ;
cursor : pointer ;
text-transform : uppercase ;
font-size : 20px ;
}
. menu-toggle . toggled-on {
background : # 0099ff ;
}
. srt-menu {
display : none ;
}
. srt-menu . toggled-on {
display : block ;
position : relative ;
z-index : 10 ;
}
. srt-menu {
clear : both ;
margin-bottom : 60px ;
}
. srt-menu li a {
background : # dadada ;
display : block ;
margin : 1px 0 ;
padding : 10px ;
text-decoration : none ;
}
. srt-menu li a : hover {
background : # 0099ff ;
color : # fff ;
}
. srt-menu li li a {
background : # e8e8e8 ;
padding-left : 40px ;
}
. srt-menu li li li a {
background : # efefef ;
padding-left : 80px ;
}
/*SECONDARY MENU*/
# secondary-navigation {
margin-bottom : 60px ;
}
# secondary-navigation ul {
margin : 0 ;
padding : 0 ;
}
# secondary-navigation ul li a {
background : # E6E6E6 ;
display : block ;
margin : 5px 0 ;
padding : 10px ;
text-decoration : none ;
}
# secondary-navigation ul li a : hover ,
# secondary-navigation ul li . active a {
background : # 0099ff ;
color : # fff ;
}
/*SPACE GRID ELEMENTS VERTICALLY, SINCE THEY ARE ONE UNDER ANOTHER SO FAR*/
. grid_1 ,
. grid_2 ,
. grid_3 ,
. grid_4 ,
. grid_5 ,
. grid_6 ,
. grid_7 ,
. grid_8 ,
. grid_9 ,
. grid_10 ,
. grid_11 ,
. grid_12 {
margin-bottom : 40px ;
/*positioning and padding*/
position : relative ;
min-height : 1px ;
padding-left : 15px ;
padding-right : 15px ;
}
/*FOOTER*/
footer {
clear : both ;
font-size : 80 % ;
padding : 20px 0 ;
}
footer ul {
margin : 0 ;
padding : 0 ;
}
/*colors and backgrounds*/
body {
background : # fff ;
}
h1 , h2 , h3 , h4 , h5 , h6 {
color : # 333 ;
}
footer {
background : # 333 ;
color : # ccc ;
}
footer h1 , footer h2 , footer h3 , footer h4 {
color : # CCC ;
margin-bottom : 10px ;
}
footer ul {
margin : 0 0 0 8 % ;
}
a . buttonlink {
background : # 0099ff ;
border-radius : 7px ;
color : # fff ;
display : block ;
float : left ;
margin : 10px 15px 10px 0 ;
padding : 10px ;
text-decoration : none ;
}
a . buttonlink : hover {
background : # 8dbc01 ;
}
. greenelement {
background : # 5ec79e ;
color : # fff ;
}
. violetelement {
background : # 887dc2 ;
color : # fff ;
}
/* Contain floats*/
. clearfix : before ,
. clearfix : after ,
. row : before ,
. row : after {
content : " " ;
display : table ;
}
. clearfix : after ,
. container : after ,
. row : after {
clear : both ;
}
/ *
LARGER MOBILE DEVICES
This is for mobile devices with a bit larger screens .
* /
@ media only screen and ( min-width : 481px ) {
# banner {
float : left ;
text-align : left ;
margin-bottom : -20px ; /*this depends on the height of the logo*/
}
. menu-toggle { /*make menu float right, instead of sitting under the logo*/
margin-top : 10px ; /*this depends on the height of the logo*/
float : right ;
}
}
/ *
TABLET & SMALLER LAPTOPS
The average viewing window and preferred media query for those is 768px .
But I think that some more breathing space is good : )
* /
@ media only screen and ( min-width : 920px ) {
. wrapper {
max-width : 1200px ;
margin : . 75em auto ;
}
# banner {
float : left ;
text-align : left ;
margin-bottom : 0px ;
}
header {
padding : 0 ;
}
# content {
float : left ;
width : 65 % ;
}
# content . wide-content {
float : none ;
width : 100 % ;
}
. flexslider {
display : block ;
/*demo 1 slider theme*/
margin : 0 0 60px ;
background : # fff ;
border : 4px solid # fff ;
-webkit-border-radius : 4px ;
-moz-border-radius : 4px ;
-o-border-radius : 4px ;
border-radius : 4px ;
box-shadow : 0 1px 4px rgba ( 0 , 0 , 0 , . 2 ) ;
-webkit-box-shadow : 0 1px 4px rgba ( 0 , 0 , 0 , . 2 ) ;
-moz-box-shadow : 0 1px 4px rgba ( 0 , 0 , 0 , . 2 ) ;
-o-box-shadow : 0 1px 4px rgba ( 0 , 0 , 0 , . 2 ) ;
}
aside {
float : right ;
width : 30 % ;
}
/*** MAIN MENU - ESSENTIAL STYLES ***/
. menu-toggle { display : none ; }
# menu-main-navigation { display : block ; }
. srt-menu , . srt-menu * {
margin : 0 ;
padding : 0 ;
list-style : none ;
}
. srt-menu ul {
position : absolute ;
display : none ;
width : 12em ; /* left offset of submenus need to match (see below) */
}
. srt-menu ul li {
width : 100 % ;
}
. srt-menu li : hover {
visibility : inherit ; /* fixes IE7 'sticky bug' */
}
. srt-menu li {
float : left ;
position : relative ;
margin-left : 1px ;
}
. srt-menu li li {
margin-left : 0px ;
}
. srt-menu a {
display : block ;
position : relative ;
}
. srt-menu li : hover ul ,
. srt-menu li . sfHover ul {
display : block ;
left : 0 ;
top : 45px ; /* match top ul list item height */
z-index : 99 ;
-webkit-box-shadow : 2px 3px 2px 0px rgba ( 00 , 00 , 00 , . 3 ) ;
box-shadow : 2px 3px 2px 0px rgba ( 00 , 00 , 00 , . 3 ) ;
}
ul . srt-menu li : hover li ul ,
ul . srt-menu li . sfHover li ul {
top : -999em ;
}
ul . srt-menu li li : hover ul ,
ul . srt-menu li li . sfHover ul {
left : 12em ; /* match ul width */
top : 0 ;
}
ul . srt-menu li li : hover li ul ,
ul . srt-menu li li . sfHover li ul {
top : -999em ;
}
ul . srt-menu li li li : hover ul ,
ul . srt-menu li li li . sfHover ul {
left : 10em ; /* match ul width */
top : 0 ;
}
/*** DEMO1 SKIN ***/
# topnav , . srt-menu {
float : right ;
margin : . 35em 0 0 0 ;
}
. srt-menu a {
text-decoration : none ;
}
. srt-menu li a {
background : # fff ;
margin : 0 ;
padding : 10px 20px ;
height : 45px ;
}
. srt-menu a , . srt-menu a : visited { /* visited pseudo selector so IE6 applies text colour*/
color : # 0099ff ;
}
. srt-menu li li a {
border-top : 1px solid rgba ( 255 , 255 , 255 , . 2 ) ;
background : # 333 ; /*fallback for old IE*/
background : rgba ( 0 , 0 , 0 , . 6 ) ;
color : # fff ;
padding-left : 20px ;
height : auto ;
}
. srt-menu li li a : visited { color : #fff ; }
. srt-menu li li li a ,
. srt-menu li . active * li a {
padding-left : 20px ;
background : rgba ( 0 , 0 , 0 , . 6 ) ;
}
. srt-menu li : hover > a ,
. srt-menu li . active a {
color : # fff ;
background : # 0099ff ;
}
. srt-menu li li : hover > a {
color : # fff ;
background : # 0099ff ;
}
/*GRID*/
/ *
& Columns : 12
* /
. row {
margin-left : -15px ;
margin-right : -15px ;
}
. grid_1 { width : 8.33333333 % ; }
. grid_2 { width : 16.66666667 % ; }
. grid_3 { width : 25 % ; }
. grid_4 { width : 33.33333333 % ; }
. grid_5 { width : 41.66666667 % ; }
. grid_6 { width : 50 % ; }
. grid_7 { width : 58.33333333 % ; }
. grid_8 { width : 66.66666667 % ; }
. grid_9 { width : 75 % ; }
. grid_10 { width : 83.33333333 % ; }
. grid_11 { width : 91.66666667 % ; }
. grid_12 { width : 100 % ; }
. grid_1 ,
. grid_2 ,
. grid_3 ,
. grid_4 ,
. grid_5 ,
. grid_6 ,
. grid_7 ,
. grid_8 ,
. grid_9 ,
. grid_10 ,
. grid_11 ,
. grid_12 {
float : left ;
display : block ;
}
. rightfloat { float : right ; }
/ * @ notation inspired by tinyGrid , . row and percentage by Twitter Bootstrap
* /
# hero [ class * = "grid_" ] { margin-bottom : -20 px ; }
}
/ *
DESKTOP
This is the average viewing window . So Desktops , Laptops , and
in general anyone not viewing on a mobile device . Here ' s where
you can add resource intensive styles .
* /
@ media only screen and ( min-width : 1030px ) {
}
/ *
LARGE VIEWING SIZE
This is for the larger monitors and possibly full screen viewers .
* /
@ media only screen and ( min-width : 1240px ) {
}
/ *
RETINA ( 2x RESOLUTION DEVICES )
This applies to the retina iPhone ( 4s ) and iPad ( 2 , 3 ) along with
other displays with a 2x resolution .
* /
@ media only screen and ( -webkit-min-device-pixel-ratio : 1 . 5 ) ,
only screen and ( min--moz-device-pixel-ratio : 1 . 5 ) ,
only screen and ( min-device-pixel-ratio : 1 . 5 ) {
}
/ *
iPHONE 5 MEDIA QUERY
iPhone 5 or iPod Touch 5th generation styles ( you can include your own file if you want )
* /
@ media ( device-height : 568px ) and ( -webkit-min-device-pixel-ratio : 2 ) {
}
/ *
PRINT STYLESHEET
* /
@ media print {
* { background : transparent !important ; color : black !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 : 1 px 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 ; }
2016-10-06 15:57:01 +00:00
}