/** 
Author: Manny Khasria
Website: http://www.coolwebdeveloper.com
Forum: http://www.coolwebdeveloper.com/forum
This CSS is licensed and is governed by copyright laws and is only to be used with Featured Articles Wordpress Plugin. 
Any unauthorized access or reuse of this script/css is prohibited and legal action might be taken if someone 
is found redistributing this CSS.  **/

/****************************************************************************
You can control some of the universal setting by editing the following CSS parameters
If you want to give each rotation a unique look and feel than please scroll to 
the end of this file and we have listed an example that you can use.

FYI: Next major release will include a list of pre-built themes to choose from for Featured Articles Plugin. 
*****************************************************************************/

/** Required - csshover.htc is required to fix IE6 hover issues. 
Check http://coolwebdeveloper.com and search for csshover.htc for more info **/
body 
{
behavior: url("csshover.htc");
}
/** This is the main div that acts as a container for the rotation **/
.featuredHeaderDivCustom
{
margin-bottom:5px;
}
/** This implements padding between outer border and inner container **/
.inner-Area {
position:relative;
padding:10px;
}
/** This is the sub container that contains image and text for each rotating Article or Banner**/
.featuredDiv {
  position:absolute;
}
/** Following controls the look and feel of Articles Title **/
#featured_title
{
font-family:Arial;
font-size:16px;
line-height:1.1;
font-weight:bold;
font-variant:normal;
font-style:normal;
font-size-adjust:none;
text-decoration:none;
}
#featured_title a
{
font-family:Arial;
font-size:16px;
line-height:1.1;
font-variant:normal;
font-style:normal;
font-size-adjust:none;
font-weight:bold;
text-decoration:none;
}
/** Following controls the look and feel for image and text inside the rotation**/
#featured_content a
{
font-variant:normal;
font-style:normal;
font-weight:normal;
font-size-adjust:none;
text-decoration:none;
}
#featured_content a:hover
{
font-variant:normal;
font-style:normal;
font-size-adjust:none;
font-weight:normal;
text-decoration:none;
}
#featured_text
{
font-size:12px;
margin-top:10px;
font-variant:normal;
font-style:normal;
font-size-adjust:none;
font-weight:normal;
}
#featured_text a
{
font-size:12px;
text-decoration:none;
font-variant:normal;
font-style:normal;
font-size-adjust:none;
font-weight:normal;
}
#featured_text a:hover
{
font-size:12px;
text-decoration:none;
font-variant:normal;
font-style:normal;
font-size-adjust:none;
font-weight:normal;
}
#featured_text img
{
float:left;
padding-right:10px;
padding-bottom:5px;
padding-top:2px;
border:0px;
}
/** Following controls the look and feel for CONTINUE READING Anchor text **/
#featured_continue
{
clear:both;
height:20px;
text-align:right;
margin-top:20px;
}
#featured_continue a
{
font-family:Arial;
font-size:11px;
text-decoration:none;
font-variant:normal;
font-style:normal;
font-size-adjust:none;
}
#featured_continue a:hover
{
font-family:Arial;
font-size:11px;
text-decoration:none;
font-variant:normal;
font-style:normal;
font-size-adjust:none;
}
/** Following CSS governs the look and feel of the 123 buttons and play, pause buttons **/
#buttons_holder 
{
list-style-type:none;
font-family:Arial;
font-size:10px;
padding:0px;
}
#buttons_holder li
{
list-style-type:none;
font-family:Arial;
font-size:10px;
background:none;
}
#buttons_holder li a
{
padding:0px;
margin:0px;
font-family:Arial;
text-decoration:none;
font-variant:normal;
font-style:normal;
font-size-adjust:none;
font-size:10px;
font-weight:normal;
}
.inner-Area #buttons_holder li
{
float:left;
list-style-type:none;
padding:0px;
margin:0px;
line-height:12px;
text-align:center;
vertical-align:middle;
font-size:10px;
font-family:Arial;
background:none;
}
.inner-Area #buttons_holder
{
overflow:hidden;
clear:both;
position:absolute;
height:20px;
font-family:Arial;
font-size:10px;
list-style-type:none;
padding:0px;
margin:0px;
}
.featuredLinkAnchorCustom
{
width:12px;
height:12px;
font-size:10px;
list-style-type:none;
font-family:Arial;
}
/** To change the pause and play button images, upload the images under images/buttons folder
of Featured Articles plugin and change the name of the images in this CSS**/
#buttons_holder li.featuredLinkPausePlayCustom
{
background:url(images/buttons/play.gif) no-repeat;
width:12px;
height:12px;
font-size:10px;
list-style-type:none;
}
.featuredPlaying #buttons_holder li.featuredLinkPausePlayCustom
{
background:url(images/buttons/pause.gif) no-repeat; 
width:12px;
height:12px;
font-size:10px;
list-style-type:none;
}
.featuredSepCustom
{
padding:0px;
margin:0px;
font-size:10px;
line-height:14px;
width:3px;
}
/****************************************************************************
Here is an example if you would like to control each rotation in a unique way.
Each rotation has a unique ID associated with it. You can get this ID by visiting
the wordpress admin panel for Featured Articles.
You can use this ID to to provide a unique look and feel to every rotation.
Going forward we will be launching some unique themes to choose from but for now
you will need to edit the CSS.

To provide a unique background to rotations, just upload the background image
to the images folder in wp-FeaturedArticles Plugin folder and refer to that 
background as following in this CSS - 
*****************************************************************************

#.featuredHeaderDiv[Unique ID]
{
background-image:url(images/imagename.jpg) no-repeat;
}

*********************************************************************************
----Replace [Unique ID] with the ID number from Featured Articles admin panel.

In the same manner you can edit the height and width of the buttons at the bottom
by changing following CSS - 
*********************************************************************************

#featuredMainDiv[Unique ID] #buttons_holder li a
{
padding:3px;
margin:0px;
text-decoration:none;
}
#featuredMainDiv[Unique ID] #buttons_holder li
{
float:left;
list-style-type:none;
padding:0px;
margin:0px;
line-height:12px;
}
#featuredMainDiv[Unique ID] #buttons_holder
{
overflow:hidden;
clear:both;
position:absolute;
height:20px;
}
.featuredLinkAnchor[Unique ID]
{
width:12px;
height:12px;
font-size:10px;
list-style-type:none;
}
.featuredSep[Unique ID]
{
padding:0px;
margin:0px;
font-size:10px;
line-height:14px;
width:3px;
}

*************************************************************
----Replace [Unique ID] with the ID number from Featured Articles admin panel.
*************************************************************/