update site pages

diff --git a/www/index.html b/www/index.html
index 8c1915b..6179668 100644 (file)
--- a/www/index.html
+++ b/www/index.html
@@ -95,7 +95,7 @@ function textToggle(textBlockId) {
                <p>
 The main aim of MySocials app is to make your work with different services easier, so the app integrates all base functions of social networks such as opportunity to share your photos and video files, exchange messages with other people, browse your friends' profiles, etc. After you pass authorization in several social networks that MySocials supports, you are able to work with common list of your friends from these networks. To make navigation through this list more convenient you can use different filters. The list can be filtered by social network, by sex or by friend's status (online/offline). Also you can find a friend in the list using special field «Search».
                </p>
                <p>
 The main aim of MySocials app is to make your work with different services easier, so the app integrates all base functions of social networks such as opportunity to share your photos and video files, exchange messages with other people, browse your friends' profiles, etc. After you pass authorization in several social networks that MySocials supports, you are able to work with common list of your friends from these networks. To make navigation through this list more convenient you can use different filters. The list can be filtered by social network, by sex or by friend's status (online/offline). Also you can find a friend in the list using special field «Search».
                </p>

-               <p align="center"><img src="images/Friends-Harmattan.png" width="240px" height="425px" alt="Harmattan version"/></p>
+               <p align="center"><img src="images/harmattan/friends_fl_eng.jpg" width="240px" height="425px" alt="Harmattan version"/></p>

                <p align="center">
                <b>Browsing list of friends (Harmattan version)</b>
                </p>
                <p align="center">
                <b>Browsing list of friends (Harmattan version)</b>
                </p>

@@ -103,11 +103,11 @@ The main aim of MySocials app is to make your work with different services easie
                <p>
                Sharing photos and images is another important and popular service in social networks. MySocial allows you to browse you own and your friends' albums and images from different social networks, send your comment to each image and upload your images to the service by using simple form of our app.
                </p>
                <p>
                Sharing photos and images is another important and popular service in social networks. MySocial allows you to browse you own and your friends' albums and images from different social networks, send your comment to each image and upload your images to the service by using simple form of our app.
                </p>

-               <p align="center"><img src="images/albums-desktop.png" width="650px" height="470px" alt="desktop version"/></p>
+               <p align="center"><img src="images/desktop/albums_eng.png" width="650px" height="406px" alt="desktop version"/></p>

                <p align="center">
                <b>Browsing list of friends and albums of selected friend (desktop version)</b>
                </p>
                <p align="center">
                <b>Browsing list of friends and albums of selected friend (desktop version)</b>
                </p>

-               <p align="center"><img src="images/images-maemo.png" width="660px" height="356px" alt="Maemo 5 version"/></p>
+               <p align="center"><img src="images/maemo/images_eng.png" width="660px" height="356px" alt="Maemo 5 version"/></p>

                <p align="center">
                <b>Browsing photos (Maemo 5 version)</b>
                </p>
                <p align="center">
                <b>Browsing photos (Maemo 5 version)</b>
                </p>

diff --git a/www/screenshots.html b/www/screenshots.html
index 26780ca..98867ee 100644 (file)
--- a/www/screenshots.html
+++ b/www/screenshots.html
@@ -5,8 +5,17 @@
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>MySocials Project</title>
 <link href="style.css" rel="stylesheet" type="text/css" />
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>MySocials Project</title>
 <link href="style.css" rel="stylesheet" type="text/css" />

+       <script type="text/javascript" src="zoom/jquery.min.js"></script>
+       <script type="text/javascript" src="zoom/zoom-c.js"></script>
+       <link rel="stylesheet" type="text/css" media="all" href="zoom/zoom.css" />
+
+       <script type="text/javascript" src="js/prototype.js"></script>
+       <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
+       <script type="text/javascript" src="js/lightbox.js"></script>
+       <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
+

 </head>
 </head>

-<!--comment-->
+

 <body>
 <table width="779" border="0" align="center" cellpadding="0" cellspacing="0">
   <tr>
 <body>
 <table width="779" border="0" align="center" cellpadding="0" cellspacing="0">
   <tr>

@@ -64,43 +73,108 @@
                <h2>Work with application</h2>
                <p>On this page you can find a description of the work with MySocials app on mobile device based on Maemo 5 platform (Nokia N900). The work with application on the other platforms is similarly.</p>
                <p>After you start MySocials for the first time, you will see "Add new account" window. You should create an account by inputing some name and choosing one of the supported services.</p>
                <h2>Work with application</h2>
                <p>On this page you can find a description of the work with MySocials app on mobile device based on Maemo 5 platform (Nokia N900). The work with application on the other platforms is similarly.</p>
                <p>After you start MySocials for the first time, you will see "Add new account" window. You should create an account by inputing some name and choosing one of the supported services.</p>

-               <p align="center"><img src="images/add_account_eng.png" width="650px" height="330px" alt="Maemo 5 version"/></p>
+               <p align="center">
+                       <a href="images/maemo/add_account_eng.png" class="zoom"><img src="images/maemo/add_account_eng.png" width="250px" height="156px" alt="Maemo 5 version"/>
+                       </a> &nbsp;
+                       <a href="images/harmattan/add_account_eng.jpg" class="zoom"><img src="images/harmattan/add_account_eng.jpg" width="100px" height="178px" alt="MeeGo version"/></a> &nbsp;
+                       <a href="images/desktop/add_account_eng.png" class="zoom"><img src="images/desktop/add_account_eng.png" width="250px" height="156px" alt="Desktop version"/></a>&nbsp;
+               </p>

                <p>Then you have to log on the service. Our application uses authorization through web-interface (WebAuth). <b>MySocials doesn't store your registration information (e.g. login and password).</b> Therefore if your session is out of date, the application shows authorization window again.</p>
                <p>Then you have to log on the service. Our application uses authorization through web-interface (WebAuth). <b>MySocials doesn't store your registration information (e.g. login and password).</b> Therefore if your session is out of date, the application shows authorization window again.</p>

-               <p align="center"><img src="images/webauth.png" width="650px" height="330px" alt="Maemo 5 version"/></p>
+               <p align="center">
+                       <a href="images/maemo/webauth.png" class="zoom"><img src="images/maemo/webauth.png" width="250px" height="156px" alt="Maemo 5 version"/></a> &nbsp;
+                       <a href="images/harmattan/webauth.jpg" class="zoom"><img src="images/harmattan/webauth.jpg" width="178px" height="100px" alt="MeeGo version"/></a> &nbsp;
+                       <a href="images/desktop/webauth.png" class="zoom"><img src="images/desktop/webauth.png" width="250px" height="156px" alt="Desktop version"/></a>&nbsp;
+               </p>

                <p>After that you will see main form of the app which consists of main menu, the list of your friends from social networks and toolbar with icons for working with list of friends, messages and albums. Future version of MySocials will support work with news feeds, audio and video. Button <img src="images/general_refresh.png" width="30px" height="30px" alt="Refresh Button"/> is used for refreshing information in the app.</p>
                <p>After that you will see main form of the app which consists of main menu, the list of your friends from social networks and toolbar with icons for working with list of friends, messages and albums. Future version of MySocials will support work with news feeds, audio and video. Button <img src="images/general_refresh.png" width="30px" height="30px" alt="Refresh Button"/> is used for refreshing information in the app.</p>

-               <p align="center"><img src="images/friends_all_eng.png" width="650px" height="330px" alt="Maemo 5 version"/></p>
+               <p align="center">
+                       <a href="images/maemo/friends_all_eng.png" class="zoom"><img src="images/maemo/friends_all_eng.png" width="250px" height="156px" alt="Maemo 5 version"/></a> &nbsp;
+                       <a href="images/harmattan/friends_all_eng.jpg" class="zoom"><img src="images/harmattan/friends_all_eng.jpg" width="100px" height="178px" alt="MeeGo version"/></a> &nbsp;
+                       <a href="images/desktop/friends_all_eng.png" class="zoom"><img src="images/desktop/friends_all_eng.png" width="250px" height="156px" alt="Desktop version"/></a>&nbsp;
+               </p>

                <p>You can use filters to navigate through friends list. There are filters for social services, online/offline status and sex.</p>
                <p>You can use filters to navigate through friends list. There are filters for social services, online/offline status and sex.</p>

-               <p align="center"><img src="images/friends_vk_eng.png" width="650px" height="330px" alt="Maemo 5 version"/></p>
-               <p align="center"><img src="images/friends_fl_eng.png" width="650px" height="330px" alt="Maemo 5 version"/></p>
-               <p align="center"><img src="images/friends_mm_eng.png" width="650px" height="330px" alt="Maemo 5 version"/></p>
+               <p align="center">
+                       <a href="images/maemo/friends_vk_eng.png" class="zoom"><img src="images/maemo/friends_vk_eng.png" width="250px" height="156px" alt="Maemo 5 version"/></a> &nbsp;
+                       <a href="images/harmattan/friends_vk_eng.jpg" class="zoom"><img src="images/harmattan/friends_vk_eng.jpg" width="100px" height="178px" alt="MeeGo version"/></a> &nbsp;
+                       <a href="images/desktop/friends_vk_eng.png" class="zoom"><img src="images/desktop/friends_vk_eng.png" width="250px" height="156px" alt="Desktop version"/></a>&nbsp;
+               </p>
+               <p align="center">
+                       <a href="images/maemo/friends_fl_eng.png" class="zoom"><img src="images/maemo/friends_fl_eng.png" width="250px" height="156px" alt="Maemo 5 version"/></a> &nbsp;
+                       <a href="images/harmattan/friends_fl_eng.jpg" class="zoom"><img src="images/harmattan/friends_fl_eng.jpg" width="100px" height="178px" alt="MeeGo version"/></a> &nbsp;
+                       <a href="images/desktop/friends_fl_eng.png" class="zoom"><img src="images/desktop/friends_fl_eng.png" width="250px" height="156px" alt="Desktop version"/></a>&nbsp;
+               </p>
+               <p align="center">
+                       <a href="images/maemo/friends_mm_eng.png" class="zoom"><img src="images/maemo/friends_mm_eng.png" width="250px" height="156px" alt="Maemo 5 version"/></a> &nbsp;
+                       <a href="images/harmattan/friends_mm_eng.jpg" class="zoom"><img src="images/harmattan/friends_mm_eng.jpg" width="100px" height="178px" alt="MeeGo version"/></a> &nbsp;
+                       <a href="images/desktop/friends_mm_eng.png" class="zoom"><img src="images/desktop/friends_mm_eng.png" width="250px" height="156px" alt="Desktop version"/></a>&nbsp;
+               </p>

                <p>You can find a friend in the list by using quick search. Button <img src="images/general_backspace.png" width="30px" height="30px" alt="Backspace Button"/> allows you to clean the searching field.</p>
                <p>You can find a friend in the list by using quick search. Button <img src="images/general_backspace.png" width="30px" height="30px" alt="Backspace Button"/> allows you to clean the searching field.</p>

-               <p align="center"><img src="images/friends_search_eng.png" width="650px" height="330px" alt="Maemo 5 version"/></p>
+               <p align="center">
+                       <a href="images/maemo/friends_search_eng.png" class="zoom"><img src="images/maemo/friends_search_eng.png" width="250px" height="156px" alt="Maemo 5 version"/></a> &nbsp;
+                       <a href="images/harmattan/friends_search_eng.jpg" class="zoom"><img src="images/harmattan/friends_search_eng.jpg" width="100px" height="178px" alt="MeeGo version"/></a> &nbsp;
+                       <a href="images/desktop/friends_search_eng.png" class="zoom"><img src="images/desktop/friends_search_eng.png" width="250px" height="156px" alt="Desktop version"/></a>&nbsp;
+               </p>

                After choosing one of your friends from the list you see his/her profile information. From this form you can go to browsing the user's albums, messages or send new message to him/her. Button <img src="images/general_back.png" width="30px" height="30px" alt="Back Button"/> returns you to the previous screen (in this case friends list form).   
                After choosing one of your friends from the list you see his/her profile information. From this form you can go to browsing the user's albums, messages or send new message to him/her. Button <img src="images/general_back.png" width="30px" height="30px" alt="Back Button"/> returns you to the previous screen (in this case friends list form).   

-               <p align="center"><img src="images/profile_eng.png" width="650px" height="330px" alt="Maemo 5 version"/></p>
+               <p align="center">
+                       <a href="images/maemo/profile_eng.png" class="zoom"><img src="images/maemo/profile_eng.png" width="250px" height="156px" alt="Maemo 5 version"/></a> &nbsp;
+                       <a href="images/harmattan/profile_eng.jpg" class="zoom"><img src="images/harmattan/profile_eng.jpg" width="100px" height="178px" alt="MeeGo version"/></a> &nbsp;
+                       <a href="images/desktop/profile_eng.png" class="zoom"><img src="images/desktop/profile_eng.png" width="250px" height="156px" alt="Desktop version"/></a>&nbsp;
+               </p>

                After choosing messages icon from toolbar you can browse your new messages from the services, inbox and outbox messages, and your drafts.
                <p align="center">
                After choosing messages icon from toolbar you can browse your new messages from the services, inbox and outbox messages, and your drafts.
                <p align="center">

-                       <img src="images/messages_eng.png" width="250px" height="130px" alt="Maemo 5 version"/>&nbsp;
-                       <img src="images/harm_messages_eng.png" width="100px" height="200px" alt="Maemo 5 version"/>&nbsp;
-                       <img src="images/desktop_messages_eng.png" width="250px" height="130px" alt="Maemo 5 version"/>&nbsp;
+                       <a href="images/maemo/messages_eng.png" class="zoom"><img src="images/maemo/messages_eng.png" width="250px" height="156px" alt="Maemo 5 version"/></a> &nbsp;
+                       <a href="images/harmattan/messages_eng.jpg" class="zoom"><img src="images/harmattan/messages_eng.jpg" width="100px" height="178px" alt="MeeGo version"/></a> &nbsp;
+                       <a href="images/desktop/messages_eng.png" class="zoom"><img src="images/desktop/messages_eng.png" width="250px" height="156px" alt="Desktop version"/></a>&nbsp;

                </p>
                After choosing albums icon from toolbar you can browse the list of user's albums.
                </p>
                After choosing albums icon from toolbar you can browse the list of user's albums.

-               <p align="center"><img src="images/albums_eng.png" width="650px" height="330px" alt="Maemo 5 version"/></p>
+               <p align="center">
+                       <a href="images/maemo/albums_eng.png" class="zoom"><img src="images/maemo/albums_eng.png" width="250px" height="156px" alt="Maemo 5 version"/></a> &nbsp;
+                       <a href="images/harmattan/albums_eng.jpg" class="zoom"><img src="images/harmattan/albums_eng.jpg" width="100px" height="178px" alt="MeeGo version"/></a> &nbsp;
+                       <a href="images/desktop/albums_eng.png" class="zoom"><img src="images/desktop/albums_eng.png" width="250px" height="156px" alt="Desktop version"/></a>&nbsp;
+               </p>

                Content of chosen album is shown as a list of previews of the images.           
                Content of chosen album is shown as a list of previews of the images.           

-               <p align="center"><img src="images/images_eng.png" width="650px" height="330px" alt="Maemo 5 version"/></p>
+               <p align="center">
+                       <a href="images/maemo/images_eng.png" class="zoom"><img src="images/maemo/images_eng.png" width="250px" height="156px" alt="Maemo 5 version"/></a> &nbsp;
+                       <a href="images/harmattan/images_eng.jpg" class="zoom"><img src="images/harmattan/images_eng.jpg" width="100px" height="178px" alt="MeeGo version"/></a> &nbsp;
+                       <a href="images/desktop/images_eng.png" class="zoom"><img src="images/desktop/images_eng.png" width="250px" height="156px" alt="Desktop version"/></a>&nbsp;
+               </p>

                <p>You can view the pictures in full screen mode after clicking on it's preview. If the picture hasn't been loaded from service the application shows the preview.</p>
                <p>You can view the pictures in full screen mode after clicking on it's preview. If the picture hasn't been loaded from service the application shows the preview.</p>

-               <p align="center"><img src="images/image_download_eng.png" width="650px" height="330px" alt="Maemo 5 version"/></p>
+               <p align="center">
+                       <a href="images/maemo/image_download_eng.png" class="zoom"><img src="images/maemo/image_download_eng.png" width="250px" height="156px" alt="Maemo 5 version"/></a> &nbsp;
+                       <a href="images/harmattan/image_download_eng.jpg" class="zoom"><img src="images/harmattan/image_download_eng.jpg" width="100px" height="178px" alt="MeeGo version"/></a> &nbsp;
+                       <a href="images/desktop/image_download_eng.png" class="zoom"><img src="images/desktop/image_download_eng.png" width="250px" height="156px" alt="Desktop version"/></a>&nbsp;
+               </p>

                You are also available to browse and send comments to each image in the album (if this service is supported by social network).
                You are also available to browse and send comments to each image in the album (if this service is supported by social network).

-               <p align="center"><img src="images/menu_comments_eng.png" width="650px" height="330px" alt="Maemo 5 version"/></p>
+               <p align="center">
+                       <a href="images/maemo/comments_eng.png" class="zoom"><img src="images/maemo/comments_eng.png" width="250px" height="156px" alt="Maemo 5 version"/></a> &nbsp;
+                       <a href="images/harmattan/comments_eng.jpg" class="zoom"><img src="images/harmattan/comments_eng.jpg" width="100px" height="178px" alt="MeeGo version"/></a> &nbsp;
+                       <a href="images/desktop/comments_eng.png" class="zoom"><img src="images/desktop/comments_eng.png" width="250px" height="156px" alt="Desktop version"/></a>&nbsp;
+               </p>

                
                <h2>Application settings</h2>
                <p>You can use main menu of MySocials to set up the application.</p>
                
                <h2>Application settings</h2>
                <p>You can use main menu of MySocials to set up the application.</p>

-               <p align="center"><img src="images/main_menu_eng.png" width="650px" height="330px" alt="Maemo 5 version: main menu"/></p>               
+               <p align="center">
+                       <a href="images/maemo/main_menu_eng.png" class="zoom"><img src="images/maemo/main_menu_eng.png" width="250px" height="156px" alt="Maemo 5 version"/></a> &nbsp;
+                       <a href="images/harmattan/main_menu_eng.jpg" class="zoom"><img src="images/harmattan/main_menu_eng.jpg" width="100px" height="178px" alt="MeeGo version"/></a> &nbsp;
+               <!--    <a href="images/desktop/main_menu_eng.png" class="zoom"><img src="images/desktop/main_menu_eng.png" width="250px" height="156px" alt="Desktop version"/></a>&nbsp;-->
+               </p>            

                <p><b>"Program settings"</b> menu item allows you to set up some specific settings of the application. The item <b>"Enable window rotation"</b> is available only for mobile devices. It allows the application to respond when your device changes it's position in space. The item <b>"Enable multi panel mode"</b> controls the number of panels in the main form of the application. If you choose this option, you see current panel with data from service (for example, the list of pictures) and the previous one (the list of albums). Otherwise you see only one panel with data in the main form of the application. It is very convenient for devices with small screen such as mobile devices. Button <b>"Clear cache"</b> allows you to clean application's cache to save your device resources.</p>
                <p><b>"Program settings"</b> menu item allows you to set up some specific settings of the application. The item <b>"Enable window rotation"</b> is available only for mobile devices. It allows the application to respond when your device changes it's position in space. The item <b>"Enable multi panel mode"</b> controls the number of panels in the main form of the application. If you choose this option, you see current panel with data from service (for example, the list of pictures) and the previous one (the list of albums). Otherwise you see only one panel with data in the main form of the application. It is very convenient for devices with small screen such as mobile devices. Button <b>"Clear cache"</b> allows you to clean application's cache to save your device resources.</p>

-               <p align="center"><img src="images/settings_eng.png" width="650px" height="330px" alt="Maemo 5 version"/></p>           
+               <p align="center">
+                       <a href="images/maemo/settings_eng.png" class="zoom"><img src="images/maemo/settings_eng.png" width="250px" height="156px" alt="Maemo 5 version"/></a> &nbsp;
+                       <a href="images/harmattan/settings_eng.jpg" class="zoom"><img src="images/harmattan/settings_eng.jpg" width="100px" height="178px" alt="MeeGo version"/></a> &nbsp;
+                       <a href="images/desktop/settings_eng.png" class="zoom"><img src="images/desktop/settings_eng.png" width="250px" height="156px" alt="Desktop version"/></a>&nbsp;
+               </p>            

                <p>After choosing <b>"Network"</b> item you can set proxy settings. Button <b>"No Proxy"</b> turns off the search of proxy setting in your system. Button <b>"System"</b> activates the search of proxy settings in your system to use them in the application. Button <b>"Manual"</b> activates the fields for inputing <i>Address</i> and <i>Port</i> of proxy that you use in your system.</p>
                <p>After choosing <b>"Network"</b> item you can set proxy settings. Button <b>"No Proxy"</b> turns off the search of proxy setting in your system. Button <b>"System"</b> activates the search of proxy settings in your system to use them in the application. Button <b>"Manual"</b> activates the fields for inputing <i>Address</i> and <i>Port</i> of proxy that you use in your system.</p>

-               <p align="center"><img src="images/proxy_eng.png" width="650px" height="330px" alt="Maemo 5 version"/></p>
+               <p align="center">
+                       <a href="images/maemo/proxy_eng.png" class="zoom"><img src="images/maemo/proxy_eng.png" width="250px" height="156px" alt="Maemo 5 version"/></a> &nbsp;
+                       <a href="images/harmattan/proxy_eng.jpg" class="zoom"><img src="images/harmattan/proxy_eng.jpg" width="100px" height="178px" alt="MeeGo version"/></a> &nbsp;
+                       <a href="images/desktop/proxy_eng.png" class="zoom"><img src="images/desktop/proxy_eng.png" width="250px" height="156px" alt="Desktop version"/></a>&nbsp;
+               </p>

                <p>You can edit the list of created accounts by using <b>"Accounts"</b> item of the menu. Button <b>"Add"</b> allows you to create new account. Using button <b>"Remove"</b> you can delete one of the existing accounts. Button <b>"Reconnect"</b> allows you to pass the authorization on the service again. You should use this button, if you had some network problems on your device and your account was switched to the offline mode or you wanted to log on the service with another registration information (e.g. login and password). In that case you have to choose this account in the list and push <b>"Reconnect"</b> button.</p>
                <p>You can edit the list of created accounts by using <b>"Accounts"</b> item of the menu. Button <b>"Add"</b> allows you to create new account. Using button <b>"Remove"</b> you can delete one of the existing accounts. Button <b>"Reconnect"</b> allows you to pass the authorization on the service again. You should use this button, if you had some network problems on your device and your account was switched to the offline mode or you wanted to log on the service with another registration information (e.g. login and password). In that case you have to choose this account in the list and push <b>"Reconnect"</b> button.</p>

-               <p align="center"><img src="images/accounts_eng.png" width="650px" height="330px" alt="Maemo 5 version"/></p>
+               <p align="center">
+                       <a href="images/maemo/accounts_eng.png" class="zoom"><img src="images/maemo/accounts_eng.png" width="250px" height="156px" alt="Maemo 5 version"/></a> &nbsp;
+                       <a href="images/harmattan/accounts_eng.jpg" class="zoom"><img src="images/harmattan/accounts_eng.jpg" width="100px" height="178px" alt="MeeGo version"/></a> &nbsp;
+                       <a href="images/desktop/accounts_eng.png" class="zoom"><img src="images/desktop/accounts_eng.png" width="250px" height="156px" alt="Desktop version"/></a>&nbsp;
+               </p>

       </td>
       </tr>
     </table></td>
       </td>
       </tr>
     </table></td>

diff --git a/www/style.css b/www/style.css
index 00e9db9..71f15eb 100644 (file)
--- a/www/style.css
+++ b/www/style.css
@@ -88,3 +88,13 @@ color:#7B7B68;
 .list
 {
 }
 .list
 {
 }

+
+a.nivoZoom { border:0 ! important; } 
+
+a.nivoZoom img { -moz-box-shadow:0px 0px 5px #000; -webkit-box-shadow:0px 0px 5px #000; box-shadow:0px 0px 5px #000; border:0; } 
+
+a.nivoZoom img.nivoLarge { -moz-box-shadow:0px 0px 10px #000; -webkit-box-shadow:0px 0px 10px #000; box-shadow:0px 0px 10px #000; } 
+
+.nivoZoomHover { background:url(images/zoom.png) no-repeat 50% 50%; } 
+
+.nivoZoomHover.loading { background:url(images/loading.gif) no-repeat 50% 50%; border:4px solid #000; width:16px; height:16px; top:43%; left:43%; opacity:0.8; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; }