498 lines
12 KiB
CSS
498 lines
12 KiB
CSS
/*-----------------------------------------------------------------------------
|
|
|
|
- RAMA BANNER ROTATOR -
|
|
|
|
Screen Stylesheet
|
|
|
|
version: 1.0
|
|
date: 09/18/11
|
|
author: freshline
|
|
email: support@version-four.com
|
|
website: http://www.version-four.com
|
|
-----------------------------------------------------------------------------*/
|
|
|
|
#example {
|
|
-webkit-border-radius: 0 0 6px 6px;
|
|
-moz-border-radius: 0 0 6px 6px;
|
|
border-radius: 0 0 6px 6px;
|
|
border-bottom: 1px solid #fff;
|
|
-webkit-box-shadow: 0 10px 10px rgba(0,0,0,.05);
|
|
-moz-box-shadow: 0 10px 10px rgba(0,0,0,.05);
|
|
box-shadow: 0 10px 10px rgba(0,0,0,.05);
|
|
}
|
|
|
|
/******************************
|
|
- CUSTOM TOOLBOX -
|
|
******************************/
|
|
|
|
.custom_toolbox {
|
|
background-color:#303030 !important;
|
|
|
|
/* To Put it on the left side:
|
|
margin-left:10px !important;
|
|
float:left !important;
|
|
*/
|
|
|
|
/* To Put it on the Right Side:
|
|
margin-right:10px !important;
|
|
float:right !important;
|
|
*/
|
|
|
|
/* To put it on the middle:
|
|
maring-right:auto !important;
|
|
margin-left:auto !important;
|
|
float:none !important;
|
|
*/
|
|
|
|
margin-right:auto !important;
|
|
margin-left:auto !important;
|
|
float:none !important;
|
|
top:320px !important; /* The Top POsition of the Navigation Toolbox */
|
|
background:transparent !important;
|
|
-webkit-border-radius:0px !important;
|
|
-moz-border-radius: 0px !important;
|
|
border-radius: 0px !important;
|
|
-webkit-box-shadow: none; /*0px 0px 6px 0px #1f2120 !important;*/
|
|
-moz-box-shadow: none; /*0px 0px 6px 0px #1f2120 !important;*/
|
|
box-shadow: none; /*0px 0px 6px 0px #1f2120 !important;*/
|
|
}
|
|
|
|
|
|
/*--------------------------------------------------------------------------------------------------------------------------
|
|
|
|
-THE SKIN SETTINGS -
|
|
|
|
---------------------------------------------------------------------------------------------------------------------------*/
|
|
|
|
/***********************************************/
|
|
/*------ THEME TOOLBOX SETTINGS ------*/
|
|
/***********************************************/
|
|
|
|
.sport_mini_thumbnail_buttons {
|
|
background-image:url(../assets/navigation/buttons.png);
|
|
}
|
|
|
|
.sport_previous {
|
|
background-image:url(../assets/navigation/nextprev.png);
|
|
}
|
|
|
|
.sport_next {
|
|
background-image:url(../assets/navigation/nextprev.png);
|
|
}
|
|
.sport_image_thumbnail {
|
|
margin-top:-70px !important;
|
|
z-index:11;
|
|
background-color:#fff !important;
|
|
}
|
|
|
|
.sport_countdown {
|
|
background-image:url(../assets/loader/timer_white.png) !important;
|
|
|
|
}
|
|
|
|
.sport_image_thumbnail_arrow{
|
|
background-image:url(../assets/navigation/arrow_down_white.png) !important;
|
|
z-index:11;
|
|
}
|
|
|
|
/*--------------------------------------------------------------------------------------------------------------------------
|
|
|
|
-BASIC / DEAFULT SETTINGS. NO NEED TO MODIFICATE -
|
|
|
|
---------------------------------------------------------------------------------------------------------------------------*/
|
|
|
|
.noFilterClass {
|
|
filter:none !important;
|
|
}
|
|
|
|
/*---------------------------------------
|
|
- CLEARING THE DEFAULT SETTINGS -
|
|
-----------------------------------------*/
|
|
.frames_slider ul, .frames_slider li {
|
|
margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-o-user-select: none;
|
|
user-select: none;
|
|
-webkit-border-radius: 0 0 6px 6px;
|
|
-moz-border-radius: 0 0 6px 6px;
|
|
border-radius: 0 0 6px 6px;
|
|
position:absolute;
|
|
left:0;
|
|
top:0;
|
|
}
|
|
|
|
|
|
/*-------------------------------------------------
|
|
- The Default Settings for Each Banner -
|
|
- Oll Theme Relevant Settings are -
|
|
- idntified via Theme Names in ID and Class -
|
|
---------------------------------------------------*/
|
|
|
|
.none_frame{
|
|
background-color:#fff;
|
|
margin-left:auto;
|
|
margin-right:auto;
|
|
display:none;
|
|
padding-left:10px;
|
|
padding-right:10px;
|
|
padding-top:10px;
|
|
padding-bottom:10px;
|
|
font-family: 'Oswald', sans-serif;
|
|
color: #000;
|
|
-webkit-border-radius:0px;
|
|
-moz-border-radius: 0px;
|
|
border-radius: 0px;
|
|
z-index:1;
|
|
}
|
|
|
|
/*------------------------------
|
|
- Mask on Images -
|
|
--------------------------------*/
|
|
|
|
.frames_slider #mask {
|
|
position:absolute;
|
|
overflow:hidden;
|
|
-webkit-border-radius:0px;
|
|
-moz-border-radius: 0px;
|
|
border-radius: 0px;
|
|
}
|
|
|
|
/*--------------------------------------------------------
|
|
- The Loader Size, Source and position on the Banner
|
|
----------------------------------------------------------*/
|
|
.frames_slider .loader{
|
|
background-image:url(../assets/loader/loader_round_blue.gif);
|
|
background-repeat:none;
|
|
width:18px;
|
|
height:18px;
|
|
margin-left:auto;
|
|
margin-right:auto;
|
|
top:45%;
|
|
z-index:1499;
|
|
position:relative;
|
|
|
|
}
|
|
|
|
|
|
|
|
/*--------------------------------------------
|
|
- The Logo in the right top Corner -
|
|
----------------------------------------------*/
|
|
.frames_slider #bannerlogo {
|
|
position:absolute;
|
|
left:765px;
|
|
top:5px;
|
|
z-index:1500;
|
|
cursor:point;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-o-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
#bannerlogo a:link {border:none;}
|
|
#bannerlogo a:visited {border:none;}
|
|
|
|
.frames_slider #bannerlogo img{
|
|
border-style:none;
|
|
border:none;
|
|
}
|
|
|
|
|
|
/*----------------------------------------------------------------
|
|
- Image Thumbnails, borders, Marings, rounded corners -
|
|
------------------------------------------------------------------*/
|
|
.frames_slider #image_thumbnail {
|
|
position:absolute;
|
|
border: 1px solid #000;
|
|
background-color:#1a1a1a;
|
|
-webkit-border-radius:3px;
|
|
-moz-border-radius: 3px;
|
|
border-radius: 3px;
|
|
-webkit-box-shadow: 0px 0px 4px 0px #1f2120;
|
|
-moz-box-shadow: 0px 0px 4px 0px #1f2120;
|
|
box-shadow: 0px 0px 4px 0px #1f2120;
|
|
cursor:pointer;
|
|
z-index:990;
|
|
}
|
|
|
|
/*---------------------------------------------------
|
|
- Small Arrow under the Image Thumbnails -
|
|
-----------------------------------------------------*/
|
|
.frames_slider #image_thumbnail_arrow{
|
|
width:26px;
|
|
height:13px;
|
|
background-image:url(../assets/navigation/arrow_down_black.png);
|
|
background-repeat:no-repeat;
|
|
position:absolute;
|
|
z-index:4150 !important;
|
|
}
|
|
|
|
/*-------------------------------------------
|
|
- Toolbox (thumbnail, next,prev holder)
|
|
---------------------------------------------*/
|
|
.frames_slider #toolbox {
|
|
position:relative;
|
|
top:365px !important;
|
|
left: 40%;
|
|
float:left !important;
|
|
padding:0;
|
|
width:auto;
|
|
height:30px;
|
|
-webkit-border-radius: 6px;
|
|
-moz-border-radius: 6px;
|
|
border-radius: 6px;
|
|
background: #dfdfdf;
|
|
background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#dfdfdf));
|
|
background: -moz-linear-gradient(top, #f2f2f2, #dfdfdf);
|
|
background: -o-linear-gradient(rgb(242,242,242),rgb(223,223,223));
|
|
-pie-background: linear-gradient(rgb(242,242,242),rgb(223,223,223));
|
|
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,.3);
|
|
-moz-box-shadow: 0 1px 4px rgba(0,0,0,.3);
|
|
box-shadow: 0 1px 4px rgba(0,0,0,.3);
|
|
}
|
|
|
|
.ie7 .frames_slider #toolbox {
|
|
width: 161px !important;
|
|
behavior: url(../js/PIE.htc);
|
|
}
|
|
|
|
/*-------------------------------------
|
|
- Toolbox - Next Button -
|
|
--------------------------------------*/
|
|
.frames_slider #toolbox #next {
|
|
margin-top:6px;
|
|
margin-left: 5px;
|
|
float:left;
|
|
overflow:hidden;
|
|
background-image:url(../assets/navigation/nextprev.png);
|
|
background-position:top left;
|
|
width:19px;
|
|
height:19px;
|
|
cursor:pointer;
|
|
}
|
|
|
|
/*-------------------------------------
|
|
- Toolbox - Prev Button -
|
|
--------------------------------------*/
|
|
.frames_slider #toolbox #previous {
|
|
margin-top:6px;
|
|
margin-right: 2px;
|
|
float:right;
|
|
overflow:hidden;
|
|
background-image:url(../assets/navigation/nextprev.png);
|
|
background-position:top right;
|
|
width:19px;
|
|
height:19px;
|
|
cursor:pointer;
|
|
}
|
|
|
|
/*------------------------------------------
|
|
- Toolbox - divider between buttons -
|
|
--------------------------------------------*/
|
|
.frames_slider #toolbox #mini_divider {
|
|
margin-left:3px;
|
|
margin-right:1px;
|
|
float:right;
|
|
overflow:hidden;
|
|
/* background:url(../assets/navigation/toolbar_separator.png) no-repeat center center;;*/
|
|
width:2px;
|
|
height:30px;
|
|
}
|
|
|
|
/*-----------------------------------------
|
|
- Toolbox - Mini Thumbnail Buttons -
|
|
-------------------------------------------*/
|
|
.frames_slider #toolbox .mini_thumbnail_buttons {
|
|
margin-top:5px;
|
|
float:right;
|
|
overflow:hidden;
|
|
background-image:url(../assets/navigation/buttons.png);
|
|
background-position:top left;
|
|
width:22px;
|
|
height:22px;
|
|
cursor:pointer;
|
|
}
|
|
|
|
.frames_slider .pause_sign {
|
|
background:url(../assets/navigation/pause.png) no-repeat;
|
|
width:35px;
|
|
height:37px;
|
|
position:absolute;
|
|
z-index:4100;
|
|
}
|
|
|
|
.countdown {
|
|
background-image: url(../assets/loader/timer_white.png);
|
|
height: 10px;
|
|
margin-left: 6px;
|
|
margin-top: 6px;
|
|
position: relative;
|
|
width: 10px;
|
|
z-index: 4055;
|
|
}
|
|
/*-----------------------------------------------------------------------------
|
|
|
|
- RAMA SLIDER -
|
|
|
|
Screen Stylesheet
|
|
|
|
version: 1.0
|
|
date: 07/27/11
|
|
author: freshline
|
|
email: support@version-four.com
|
|
website: http://www.version-four.com
|
|
-----------------------------------------------------------------------------*/
|
|
|
|
|
|
/*--------------------------------------------------------------------------------------------------------
|
|
|
|
- THE LAYERS ON THE RAMA BANNER -
|
|
|
|
All Object (Text, Images) on the Banner Layer will be set via the Content.css
|
|
You can of course use your own styles as well. We only recommend to split the css files,
|
|
to make better overview of your files.
|
|
|
|
Position are always absolute. Position 0,0 is the left top corner of the banner inside the Frame.
|
|
|
|
---------------------------------------------------------------------------------------------------------*/
|
|
|
|
|
|
/*--------------------------------------------------
|
|
- BANNER 1 - 1/10
|
|
-----------------------------------------------------*/
|
|
.logo_1 {
|
|
left:265px;
|
|
top:21px;
|
|
position:absolute;
|
|
}
|
|
|
|
.title_1 {
|
|
font-size:2.5em;
|
|
font-style:italic;
|
|
font-weight:normal;
|
|
color: #fff;
|
|
padding:10px 30px 15px 20px;
|
|
left:40px;
|
|
top:255px;
|
|
position:absolute;
|
|
font-family: 'PT Sans Narrow', sans-serif;
|
|
}
|
|
|
|
.description_1 {
|
|
font-size:1.5em;
|
|
text-align:center;
|
|
color: #88d600;
|
|
left:60px;
|
|
top:287px;
|
|
position:absolute;
|
|
font-family: 'PT Sans Narrow', sans-serif;
|
|
}
|
|
|
|
|
|
/*--------------------------------------------------
|
|
- BANNER 1 - 2/10
|
|
-----------------------------------------------------*/
|
|
|
|
.title_2 {
|
|
font-size:2.5em;
|
|
font-weight:normal;
|
|
font-family: 'PT Sans Narrow', sans-serif;
|
|
color: #fff;
|
|
left:370px;
|
|
top:215px;
|
|
position:absolute;
|
|
}
|
|
|
|
.description_2 {
|
|
font-size:1.5em;
|
|
color: #fff;
|
|
left:370px;
|
|
top:200px;
|
|
position:absolute;
|
|
font-family: 'PT Sans Narrow', sans-serif;
|
|
}
|
|
|
|
|
|
/*--------------------------------------------------
|
|
- BANNER 1 - 3/10
|
|
-----------------------------------------------------*/
|
|
|
|
.title_3 {
|
|
font-family: 'PT Sans Narrow', sans-serif;
|
|
font-size:2.5em;
|
|
font-style:italic;
|
|
font-weight:normal;
|
|
color: #88d600;
|
|
padding:10px 30px 15px 20px;
|
|
left:40px;
|
|
top:250px;
|
|
position:absolute;
|
|
}
|
|
|
|
.description_3 {
|
|
font-size:1.5em;
|
|
text-align:center;
|
|
color: #fff;
|
|
left:60px;
|
|
top:287px;
|
|
position:absolute;
|
|
font-family: 'PT Sans Narrow', sans-serif;
|
|
}
|
|
|
|
|
|
/*--------------------------------------------------
|
|
- BANNER 1 - 4/10
|
|
-----------------------------------------------------*/
|
|
|
|
.title_4 {
|
|
font-family: 'PT Sans Narrow', sans-serif;
|
|
font-size:2.5em;
|
|
font-style:italic;
|
|
font-weight:normal;
|
|
color: #fff;
|
|
padding:10px 30px 15px 20px;
|
|
left:40px;
|
|
top:180px;
|
|
position:absolute;
|
|
}
|
|
|
|
.description_4 {
|
|
font-size:1.5em;
|
|
text-align:center;
|
|
color: #fff;
|
|
left:60px;
|
|
top:175px;
|
|
position:absolute;
|
|
font-family: 'PT Sans Narrow', sans-serif;
|
|
}
|
|
|
|
/*--------------------------------------------------
|
|
- BANNER 1 - 5/10
|
|
-----------------------------------------------------*/
|
|
|
|
.title_5 {
|
|
font-family: 'PT Sans Narrow', sans-serif;
|
|
font-size:2.5em;
|
|
font-style:italic;
|
|
font-weight:normal;
|
|
color:#1f2123;
|
|
left:350px;
|
|
top:250px;
|
|
position:absolute;
|
|
}
|
|
|
|
.description_5 {
|
|
font-family: 'PT Sans Narrow', sans-serif;
|
|
font-size:1.5em;
|
|
font-style:italic;
|
|
color: #1f2123;
|
|
left:350px;
|
|
top:285px;
|
|
position:absolute;
|
|
}
|
|
|